共计 2169 个字符，预计需要花费 6 分钟才能阅读完成。
– css 盒模型是什么网页设计中 css 技术所使用的一种思维模型
– 盒模型的组成
– 盒模型的两种标准（在不考虑 css3 的情况下）
两种模型唯一的差异就在元素宽高度的定义 w3c 标准模型的 元素宽高=内容（content）的宽高 IE 模型的 元素宽高=内容（content）+填充（padding）+边框（border）的总宽高
在 html 头部有一个 <!Doctype html> 声明，浏览器会根据这个声明来判断文件是什么类型的，也会根据这个声明来解析文件
当我们写了 doc 声明的时候，无论哪种内核的浏览器都会解析为标准模型，元素宽度=content 的宽度，即当我们设置 width：100px 的时候，这个宽度指的就只是 content 的宽度 总宽度=我们设置的 width+padding+border
当头部的 doc 声明缺失的时候，部分 ie 内核的浏览器则会触发 ie 模式 即怪异模式（ie6，7，8）width=content+padding+border 总宽度=width
– 为什么会出现不同模型
当年微软的 IE 浏览器占据超过 80% 市场份额的时候，想自己独立制定一套浏览器标准，其中就包括 IE 的盒模型，但是有很多公司不同意 IE 的做法，他们遵循的是 W3C 的标准来定制浏览器，也就造成了现在浏览器不同的 CSS 盒模型，但是仍有很多老网站采用的是老 IE 的标准 (怪异模式)，因此很多浏览器保留了 IE 的怪异模式。
– box-sizing 在 CSS3 中我们可以通过设置 box-sizing 的属性来完成标准或者怪异模式之间的切换。
（1）box-sizing：content-box 采用标准模式 也是默认样式
（2）box-sizing：border-box 采用 ie 怪异模式
– content-box 的缺点 目前任何浏览器默认使用的都是 content-box，但是这个内容盒子有一个缺点，举个栗子 假设我们想要两个子容器 float:left，宽度各 50%，然后给一点 padding，最后让子容器并排充满父容器，代码如下
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
.father-box{
width: 500px;
background: #0ba1b5;
}
.left-box{
width: 50%;
padding: 10px;
height: 100px;
float: left;
background: #b23e35;
}
.right-box{
width: 50%;
padding: 10px;
float: left;
height: 100px;
background:#77b55a;
}
</style>
</head>
<body>
<div class=”father-box”>
<div class=”left-box”>left-box</div>
<div class=”right-box”>right-box</div>
</div>
</body>
</html>
我们在浏览器中运行之后发现，想象的很美好 结果却并不美好，因为两个子元素宽度超过了 50%，导致了折行，于是宽度就不能设置为 50% 了，只能将宽度减去 padding 的值，在这种时候，border-sizing 就派上用场了
了解 border-sizingborder-sizing 是 css3 新增的声明，很多开发者可能都不曾用过，既然标准模型诞生的早，又叫标准模型，为什么还要出现 border-sizing 呢
border-sizing 的优点 border-sizing 的诞生就是为了解决 content-sizing 的缺点，border-sizing 意味着子容器的 padding 和 border 厚度都算在 50% 内，这样你就可以随意修改 padding 和 border 的值，而不用担心父容易被撑爆
border-sizing 的兼容性 ie8 也支持该属性，所以不用担心兼容性问题
border-box 的使用场合目前最流行的 css 框架几乎都采用了 border-sizing，框架想要具备栅格系统，肯定要用 border-sizing 通常情况下 你只需要在必须使用 border-sizing 元素的身上使用这个属性，其他元素都保持 content-sizing 就好了
子元素有 padding 和 border，或者至少有其一，并且需要给子元素设定 100% 宽度（或者 50% 宽度等等），这时候显然需要 border-box。设为 border-box 之后，padding 和 border 的厚度可以随意调，并不会溢出父元素。如果是 content-box，那么，宽度必然会溢出，而且，为了不溢出，你设定子元素的宽度就只能是一个定值，或者是一个计算值（比如 calc(100%- 20px)）。
由于之前一直对于 css 盒模型的理解模棱两可，所以最近趁有时间查了很多相关文章，归纳了以上内容终于搞懂了这个难啃的骨头，参考的资料有以下几篇文章，感兴趣的可以自己查阅，由于自己也是边理解边总结的内容，如果文章中有什么不对的地方还请大家指正。https://blog.csdn.net/qq_3190…https://www.cnblogs.com/cheng…https://www.jianshu.com/p/006…
