CSS盒子模型

什么是盒子模型？html当中我们最常见标签的是div，div也是一种块元素，我们可以认为div就是一种盒子，想象成木框。盒子有长和宽，有木头厚度构成的宽(填充)，可以放东西，放在某个地方和其它盒子是有距离的。了解盒子模型有助于我们学习css，了解元素的构成。

盒子模型的组成

盒子模型又分为IE盒模型和标准盒模型，也就是说标签元素如div放在IE浏览器和其它浏览器(这里以chrome浏览器作为比较)上是存在不同的，最大的差别就在于对于宽高的计算，也就是width和height的区别。
盒子模型的组成为：content(width、height)、padding、border、margin，分别是内容、内边距、边框、外边距

如下代码：

.box{
    width: 200px;
    height: 200px;
    border:10px solid #ccc;
    padding: 10px;
    background-color: #666;
    margin: 10px auto;
}

打开chrome浏览器和IE浏览器按F12可以清楚的查看content、padding、border以及margin值

标准盒模型

标准盒模型是我们最熟悉的盒模型，它最大的特点就是我们设置width和height就是content的width和height，如上述的box，在css当中，我设置width和height为200px，那么box的content的宽高就是200px，css当中设置的padding和border值不会影响到content的值。

标准盒模型.png
标准盒模型.png

IE盒模型

IE盒模型和标准盒模型的区别就在与width和height的计算方式不一样，它不是说css中设置width和height的大小之后就是多少了。IE盒模型的width和height是content+padding+border,如上述的box，width虽然也是200px，但是它包含了padding和border值，它的content值实际为200-20-20=160px，从浏览器中可以很明显的看出其两者的不同

width=contentWidth+padding-left+padding-right+border-left+border-right
height=contentHeight+padding-top+padding-bottom+border-top+border-bottom

IE盒模型.png
IE模型.png

结束语

其实还可以引入一个box-sizing的概念，它有三个属性

• content-box：可以理解成我设置width多少那么该元素的content值就是多少
• border-box: 可以理解成IE盒模型中的盒子width和height计算方法，是包括padding和border的
• inherit：继承父元素的box-sizing属性