CSS的两种盒子模型

前言

在CSS的学习过程中，经常会遇到由不同盒子模型带来的误解问题。这篇文章举例分析了两种不同的盒子模型：W3C盒模型和IE盒模型。

---

一、W3C盒模型（标准盒模型）

下图为W3C盒模型：

 CSS中设置的width和height只会影响内容区域的宽度和高度，如果额外设置了padding和border值，则会把标签的实际宽度撑大。

给一个标签添加：box-sizing:content-box；(元素默认)

这个标签就转换为了w3c盒模型

标签得实际宽度 = 设置的width宽度 + border宽度 + padding的宽度

举个例子：

div {
            box-sizing: content-box;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

以上代码会得到一个宽高为200px的W3C盒模型，如图：

 如果我们额外设置了padding和border值，则实际宽度会变大。

div {
            box-sizing: content-box;
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid black;
            background-color: purple;
        }

如图，div的宽高变为了260px，加上了padding和border的宽度。

二、IE盒模型（怪异盒模型）

下图为IE盒模型：

 CSS中设置的width和height等于实际宽度和高度，如果额外设置了padding和border值，则实际宽高不变，内容区域变小。

给一个标签添加：box-sizing:border-box；

这个标签就转换为了怪异盒模型

标签得实际宽度 = 设置的宽度

如果设置了padding和border，内容的宽高 = 设置的width宽度 - border宽度 - padding的宽度

举个例子：

div {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

以上代码会得到一个宽高为200px的IE盒模型，如图：

 如果我们额外设置了padding和border值，则实际宽度也不会改变，但内容区域会缩小。

div {
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            padding: 20px;
            border: 10px solid black;
            background-color: purple;
        }

如图，div的宽高不变，内容区域宽高缩小为140px，减去了padding和border的宽度。

---

总结

这篇文章总结了两种不同的盒子模型：W3C盒模型和IE盒模型

• box-sizing: content-box 是W3C盒子模型
• box-sizing: border-box 是IE盒子模型

W3C盒子模型： 

标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度

IE盒子模型：

标签得实际宽度 = 设置的宽度