当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性。
每个盒子由四个部分组成，其效用由它们各自的边界（Edge）所定义。与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
盒模型可以分为两种：标准盒模型和IE盒模型
在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
其中margin 不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止 —— 不会延伸到margin。
在IE盒模型中，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。
浏览器默认设置，box-sizing: content-box，顾名思义，内容盒子，content的宽高即盒子宽高，不包括padding与border。
如果需要使用IE盒模型，可以通过为其设置 box-sizing: border-box 来实现。 这样就可以告诉浏览器使用 border-box 来定义区域，从而设定您想要的大小。
.box {
box-sizing: border-box;
}
如果希望所有元素都使用替代模式，而且确实很常用，设置 box-sizing 在 <html> 元素上，然后设置所有元素继承该属性。
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
