CSS基本框模型简介

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

每个框由四个部分（或区域）组成，由它们各自的边界定义：内容边缘，填充边缘，边界边缘和边缘边缘。

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

如果该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属性。当在框上设置背景（background-color或background-image）时，它会延伸到边框的外边缘（即以z顺序在边框下方延伸）。可以使用background-clipcss属性更改此默认行为。

由边缘边界限定的边缘区域扩展边界区域以包括用于将元素与其邻居分开的空白区域。它的尺寸是边距框宽度和边距框高度。

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

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

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model