来自官方的解释:：当对一个文档进行布局（lay out）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）。CSS 决定这些盒子的大小、位置以及属性（例如颜色、背景、边框尺寸…）。
每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义（原文：defined by their respective edges，可能意指容纳、包含、限制等）。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。

也就是说，我们可以把一个元素看作是一个盒子，这个盒子由四部分组成：内容 + 内边距 + 边框 + 外边距。

1. 内容就是元素存放文本等等区域。
2. 内边距就是 padding 的间距。
3. 边框就是 border 的间距。
4. 外边距就是 margin 的间距。

如下图：

最中间 500x300 的浅蓝区域就是内容区域，以此向外依次为，内边距、边框、外边距。

而在标准的盒子模型下，元素的宽度 = 内容宽度 + 内边距 + 边框宽度

所以之前内元素溢出的原因就是：

• 设置了 width:100%; 此时的 内容宽度 已经等于外元素的宽度，即 500px。
• 因为设置了 padding: 20px;，所以此时内元素的实际宽度为 500px + 20px + 20px = 540px，比外元素 500px 的宽度超出了 40px，所以就溢出了。

box-sizing 是用来定义如何计算元素的宽度和高度，属性值如下：

1. box-sizing: content-box; 这是默认值，标准盒子模型。width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。
2. box-sizing: border-box; width 和 height 属性包括内容，内边距和边框，但不包括外边距。

所以用 box-sizing: border-box; 就可以解决内元素宽度为100%时超出外元素的问题了。