每个元素（包括内联元素）显示在页面上可以被看作是一个盒子，盒子模型（盒模型）。看看Chrome DevTools截图：
很明显，盒子模型由4部分组成，从内到外是：
内容>边距>边框>边距
作为一个合理的原因，一个元素的宽度（类比的高度）应该用这种方法来计算：
总宽度=边距左+左边框+左填充+宽度+填充右+边框右+边距右边
但是不同的浏览器（你没有猜测，也就是不同的浏览器）在宽度的解释上是不同的。浏览器符合W3C标准，一个元素的宽度仅仅是它内容的宽度，剩下的将是额外的：
CSS代码将内容复制到剪贴板。
{。例
宽度：200px；
填料：10px；
边境：5px固体# 000；
保证金：20px；
}
那么他的最终宽度应该是：
宽度=宽度（200px）+填料（10px×2）+缘（5px×2）+缘（20px * 2）= 270px；
在IE（小于IE9），最终的宽度：
宽度=宽度（200px）+缘（20px * 2）= 240px；
我个人认为即是更多的人的思维，毕竟，填充被称为内边缘和边界的一个额外的宽度不能said.w3c最后，为了解决这个问题，加上框胶CSS3属性。当我们机顶盒选型：边界框；边框和填充都包含在宽高为标准之前，即同样的，为了避免你在不同的浏览器相同的CSS，最好加：
CSS代码将内容复制到剪贴板。
*，*：以前，*：{后
-moz盒尺寸：边界盒；
Webkit盒尺寸：边界盒；
盒尺寸：边框框；
}
这里有两个特殊情况：
没有宽度mdash；mdash；绝对定位（位置：绝对；）元
没有宽度mdash；mdash；浮动（float）元素
他们不占据页面上的空间。他们喜欢在页面的顶部浮动。它们不影响其他元素的位置。
CSS3弹性盒模型
属的相关值：
盒子东方决定子元素的方向。
Box Flex与父标签的宽度或高度成比例，其值至少为1。当子元素的宽度值为该元素为固定宽度时，剩余空间比例分布。
盒子是用来确定方向的子元素的顺序
框对齐决定垂直方向的使用，即垂直方向的对齐。
框包决定父标签级别空间的使用。
Grammar：
盒对齐：开始|端|中心|基线|伸展；
箱方向：正常|反|继承；
Box Flex：值；
框flex组：整数；
箱线：单|多；
框序号组：整数；
箱东方：横向（水平）|垂直（垂直）|内联轴|块轴|继承
包：开始|端|中心|对齐（两端对齐）；
盒尺寸：内容框|边界盒|继承：
盒子的影子：插图h-shadow v-shadow模糊扩散的颜色；
实例uff1a
在一个灵活的盒子模型容器中使用平均配子元素是很容易的：
CSS代码将内容复制到剪贴板。
{容器。
显示：框；
框对齐：拉伸；
盒子垂直：垂直；
}
容器跨度{框弯曲：1；}
示例：CSS 3灵活的盒子模型
小心 uff1a
外层必须有一个宽度。内层必须BFC。
