CSS 视觉格式化模型(visual formattingmodel)是用来处理文档并将它显示在视觉媒体上的机制。这是 CSS 的一个核心的概念。 视觉格式化模型根据 CSS 盒模型为文档的每个元素生成 0,1 或多个盒。
每个盒的布局由下列内容组成:
盒尺寸:明确指定,受限或没有指定
盒类型:行内(inline), 行内级别(inline-level), 原子行内级别(atomic inline-level), 块(block)盒;
定位方案(positioning scheme): 常规流,浮动或绝对定位;
树中的其它元素: 它的子代与同代;
视口(viewport) 尺寸与位置;
内含图片的固定尺寸;
其它信息。
当元素的 CSS 属性 display 为 block, list-item 或 table 时,它是块级元素 block-level。块级元素(比如
)视觉上呈现为块,竖直排列。
每个块级元素至少生成一个块级盒,称为主要块级盒(principal block-level box)。主要块级盒将包含后代元素生成的盒以及生成的内容。一些元素,比如
,生成额外的盒来放置项目符号,不过多数元素只生成一个主要块级盒。
块级盒模型是CSS中最重要的一个概念,定义了块级元素如何显示以及如何交互。
网页中的每个元素都可以被看成是一个矩形区域,这个矩形区域由内容(content)、填充(padding)、边框(border)、边界(margin)组成,盒子模型的结构如下图所示:
图中包括蓝色区域在内的整个范围是网页块级元素的大小。内边距是内容和边框之间的空间,内边距包裹内容区域,如果在元素上添加背景,则背景会应用于由内容和内边距共同组成的范围。修改内边距、边框和外边距不会影响内容区域的范围,但是会改变元素整体的大小。
内边距、边框和外边距可以对应于一个元素的上、右、下、左进行分别定义,也可以简单的对四个位置同时定义。外边距可以设置为负值,可以应用在很多种特殊场合。内边距、边框和外边距的设置是可选的,默认值一般为零,但是不同的浏览器的默认值会有所区别,可以在定义页面样式之前首先对元素的margin和padding等进行初始化:
* {
margin: 0;
padding: 0;
}
领取专属 10元无门槛券
私享最新 技术干货