CSS3之盒子模型详解

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：元素继承父元素的盒模型模式