CSS 盒模型
什么是 CSS 盒模型？
CSS 盒模型决定了浏览器渲染引擎以何种标准对标签进行渲染，我们可以通过 box-sizing 控制容器内部的标签的渲染规则，我们也可以通过判断某个标签的 border、padding 的出现位置是否被计算入元素本身 content 的宽高中，了解这个标签的盒模型标准是什么。
常用的盒模型标准
IE盒模型 -content-box- 怪异盒模型W3C盒模型 -border-box- 标准盒模型
IE 盒模型
IE 9 之后的 IE 浏览器默认采用 W3C 盒模型标准；
在 IE 盒模型标准下，浏览器对标签元素的宽高渲染规则如下
- 标签的占用宽度 =
content内容宽度 + 左右padding+ 左右border - 标签的占用高度为 =
content内容高度 + 上下padding+ 上下border
因为 margin 是控制标签元素的位置，并不影响元素的宽高，所以这里没有加上，其实一个完整的盒模型包括: content 内容 + padding 内边距 + border 边框 + margin 外边距；
W3C 盒模型
W3C 盒模型是 W3C 官方推荐使用的盒模型，它的特点是 padding 与 border 的数值会被计算到 content 中，也就是说，我们给一个标签元素添加 padding 或者 margin ，元素在页面中的宽高并不会增加，但内容位置会被挤压；
在 W3C 盒模型标准下，浏览器对标签宽高的渲染规则如下
- 标签占用的宽度 =
content内容宽度 - 标签占用的高度 =
content内容高度
举个栗子
IE 盒模型 ↓
<body>
<style type="text/css">
.red{
box-sizing: content-box; /* 怪异盒模型 */
width: 200px;
height: 200px;
padding: 50px;
border: 10px solid #000;
margin: 150px auto;
}
</style>
<div class="red">这是内容</div>
</body>
这是效果 ↓
此时这个标签的实际宽高为：
- 实际宽度 =
content+padding-left+padding-right+border-left+border-right= 200 + 50 * 2 + 10 * 2 = 320 - 实际高度 =
content+padding-top+padding-bottom+border-top+border-bottom= 200 + 50 * 2 + 10 * 2 = 320
W3C 盒模型 ↓
<body>
<style type="text/css">
.red{
box-sizing: border-box; /* 标准盒模型 */
width: 200px;
height: 200px;
padding: 50px;
border: 10px solid #000;
margin: 150px auto;
}
</style>
<div class="red">这是内容</div>
</body>
这是效果 ↓
我们可以看到，虽然我们给标签设置了 width: 200px; height: 200px ，但是因为我们设置了标准盒模型 box-sizing: border-box ，所以这个标签元素的内边距 padding 、border 被添加到了 content 中，该标签的实际宽高如下：
- 实际宽度 =
content+padding-left+padding-right+border-left+border-right= 80 + 50 * 2 + 10 * 2 = 200 - 实际高度 =
content+padding-top+padding-bottom+border-top+border-bottom= 80 + 50 * 2 + 10 * 2 = 200
content 变成 80 的原因是被 padding 和 border 挤压了，计算公式如下：
content= 200 - 50 * 2 - 10 * 2 = 80
