1. 什么叫盒子模型
在html中大部分元素,特别是块元素display:block;
都可以被看做一个盒子。网页布局就是一个一个盒子的平铺,堆叠,嵌套摆放。这么多的盒子放在一起,最重要的就是去关注他们的各种尺寸,边界等等,主要怕意料外的重叠一类导致的显示不正常。
2. W3C和IE盒子模型指的什么?
- W3C标准盒子模型
如图,它由content
,padding
,border
,margin
几个属性构成,这几个都是css里面用到最多的一些属性设置项。在这个图里可以知道为啥css的一些属性要这么设置,以及值是怎么来的。
下图可以直观的表示margin/padding的作用范围:
padding和margin之间的虚线线宽,就可以称作边界border
padding和margin都有上下左右
的作用范围,写作-left
,-right
,-top
,-bottom
。
padding和margin长度设置方法可以用auto
,legth(px/cm单位)
,%(父元素宽度的百分比计算)
,inherit(集成父元素的边距)
。
padding和margin可以用组合属性
,感觉有些约定俗成的东西在里面,如下理解,顺序方向记住就行:margin:4px
表示上下左右都是4px(表示四个方向)margin:4px 8px
表示上下4px,左右8px(前一个表示上下,后一个表示左右)margin:4px 8px 5px
表示上4px,左右8px,下5px(第一个用于上,第二个用于左右,第三个用于下)margin:4px 8px 5px 3px
表示上4px,右8px,下5px,左3px(顺时针,上右下左)
关于盒子尺寸的计算,如下简单加减法:
# 在W3C模型中
actual width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
actual height = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
-
IE标准盒子模型
和W3C盒子模型不一样的是,IE盒子模型把border的(left+right)算到width里面
去了,把border的(top+bottom)算到height里面
去了;
如此看来,IE的设置精度和W3C比起来算是变差了。 -
如何让浏览器选择对应的盒子模型
不同的盒子模型就带来了不一样的差异,这就是为什么用不同的浏览器,显示效果有时会有差异的原因
在<DOCTYPE>
中加入声明,让浏览器知道应该以那种方式解释盒子
3. margin使用的一些注意事项
- 增加块
marigin-bottom
或者margin-top
值之后,元素却没有变化
这是因为合并后的就发生交叉重叠。
这种效果就和PPT置入顶层
,置于底层
的效果是一样的