一、W3C标准盒模型 标准盒模型width只包含content的宽。  二、 IE盒模型 IE盒模型的width=border*2+padding*2+content    三、为什么IE盒模型更容易开发？ 比如要在一个容器里并排显示两个同样的盒子。你用标准模型时肯定会这样设置每个盒子width:50%。再怎么去调整padding都会在两个盒子的内部去调整，不会再影响布局。 四、如何将保准盒模型转化为IE盒模型？ CSS3中运用box-sizing属性来特定定义匹配在某个区域的特定元素。 box-sizing:content-box，表示按照标准的盒模型显示。 box-sizing:border-box，表示按照IE盒模型来显示，通过已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。  ### 什么是“盒子” 初学 CSS 的朋友，一开始学 CSS 基础知识的时候一定学过`padding``border`和`margin`，即内边距、边框和外边距。它们三者就构成了一个“盒子”。就像我们收到的快递，本来买了一部小小的手机，收到的却是那么大一个盒子。因为手机白色的包装盒和手机机器之间有间隔层（内边距），手机白色盒子有厚度，虽然很薄（边框），盒子和快递箱子之间还有一层泡沫板（外边距）。这就是一个典型的盒子。  如上图，真正的内容就是这些文字，文字外围有 10px 的内边距，5px 的边框，10px 的外边距。看到盒子了吧？ > 题目：盒子模型的宽度如何计算 ### 固定宽度的盒子 ~~~ <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;"> 之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》， 文章言简意赅的介绍的浏览器的工作过程，web前端 </div> ~~~  如上图，得到网页效果之后，我们可以用截图工具来量一下文字内容的宽度。发现，文字内容的宽度刚好是 300px，也就是我们设置的宽度。 因此，**在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：（内容宽度 +`border`宽度 +`padding`宽度 +`margin`宽度）之和**。这样我们改四个中的其中一个，都会导致盒子宽度的改变。这对我们来说不友好。 没关系，这个东西不友好早就有人发现了，而且已经解决，下文再说。 ### 充满父容器的盒子 默认情况下，`div`是`display:block`，宽度会充满整个父容器。如下图： ~~~ <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;"> 之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》， 文章言简意赅的介绍的浏览器的工作过程，web前端 之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》， 文章言简意赅的介绍的浏览器的工作过程，web前端 </div> ~~~  但是别忘记，这个 div 是个盒子模型，它的整个宽度包括（内容宽度 +`border`宽度 +`padding`宽度 +`margin`宽度），整个的宽度充满父容器。 问题就在这里。如果父容器宽度不变，我们手动增大`margin`、`border`或`padding`其中一项的宽度值，都会导致内容宽度的减少。极端情况下，如果内容的宽度压缩到不能再压缩了（例如一个字的宽度），那么浏览器会强迫增加父容器的宽度。这可不是我们想要看到的。 ### 包裹内容的盒子 这种情况下比较简单，内容的宽度按照内容计算，盒子的宽度将在内容宽度的基础上再增加（`padding`宽度 +`border`宽度 +`margin`宽度）之和。 ~~~ <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px;"> 之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》 </div> ~~~  ### `box-sizing:border-box` 前面提到，为盒子模型设置宽度，结果只是设置了内容的宽度，这个不合理。如何解决这一问题？答案就是为盒子指定样式：**`box-sizing:border-box`**。 ~~~ <div style="padding:10px; border:5px solid blue; margin: 10px; width:300px; box-sizing:border-box;"> 之前看过一篇文章，叫做《浏览器工作原理：新式网络浏览器幕后揭秘》 </div> ~~~  上图中，为`div`设置了`box-sizing:border-box`之后，300px 的**宽度是内容 +`padding`\+ 边框的宽度（不包括`margin`）**，这样就比较符合我们的实际要求了。建议大家在为系统写 CSS 时候，第一个样式是： ~~~ * { box-sizing:border-box; } ~~~ 大名鼎鼎的 Bootstrap 也把`box-sizing:border-box`加入到它的`*`选择器中，我们为什么不这样做呢？ ### 纵向 margin 重叠 这里提到 margin，就不得不提一下 margin 的这一特性——纵向重叠。如`<p>`的纵向 margin 是 16px，那么两个`<p>`之间纵向的距离是多少？—— 按常理来说应该是 16 + 16 = 32px，但是答案仍然是 16px。因为纵向的 margin 是会重叠的，如果两者不一样大的话，大的会把小的“吃掉”。