CSS3之盒子模型详解
1、什么是盒子模型?
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
在CSS中盒模型被分为两种:第 一种 是 W3C的标准模型,另一种 是IE的传统模型(也叫怪异盒模型)。
2、W3C 的标准模型
W3C的标准模型实际上是内容盒模型,元素的内容占据我们设置的宽高,内容周围的padding和border是另外计算的,即盒子内容的宽/高是我们设置的宽/高,盒子总宽/高是设置的宽/高+padding+border+margin。
计算公式:盒子总宽度=width+padding(左右)+border(左右)+margin(左右)
盒子总高度=height+padding(上下)+border(上下)+margin(上下)
3、IE的传统模型(怪异盒模型)
在IE传统浏览器下,我们设置的宽高包括content、padding、border在内的。
盒子的总宽度=width+margin(左右)(width已经包括了padding和border)
盒子的总高度=height+margin(上下)
为了解决如何应用和选择哪种盒模型的问题,CSS3新增了一个属性box-sizing
盒模型的box-sizing属性:
- content-box:内容盒模型,默认值,元素遵循W3C盒模型
- border-box:怪异盒模型,内容遵循低版本IE浏览器下传统盒模型
- inherit:元素继承父元素的盒模型模式