html5善于盒模型定位,2个小时上手html+css-003盒模型和定位
我已经说过了,我要尝试看看自己能够用多少个小时把一个小白菜鸟变成月薪10000+的前端工程师。这篇文章就是我的尝试系列计划之一。《2个小时上手html+css》的第三篇。
这个教程是一系列,这是第三篇,学习本系列教程你需要:
1.你会基础的电脑操作(会打字,新建文件夹、新建文件、保存文件,知道什么是浏览器,28个英文字母都得熟悉,不能多数了俩)会安装基本的编辑器。
2.每个文件都要一个个的敲,一个不落的调试。
3.不要想太多,不要知道太多,按照步骤做就好了。
这个课程学习需要三个小时,包含练习时间,你将学会:
1.标准和模型和怪异和模型
2.定位和浮动
3.关于图片
4.表单和表格
第一部分标准和模型
在IE6下不加我们的文档声明,也就是
会触发诡异模式,而诡异模式面试经常考,却并不是实用。那么我们先了解一下,不废话上图。
盒模型.jpg
简单的说就是,
标准的和模型实际的宽度 = width+css padding+border
而 诡异盒模型下宽度设置多少就是多少,有边框和padding要内缩而不是外扩。
这个东西知道有啥用呢?在我们写菜单的时候很有用。
看例子:
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
*{
margin: 0;
padding: 0;
}
li{ list-style: none;}
ul li{
float: left;
width:25%;
background: red;
text-align: center;
height: 30px;
line-height:30px;
}
- 菜单1
- 菜单2
- 菜单3
- 菜单4
注意,到这一步位置,所有代码你都应该明白我再写什么,如果不明白那么说明你第一个3个小时的工作不合格!回去搞明白为止再回来学习。
现在菜单都是红色的我想分隔开怎么办呢 加一个border,
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
*{
margin: 0;
padding: 0;
}
li{ list-style: none;}
ul li{
float: left;
width:25%;
background: red;
text-align: center;
height: 30px;
line-height:30px;
border:1px solid green;
}
- 菜单1
- 菜单2
- 菜单3
- 菜单4
然后你会看到 菜单挤下去了,为什么挤下去呢,因为标准和模型每个
li宽度 = 25% +2px (左右两个边) 那么整体就超出了父级的宽度100%,这个时候怎么办呢,在css中,有这么一个属性
ul li{
float: left;
width:25%;
background: red;
text-align: center;
height: 30px;
line-height:30px;
border:1px solid green;
box-sizing:border-box;
}
box-sizing:border-box; 这句话的意思是,li定死就是25%,你加边或者padding 要内缩而不外扩,这样这个问题就解决了,这个在移动端菜单非常常用。
说完了盒子模型你就知道了盒子的样子,其实就是把网页分成一块儿一块儿的豆腐块儿。那既然是一块一块的那么肯定涉及到位置,还有如何排列这些盒子。就是我们马上要说的定位和布局。
在css中,定位分为四种,说白了就是把盒子放在什么位置。
position:static|relative|absolute|fixed;
static加与不加都一样,是默认的,而relative是相对于自己默认的位置。
而absolute是绝对定位,如果存在父级定位那么依照父级定位去定位,不存在参照body去定位。
这里我只想说一个常用的窗口居中代码。
#window{
width:200px;
height:200px;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
background:#ccc;
position: absolute;//fixed;
}
而postion:fixed的意思是,固定在窗口的某个位置,那么它和position:absolute;什么区别呢?
*{
margin: 0;
padding: 0;
}
#window{
width:200px;
height:200px;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
background:#ccc;
position: absolute;
}
自己体会下,尤其是滚动鼠标的时候?
清楚了吧。
未完待续。
html5善于盒模型定位,2个小时上手html+css-003盒模型和定位相关推荐
- html盒子模型页面居中,【静态页面架构】CSS之盒子模型
CSS架构 盒子模型: 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距: border属性: 简写属性用来设置边距的上(top ...
- html图片定位代码怎么写,如何在css中设置插入图片定位
在做网页开发时,客户给的素材图片通常都是连在一起的,这样做也是为了缩短响应时间.下面就给大家具体说一下 ,如何通过css属性来定位图片. 如何在css中设置插入图片定位 首先设置固定图片的css属性是 ...
- 深入理解盒子模型——CSS视觉格式化模型|盒模型|定位方案|BFC
视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的,而视觉格式化模型(Visual formatting model)是一套规则,将这些框布局成访问者看到的样子. 哪些因素控制了这些 ...
- CSS基础知识---浮动,定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- web前端 (07)CSS 03+盒模型+定位
目录 盒模型 (框模型) ***** 内边距 padding *** 外边距 margin *** 列表样式 * 鼠标形状 *** 定位 *****默认定位(static定位) *****如何修改 默 ...
- html盒子优先级设置,CSS 基础(盒模型、选择器、权重、优先级)
层叠样式表(Cascading Style Sheets) 盒模型 盒模型包含四部分:margin.border.padding.content.如果不使用doctype声明,浏览器默认使用自己的模式 ...
- 简要介绍css的盒模型,CSS盒模型的介绍
CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和IE模型: ...
- css3弹性盒模型兼容性,彻底弄懂css3的flex弹性盒模型
由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...
- html网页改兼容模型,浏览器兼容、CSS hack、normalize.css及盒模型基础知识问答
一.问题(一).如何调试 IE 浏览器 1.对于IE7及以下版本可采用IETester(不能测脚本,模拟出来的IE6平台与真实的IE6还是有差异的,结果不完全可靠).Expression Web Su ...
最新文章
- php 批量初始化数组,PHP post 数组初始化
- 二元运算符的运算符重载
- lldb 调试 linux下 .net Core 总结及开源扩展 yinuo
- mysql qps如何查看_一款查看mysql QPS的脚本
- linux之trap命令
- lunix下的redis数据库操作——list列表
- windows绕开强制更新
- 【英语学习】【WOTD】impetus 释义/词源/示例
- linux rdma服务,在Linux中infiniband rdma差转转bw
- 2017,互联网出海应该注意哪些问题?
- PNG in IE - 1 - pngfix.js
- 队列服务(Queue)
- 魔塔类游戏实现源码及关卡生成
- fortran 教程
- 中美线径对照表_常用线规号码与线径对照表
- C++:单例模式——线程安全模式、饥汉模式、懒汉模式
- 【生物信息学】外显子测序的原理及优缺点
- 第三章 输入验证----tapestry教程Enjoying Web DevelopmenEnjoying Development翻译
- android 广播 更新ui,详解Android UI更新的几种方法
- 华为和荣耀学编程计算机推荐,2020~2021笔记本电脑推荐(华为篇)
热门文章
- python库之matplotlib
- mac 终端提示_有用的终端提示
- bec初级第一课_在您的第一个初级开发人员工作中如何生存和发展
- bootstrap快速入门_在5分钟内学习Bootstrap 4-快速入门指南
- linux容器安卓下载,Docker 1.7.0 发布下载,Linux 容器引擎
- mysql视图实验心得_Mysql学习经验总结【3】
- Centos7.2安装python3与python2共存
- Opencore-黑苹果:外接4K显示器却只能选择2K或以下分辨率
- java中IO流的标准异常处理代码
- 这操作厉害:怎么样发布你的 Python模块给别人 “pip install”