CSS代码编写中视觉格式化模型的学习教程

2020-05-07 06:40:17易采站长站整理

(1)表格内容模型(table content model)可以创建一个表格包装盒(table wrapper box)及表格盒(table box), 也可以创建特殊盒,比如标题盒(caption boxes)。
(2)多列内容模型(multi-column content model)可以在容器盒与内容之间创建列盒(column boxes)。
(3)实验性的栅格,弹性盒内容模型也创建新的盒类型。
(4)定位方案(Positioning schemes)EDIT

一旦盒生成了, CSS 引擎要指定它们的位置。会用到下列之一的方案:

(1)常规流(normal flow)盒一个接一个排列。
(2)浮动(floats)方案将盒从常规流里提出来,放在当前盒的旁边。
(3)绝对定位(absolute positioning)中的盒坐标是绝对的。绝对定位元素可以盖住使用其它定位方案的元素。

常规流(Normal flow)

在常规流中,盒一个接着一个排列。在块级格式化上下文里面, 它们竖着排列;在行内格式化上下文里面, 它们横着排列。 当 position 为 static 或 relative,并且 float 为 none 时会触发常规流。

(1)在块级格式化上下文里面,常规流竖着排列。
(2)行内格式化上下文里面,常规流横着排列。

常规流分为两种情况:
(1)对于静态定位(static positioning),position 值 为 static ,盒的位置是常规流布局里的位置。
(2)对于相对定位(relative positioning),position 值 为 relative, 盒偏移位置由这些属性定义 top, bottom, left and right 。即使有偏移,仍然保留原有的位置,其它常规流不能占用这个位置。

浮动(Floats)
对于浮动定位方案(float positioning scheme), 盒称为浮动盒(floating boxes)。它位于当前行的开头或末尾。这导致常规流环绕在它的周边,除非设置 clear 属性。

要使用浮动定位方案,元素 CSS 属性 position 为 static 或 relative,然后  float 不为 none 。如果 float 设为 left, 浮动由行盒的开头开始定位。如果设为 right, 浮动定位在行盒的末尾。

绝对定位(Absolute positioning)

对于绝对定位方案, 盒从常规流中被移除,不影响常规流的布局。 它的定位相对于它的包含块,相关CSS属性: top, bottom, left 及 right 。

如果元素的属性position为 absolute 或 fixed, 它是绝对定位元素。

固定定位元素(fixed positioned element)也是绝对定位元素,它的包含块是视口。当页面滚动时它固定在屏幕上,因为视口没有移动。