在 CSS 的发展历程中, 有两种版本的盒模型, 一个叫 IE 盒模型(又叫怪异盒模型), 一个叫 W3C 标准盒模型, 在早期的微软出的 IE 浏览器中采用的是自己的盒模型标准成为 IE 盒模型或者叫怪异盒模型(此模型只会出现在 IE5.5 及其更早的版本中. 只要为文档设置一个 DOCTYPE, 就会使得 IE 遵循标准兼容模式的方式工作
).
IE5.5 及更早的版本使用的是 IE 盒模型, 后来微软也慢慢转向了 W3C 的标准, 在 IE6 以后支持了 W3C 标准盒模型. 在我们现在的主流浏览器里面默认都是使用 w3c 标准盒模型.
1,CSS 盒子模型概念
CSS CSS 盒子模型 又称框模型 (Box Model) , 包含了元素内容 (content), 内边距(padding), 边框(border), 外边距(margin) 几个要素.
1.1 标准盒子模型
image.PNG
图中最内部的框是元素的实际内容, 也就是元素框, 紧挨着元素框外部的是内边距 padding, 其次是边框(border), 然后最外层是外边距(margin), 整个构成了框模型. 通常我们设置的背景显示区域, 就是内容, 内边距, 边框这一块范围. 而外边距 margin 是透明的, 不会遮挡周边的其他元素.
元素框的总宽度 = 元素 (element) 的 width + padding + margin +border;
元素框的总高度 = 元素 (element) 的 height + padding +margin +border.
CSS 中的宽 (width)= 内容(content) 的宽
CSS 中的高 (height)= 内容(content) 的高
1.2 IE 盒子模型
image.PNG
CSS 中的宽 (width)= 内容(content) 的宽 +(border+padding)
CSS 中的高 (height)= 内容(content) 的高 +(border+padding)
2,CSS 外边距合并(叠加)
两个上下方向相邻的元素框垂直相遇时, 外边距会合并, 合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值, 如图:
image.PNG
image.PNG
比较容易理解, 所以在页面中有时候遇到实际情况是需要考虑这个因素的. 当然外边距合并其实也有存在的意义, 如下图:
image.PNG
需要注意的是: 只有普通文档流中块框的垂直外边距才会发生外边距合并. 行内框, 浮动框或绝对定位之间的外边距不会合并.
3,box-sizing 属性介绍
box-sizing 属性是用户界面属性里的一种, 之所以介绍它, 是因为这个属性跟盒子模型有关, 而且在 CSS reset 中有可能会用到它.
box-sizing : content-box|border-box|inherit;
(1) content-box , 默认值, 可以使设置的宽度和高度值应用到元素的内容框. 盒子的 width 只包含内容.
即总宽度 = margin+border+padding+width
(2) border-box ,
设置的 width 值其实是除 margin 外的 border+padding+element 的总宽度. 盒子的 width 包含 border+padding + 内容
即总宽度 = margin+width
很多 CSS 框架, 都会对盒子模型的计算方法进行简化.
(3) inherit , 规定应从父元素继承 box-sizing 属性的值
关于 border-box 的使用:
1 一个 box 宽度为 100%, 又想要两边有内间距, 这时候用就比较好
2 全局设置 border-box 很好, 首先它符合直觉, 其次它可以省去一次又一次的加加减减, 它还有一个关键作用 -- 让有边框的盒子正常使用百分比宽度.
来源: http://www.jianshu.com/p/ef21d255bd67