浏览器的渲染引擎在渲染 HTML 元素时会将其当作一个盒子来渲染，这就是 CSS 的盒模型（Box Model）。

一个盒模型包含了以下内容：

• 内容（content）：元素的内容，比如文本或图像，通过 width 与 height 设置尺寸 。未设置的情况下高度为内容高度，块级元素宽度为父元素宽度，行内元素宽度为内容宽度。
• 内边距（padding）：用以填充元素周围的区域。
• 边框（border）：处在内边距与外边距之间的边框。
• 外边距（margin）：围绕在边框之外的区域。

$$tip

只有以上四个内容会占据页面空间。

$$

box-sizing

box-sizing 定义了浏览器如何计算一个元素的宽度和高度，它有以下取值：

content-box

默认值，如果设置 width 与 height 只会应用到内容区域空间，而 padding 与 border 都会算作新的空间。

尺寸的计算公式：

width = 内容的宽度

height = 内容的高度

border-box

此时的 width 与 height 包括 padding 与 border 区域空间。

尺寸计算公式：

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

推荐使用 border-box

通常来说，由于 padding 与 border 在样式上感觉像是元素的整体一部分。设计师设计一个元素时的宽高也是包括 padding 与 border 的，所以使用 border-box 更符合直觉。

因此推荐之后的开发中所有的元素都使用 box-sizing: border-box; 的配置。

将以下代码加在一个全局样式文件中，匹配所有元素的 box-sizing 属性。

:root {
    box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */
}
*,
*::before,
*::after {
    box-sizing: inherit; /* box-sizing 继承自父元素 */
}

比如以下的设计稿，宽度 270px 就是包括了内边距的尺寸。