CSS的盒模型CSS盒模型本质上是一个盒子，盒子包含着HTML元素。无论是div、span、还是a都是盒子。但是，图片

CSS盒模型本质上是一个盒子，盒子包含着HTML元素。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。

盒子由四个属性组成：从内到外分别是：content（内容）、padding（内边距）、border（边框）、margin（外边距）。

content：盒子的内容，其中显示文本和图像
padding：清除内容周围的区域
border：围绕内容和内边距的边框
margin：清除边界外的区域，外边距是透明的

提示：背景应用于由内容和内边距、边框组成的区域。

一、盒模型的分类

盒模型分为两类，分别为W3C盒子模型（标准模型）和 IE盒子模型（怪异盒模型）。

W3C盒子模型（标准盒模型）

标准盒模型.jpg

IE盒子模型（怪异盒模型）

二、盒模型的box-sizing属性

标准盒模型：box-sizing: content-box;
怪异盒模型：box-sizing: border-box;

三、盒模型的区别

标准盒模型和怪异盒模型的区别就是，宽度和高度的计算方式不同。

3.1 标准盒模型

标准盒设置的width/height只包含content盒子内容的宽度/高度。

width = contentWidth
height = contentHeight

我们举个例子来说明一下：

div {
    width:200px;
    height:200px;
    padding:50px;
    border:10px solid yellowgreen;
    margin:50px;
}

由图中我们可以看出，

content：200px
padding：50px
border：10px
div的实际宽度 = content + padding * 2 + border * 2 = 200 + 50 * 2 + 10 * 2 = 320px

这时我们发现，我们想要盒子的实际宽度和高度是200px，但是现在是320px，明显不符合我们的预期，怎么办呢？

别担心，我们可以根据一个公式来计算content的宽度：

contentWidth = 预期宽度 - paddingLeftWidth - paddingRightWidth - borderLeftWidth - borderRightWidth

3.2 怪异盒模型

怪异盒设置的width/height不仅包含了content盒子内容的宽度/高度，还包含了padding和border的宽度/高度。

width = contentWidth + paddingLeftWidth + paddingRightWidth + borderLeftWidth + borderRightWidth
height = contentHeight + paddingLeftHeight + paddingRightHeight + borderLeftHeight + borderRightHeight

同样，我们还以上面例子为例，来看一下怪异盒模式下的宽度：

div {
    width:200px;
    height:200px;
    padding:50px;
    border:10px solid yellowgreen;
    margin:50px;
}

图中可以看出，怪异盒模式下，我们设置的width就是盒子实际的宽度，已经自动的给我们把内容区域计算成80px * 80px的大小。

补充点

padding的计算

对于一个元素，我们不确定他的宽度和高度，但是想要按照一定的比例来显示，比如保持4:3的比例，我们可以使用padding来计算高度。

padding可以通过父元素的width属性，来设置百分比，从而动态确定高度。

.parent {
    /*父元素宽度*/
    width: 600px;  
    position:relative;
}
.child {
    width:100%;
    padding-top:75%;
}

上述代码可知，我们没有给child元素设置height属性，但是padding-top属性给了75%，它的75%是根据父元素parent的width来计算的，可得到height = 600px * 75% = 450px。并且，width和height设置的百分比是100% 和 75%，符合我们的4:3比例要求。

margin的计算

同理可得，我们给元素的margin属性设置百分比时，也是根据父元素的width属性来计算的。

.parent {
    width:400px;
    height:600px;
}
.child {
    margin:10% 20%;
    // 等价于
    margin:40px 80px;
}

由此可知，我们的计算都是通过父元素的width属性来计算的。