【CSS】盒子模型

CSS 盒⼦模型将每个 HTML 元素表示为⼀个矩形的盒⼦，这个盒⼦包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。

• 内容（content）：元素的实际内容，由 width 和 height 属性决定。
• 内边距（padding）：内容和边框之间的空间，由 padding 属性决定。
• 边框（border）：内容和外边距之间的边框，由 border 属性决定。
• 外边距（margin）：盒⼦边缘和其它元素之间的空间，由 margin 属性决定。

CSS 盒⼦模型中，盒⼦的总⼤⼩由这四个部分加起来决定，即 width + padding + border + margin。需要注意的是，CSS 盒⼦模型有两种，分别是标准盒⼦模型和怪异盒⼦模型。

• 标准盒⼦模型中，盒⼦的⼤⼩ = width + padding + border + margin
• 怪异盒⼦模型中，盒⼦的⼤⼩ = width + margin，因为 width 已经包含了 padding + border

在 CSS 当中，可以通过设置元素的 box-sizing 属性来决定元素显示为哪种盒模型：

• content-box：默认值，当前元素会显示为标准盒模型。
• border-box：当前元素会显示为怪异（替代 / IE）盒模型。