盒子模型本质就是从某特定的方面来描述一个长方形盒子。CSS盒子模型,通过描述DOM中的一个元素,以及该元素根据可视化格式模型在文档中的布局,从而形成的一种概念模型。
模型尺寸
每个盒子(元素)都包括:内部区域(inner edge)content以及可选、可再设置的周围属性:padding、margin、border。(根据浏览器的不同,每个属性的默认值都是有些差异的。主要区分的是PC端:IE和其他高版本浏览器;移动端:微信浏览器、android和IOS中的浏览器。)
既然讲的是尺寸,那就需要提到怎么实现这个尺寸了。content的区域的尺寸,可以根据盒子中的内容的多少进行变化,图片,文字的大小,数量等等;也可以设置width和height属性的值来进行改变。padding、margin、border可以直接设置值来进行控制。
图 1.1 盒子模型
浏览器实现与标准的差异?
标准是好的,但并不是每个浏览器都能乖乖的遵循这个规则,总会有那么两个闹腾的。低版本的IE浏览器(IE6/IE5)就是相当出名的一伙。
每个Element都是干嘛用的?包裹内容(或空内容)呗!那么这个内容的长宽尺寸怎么定义,就出现分歧了。参考 图1.1
IE6:元素width=内容的宽高+padding +border (若你设置一个元素的width=100px,padding=20px,然后你发现你的文字、图片的宽度只有100-20*2=60px了。)
其他:元素width=内容的宽高
怎么解决呢?好吧!最简单粗暴的方法就是计算:减去加上padding和border的值,内容显示的统一性。
CSS3之box-sizing?
目的:属性用来指定width和height的值应用在内容框还是者边框框上。并不兼容低版本的浏览器哦!!
Note:使用这个属性可以向IE6一样对盒子的解析方式。就平常开发过程中,会发现border-box(IE6解析方式),更加方便合理点。
Margin失效?
描述:多个div嵌套,出现内层的margin-top设置的值作用到了外层的div上。IE中常会出现。
解决:
- 父层div设置:overflow:hidden
- margin-top改成padding-top
- 父元素产生边距重叠的边,有不为 0 的 padding 或 宽度不为 0 且 style 不为 none 的 border;父层div加:padding-top: 1px;
- 让父元素生成一个 block formating context(实现方法见下表);父层div加:float: left/right;position: absolute;display: inline-block/table-cell (或其他 table 类型);overflow: hidden/auto
参考:
(1)Box model(www.w3.org)