厦门网站建设工程,本地电脑做视频网站 外网连接,海口公司网站建设,互联网项目有哪些当对一个文档进行布局#xff08;lay out#xff09;的时候#xff0c;浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型#xff08;CSS basic box model#xff09;#xff0c;将所有元素表示为一个个矩形的盒子#xff08;box#xff09;。CSS 决定这些盒子的大小…当对一个文档进行布局lay out的时候浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型CSS basic box model将所有元素表示为一个个矩形的盒子box。CSS 决定这些盒子的大小、位置以及属性例如颜色、背景、边框尺寸…。
每个盒子由四个部分或称区域组成其效用由它们各自的边界Edge所定义原文defined by their respective edges可能意指容纳、包含、限制等。如图与盒子的四个组成区域相对应每个盒子有四个边界内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。 内容区域 content area 由内容边界限制容纳着元素的“真实”内容例如文本、图像或是一个视频播放器。它的尺寸为内容宽度或称 content-box 宽度和内容高度或称 content-box 高度。它通常含有一个背景颜色默认颜色为透明或背景图像。
如果 box-sizing 为 content-box默认则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height和 max-height 控制。
内边距区域 padding area 由内边距边界限制扩展自内容区域负责延伸内容区域的背景填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。
内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left和简写属性 padding 控制。
边框区域 border area 由边框边界限制扩展自内边距区域是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。
边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height和 max-height 属性控制。假如框盒上设有背景background-color 或 background-image背景将会一直延伸至边框的外沿默认为在边框下层延伸边框会盖在背景上。此默认表现可通过 CSS 属性 background-clip 来改变。
外边距区域 margin area 由外边距边界限制用空白区域扩展边框区域以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。
外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left和简写属性 margin 控制。在发生外边距合并的情况下由于盒之间共享外边距外边距不容易弄清楚。
最后请注意除可替换元素外对于行内元素来说尽管内容周围存在内边距与边框但其占用空间每一行文字的高度则由 line-height 属性决定即使边框和内边距仍会显示在内容周围。
参见
布局与包含块CSS 层叠介绍层叠和继承
规范
规范状态注释CSS Basic Box ModelWorking Draft CSS Level 2 (Revision 1)RecommendationThough more precisely worded, there is no practical change. 尽管有了更详尽的描述但没有实际上的变化。CSS Level 1RecommendationInitial definition. 最初的定义。
参见
CSS Key Concepts: CSS 语法, 规则, 注释, 优先级和继承, the 盒模型, 布局模式和视觉格式化模型以及外边距合并或者初始、计算、解析、指定、使用和实际值。 Definitions of 值语法、简写属性和可替换元素。
