CSS参考手册
Miscellaneous Level 1
CSS盒子模型介绍 | CSS Box Model: Introduction to the CSS box model
在布局文档时,浏览器的渲染引擎根据标准的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
属性确定,即使边界和填充仍显示在内容周围。
规范
Specification |
Status |
Comment |
---|---|---|
CSS Level 2 (Revision 1) |
Recommendation |
Though more precisely worded, there is no practical change. |
CSS Level 1 |
Recommendation |
Initial definition. |
Miscellaneous Level 1相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。