CSS 基本盒模型简介

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

每个框都由四个部分（或区域）组成，由其各自的边缘定义：内容边缘、内边距边缘、边框边缘和外边距边缘。

CSS Box model

内容区域

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

如果 box-sizing 属性设置为 content-box（默认值），并且如果元素是块级元素，则可以使用 width、min-width、max-width、height、min-height 和 max-height 属性显式定义内容区域的大小。

**内边距区域** 由内边距边缘限定，扩展内容区域以包含元素的内边距。其尺寸为内边距框宽度和内边距框高度。

**边框区域** 由边框边缘限定，扩展内边距区域以包含元素的边框。其尺寸为边框框宽度和边框框高度。

边框的厚度由 border-width 和简写 border 属性确定。如果 box-sizing 属性设置为 border-box，则可以使用 width、min-width、max-width、height、min-height 和 max-height 属性显式定义边框区域的大小。当在框上设置背景（background-color 或 background-image）时，它会扩展到边框的外边缘（即在 z 顺序中扩展到边框下方）。可以使用 background-clip CSS 属性更改此默认行为。

**外边距区域** 由外边距边缘限定，扩展边框区域以包含用于将元素与其相邻元素分隔开的空白区域。其尺寸为外边距框宽度和外边距框高度。

边距区域的大小由margin-top、margin-right、margin-bottom、margin-left和简写margin属性决定。当发生边距折叠时，由于边距在盒子之间共享，因此边距区域没有明确定义。

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