CSS盒子模型介绍 | CSS Box Model: Introduction to the CSS box model

CSS盒模型：CSS盒模型简介

在布局文档时，浏览器的渲染引擎根据标准的CSS盒子模型将每个元素表示为矩形框。CSS确定这些框的大小，位置和属性（颜色，背景，边框尺寸等）。

每个盒子由四个部分（或区域）组成，由它们各自的边缘定义：content edge, padding edge, border edge, and margin edge.

以内容边界为边界的内容区域包含元素的“真实”内容，例如文本，图像或视频播放器。其尺寸是内容宽度（或内容框宽度）和内容高度（或内容框高度）。它通常具有背景颜色或背景图像。

如果该box-sizing属性设置为content-box（默认），内容区域的大小可以明确地定义width，min-width，max-width，height，min-height，和max-height属性。

填充区域，通过填充边缘为界，扩展了内容区域包括该元素的填充。它的尺寸是填充框的宽度和填充框的高度。当内容区域具有背景时，它扩展到填充。

填充的厚度由所确定的padding-top，padding-right，padding-bottom，padding-left，和速记padding属性。

边界区域 以边界扩展了填充区域以包含元素的边界。它的尺寸是边框宽度和边框高度。

边界的厚度由border-width缩写border属性决定。如果该box-sizing属性设置为border-box，边界区域的大小可以明确地定义width，min-width，max-width，height，min-height，和max-height属性。

空白区域，由所述余量边缘为界，延伸的边界区，以包括用于将元件从它的邻居分开的空白区域。其尺寸是边距框宽度和边距框高度。

边缘区域的大小由所确定的margin-top，margin-right，margin-bottom，margin-left，和速记margin属性。当边缘崩溃发生时，边缘区域没有明确的定义，因为边框在边框之间共享。

最后，请注意，对于未替换的内联元素，占用的空间量（对线条高度的贡献）由line-height属性确定，即使边界和填充仍显示在内容周围。

规范