CSS中的视觉格式化模型_html/css_WEB-ITnose

2.3 "display"属性

"display"属性的取值范围是： inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
"display"属性的初始值为"inline"。
一下是每种取值的具体含义：

注意，尽管"display"属性的初始值为"inline"，但是UA的默认样式表可能覆盖这个值。
以下是一些display属性的例子：

p   { display: block }em  { display: inline }li  { display: list-item } img { display: none }      /* 不显示图片 */

3. 定位策略（Positioning schemes）

在css 2.1中，一个盒子将经过定位策略来进行定位：

1. 正常文档流（Normal flow）。 在CSS2.1中，正常文档流包括块级盒子的块格式化上下文，行级盒子的行格式化上下文以及块级盒子和行级盒子的相对定位。
   
2. 浮动（Floats）。 在浮动模型中，一个盒子先根据正常文档流定位，然后被从文档流中拿出来尽可能的放到左/右边。上下文中的其他内容将流动到浮动元素的某一边。
   
3. 绝对定位（Absolute positioning）。 在绝对定位模型中，盒子被从正常文档流中完全移除（被移除的盒子对它原来的兄弟盒子将不再产生任何影响） 并且根据它的包含块进行定位。

如果一个元素是浮动的、绝对定位的或者是根元素（root element），那么就称这个元素脱离了文档流（out-of-flow）。如果一个元素没有脱离文档流，那么就称这个元素在文档流内（in-flow）。一个脱离文档流的元素A，它的文档流包括元素A本身以及所有A的在文档流内的后代元素。

3.1 position 属性

position属性的取值范围是：static | relative | absolute | fixed | inherit, 初始值为static。每个取值的含义如下：

UA可能默认根元素的定位为static定位。

3.2 盒子的偏移： top、right、bottom、left

如果一个元素的position属性值不为static，那么就称这个元素被定位了。被定位的元素将产生被定位的盒子，然后根据如下四个属性进行放置:
top
top属性的取值范围是: 绝对长度值 | 百分比 | auto | inherit， 初始值为auto。
该属性指定一个绝对定位的盒子的外边距上边界（top margin edge）距离这个盒子的包含块的上边界（top edge）的偏移量（距离）。对于采用相对定位的盒子来说，这个偏移量根据盒子本身的上边界计算得出，也就是说，盒子初始采用正常文档流中的位置，然后在那个位置的基础上根据该属性值进行一定的偏移。
right
right属性的取值范围是： 绝对长度值 | 百分比 | auto | inherit ，初始值为auto。
跟top属性一样，该属性指定一个绝对定位的盒子的外边距右边界（right margin edge）距离这个盒子的包含块的右边界（right edge）的偏移量（距离）。对于采用相对定位的盒子来说，这个偏移量根据盒子本身的右边界计算得出。
bottom
botton属性的取值范围是： 绝对长度值 | 百分比 | auto | inherit， 初始值为auto。
跟top属性一样，该属性指定一个绝对定位的盒子的外边距下边界（bottom margin edge）距离这个盒子的包含块的下边界（bottom edge）的偏移量（距离）。对于采用相对定位的盒子来说，这个偏移量根据盒子本身的下边界计算得出。
left
left属性的取值范围是： 绝度长度值 | 百分比 | auto | inherit， 初始值为auto。
跟top属性一样，该属性指定一个绝对定位的盒子的外边距左边界（left margin edge）距离这个盒子的包含块的左边界（left edge）的偏移量（距离）。对于采用相对定位的盒子来说，这个偏移量根据盒子本身的左边界计算得出。

上面这四个属性的具体取值有如下含义：

4. 正常文档流（Normal flow）

在正常文档流中的盒子都属于一个格式化上下文（formatting context）。这个格式化上下文既可以是块级的，也可以是行级的，但不能两者都是。块级盒子在块格式化上下文（block formatting context）中，行级盒子在行格式化上下文（inline formatting context）中。

4.1 块格式化上下文

浮动的元素、采用绝对定位的元素、不是块盒子的块容器（比如inline-block，table-cell和table-caption）以及设置了overflow且值不为visible（设置了visible的viewport除外）的块盒子将会为他们的内容建立新的块格式化上下文。

在块格式化上下文中，各个盒子从他们的包含块的顶部开始，竖直的顺次放置。相邻的两个盒子的竖直距离有margin属性决定。在同一个格式化上下文中的两个相邻的块级盒子的竖直外边距将会合并。

在块格式化上下文中，每个盒子的左外边界与盒子的包含块的左边界相接（对于从右到左的情况，右外边界与右边界相接）。 即使当有浮动元素存在是也依然使用，除非这个盒子产生了新的块格式化上下文（这样的话，由于浮动，盒子的宽度将变小）。

4.2 行格式化上下文

在行格式化上下文中，每个盒子从他们的包含块的顶部开始，依据每个盒子的水平margin，border和padding，水平的依次放置。这些盒子在竖直方向上，可能依据顶部或者底部对其，也可能依据盒子内部文本的基准线对其。包含这些盒子的来形成行的这个长方形区域就叫行盒子（line box）。

一个行盒子总要有足够的高度来包含它的所有后代盒子。因此，它可能比它包含的最高的盒子还要高（比如，行盒子内部的盒子都依据文本基准线对其）。当盒子B的高度比行盒子低的时候，盒子B在行盒子里的对其方式就由vertical-align属性决定。如果多个行级盒子无法在单一的行盒子中水平放置，那么这些盒子将会被分放到二到多个竖直堆叠（vertically-stacked）的行盒子中。因此，一个段落就是一个行盒子的竖堆。堆叠的行盒子之间没有分隔（除非指定），并且从不重叠。

通常，行盒子的左边界与包含块的左边界相接，右边界与包含块的右边界相接。但是，如果有浮动元素存在的话，那浮动元素将会介乎两者之间。因此，尽管在同一个行格式化上下文中的行盒子通常都与包含块同宽，但是他们的宽度也会因为受到浮动元素的影响而有所差异。在同一个行格式化上下文中的行盒子高度各不相同，比如一个行盒子包含一个较高的图片，而另一个仅仅包含文本。

当行级盒子的宽度小于包含他们的行盒子时，他们水平方向的对其方式将由text-align属性决定。如果text-align属性取值为justify，那么UA可能拉伸和盒子中的文字和间距，但是inline-table和inline-block盒子除外。

如果一个行内盒子的宽度超出了行盒子的宽度，那它将被拆断为多个行内盒子，然后放到多个行盒子中。如果行内盒子不能被拆断（比如行内盒子仅包含单个字符，或者定语言单子截断规则不允许截断，或者使用了white-space，且取值为nowrap或pre），那这个行内盒子将会溢出行盒子。
当行内盒子被拆断时，margin、border和padding对拆断处没有任何视觉上的影响。

当在行格式化上下文中需要包含行内级内容时就会创建行盒子。不包含任何文本、任何保留的空白字符、任何拥有非零margin、padding和border的行内元素以及任何其他在流中的内容（例如图片、行内块或行内表格）并且不以保留的换行符结束的行盒子，它将被视作没有高度的行盒子，以此来保证盒子里的任何元素的的位置计算。

如下是行内盒子构建的一个例子。

Several emphasized words appearin this sentence, dear.

P元素产生一个块盒子，包含五个行内盒子，其中三个是匿名盒子：

Several emphasized words appear in this sentence, dear.

Several emphasized words appearin this sentence, dear

Several emphasized  words appear in this sentence, dear.

再看下面的例子：

                  
Several emphasized words appear here.
  

由于P元素宽度的限制，各个盒子可能像如下放置：

4.3 相对定位（Relative positioning）

一旦一个盒子被定位或者浮动，它可以相对于这个位置进行一定的偏移。这就叫做相对定位。偏移的盒子（B1）对紧跟着它的盒子（B2）没有任何影响：B2的位置就像B1没有发生偏移一样。因此，相对定位可能导致盒子重叠（overlap）。但是，如果相对定位导致了"overflow:auto"或者"overflow:scroll"的盒子溢出了，那么UA必须允许用户（通过滚动条等）能够访问到盒子的内容。

一个相对定位的盒子保持原有的正常大小，包括换行和一开始就保有的空间。

对于相对定位的元素来说，left和right将盒子不改变大小的水平移动。left将盒子右移，right将盒子左移。因为left或right的结果都不会导致盒子被分隔或拉伸，所以实际上最终使用的值总是： left=-right。

如果left和right的取值都是auto，那最终生效的值都为0（也就是说盒子呆在原来的位置）。
如果left取值为auto，那么最终使用的值是-right（也就是说盒子最终左移了right的数值）。
如果right取值为auto，那么最终使用的值是-left。
如果left和right都不是auto，那么二者之中必须要忽略一个。如果包含块的direction属性值为ltr，那么使用left，right的值为-left；如果包含块的direction为rtl，那么使用right，left的值为-right。

如下几条规则效果相同:

div.a8 { position: relative; direction: ltr; left: -1em; right: auto }div.a8 { position: relative; direction: ltr; left: auto; right: 1em }div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }

top和bottom属性将盒子不改变大小的上下移动。top将盒子下移，bottom将盒子上移。因为盒子不会被分隔或者拉伸，所有最终使用的值总是：top=-bottom。如果两个都是auto，那么最终使用的值都为0。如果其中之一为auto，那么设为auto的那个属性最终使用的值是另一个的负值。如果都不是auto，那么bottom被忽略（也即是说bottom最终使用的值是-top）。

5.浮动

浮动的盒子会被移动到当前行的左边或者右边。浮动最有趣的特点就是其他内容会在浮动的元素的旁边依次放置（或者通过设置clear属性禁止），或者说其他盒子会流动到浮动盒子的旁边。也就是说，其他盒子将沿着向左浮动的盒子的右边、向右浮动的盒子的左边依次放置。

一个浮动的盒子将会一直向左或向右移动，一直到触碰到包含块的边界或者其他浮动盒子的外边界。如果是行盒子的话，那么浮动盒子的外边界的顶部将与当前行盒子的顶部对其。
如果没有足够的水平空间，那么浮动的盒子将移至下一行直到有足够的空间或者行内已经没有其他浮动元素为止。

因为浮动盒子不在文档流中，所以在浮动盒子前后的未定位的块盒子将像浮动盒子不存在一样的竖直依次放置。但是，浮动盒子所在的当前行以及后面相邻的行盒子都会根据浮动盒子缩短宽度来给浮动盒子留下空间。
如果有个竖直的位置满足如下四个条件: (a)在行盒子的顶部或者顶部之下（b）在行盒子的底部或底部之上（c）在浮动盒子的外边界的顶部或者顶部之下（d）在浮动盒子的外边界的底部或者底部之上，那么行盒子将会换行。也就是说，如果浮动的盒子的外边界高度为0或者为负，那么行盒子不会缩短。

如果缩短的行盒子太短而不能包含任何内容，那么这个行盒子将会换行（并且高度会重新计算）直到有足够的空间或者没有浮动盒子为止。当前行内的任何在浮动盒子之前的盒子都将重新流动到浮动盒子的另一边。换句话说，如果一个行内盒子放在了一个向左浮动盒子的前面，那么，向左浮动的盒子将会放在这一行的开始，与行盒子的顶部对其，之前的行内盒子将会移动到浮动盒子的右边。对于rtl和向右浮动的盒子同理。

table、块级可替换元素或者正常文档流中建立新的块格式化上下文的元素的border盒不能与任何在同一个格式化上下文中的浮动盒子的margin盒重叠。

例如，如下片段中，包含块太窄，不能包含浮动盒子的右边的内容，因此，那段内容就移动到浮动盒子的下方。

p { width: 10em; border: solid aqua; }span { float: left; width: 5em; height: 5em; border: solid blue; }...
     Supercalifragilisticexpialidocious

这个文档片段可能是这样的：

多个浮动的盒子可能彼此相邻，上述模型也同样适用于同一行中的多个相邻浮动盒子。
下面这条规则将所有class="icon"的IMG都浮动到左边：

img.icon {   float: left;  margin-left: 0;}

看如下的html和样式文件：

                  
       Some sample text that has no other...  

IMG盒子浮动到左边，剩余的文档内容被格式化在同一行的浮动元素的右边。浮动盒子右边的行盒子因为浮动盒子的存在而缩短了，但是在浮动盒子的下方又重新恢复了正常的宽度。上面的文档，可能被格式化成下面的样子：

如果文档被修改成下面这样，最终格式化后的效果依然是相同的：

  
Some sample text              that has no other...

因为左边的文本内容被浮动盒子替换并重新流动到了浮动盒子的右边。
因为浮动盒子的margin不与相邻盒子的margin重叠，所以上面例子中P盒子和IMG盒子的竖直margin不重叠。
浮动盒子可以与正常文档流中的其他的盒子发生重叠（例如浮动盒子旁边的盒子有一个负的margin），此时，浮动盒子在未定位的流内块盒子之前，但在流内行内盒子之后。
下面例子说明当浮动盒子与其他元素的边框重叠时发生了什么。

浮动的图片遮盖了与他重叠的盒子的边框。

如下示例说明如何通过clear属性禁止内容流向浮动盒子的一边。
假设如下规则：

p { clear: left }

最终文档可能如下：

5.1 float属性

float属性的取值范围是： left | right | none | inherit，初始值为none。
该属性值决定元素向左移动还是向右移，或者根本不动。float属性可以被应用于任何元素上，除了绝对定位的元素。float属性的取值有如下含义：

如下9条规定了浮动元素的确切行为：

1. 向左浮动的盒子的外左边界不能超过包含块的左边界。同理应用于向右浮动的盒子。
   
2. 对于一个向左浮动的盒子，如果在这个盒子之前还有其他向左浮动的盒子，那么，这个盒子的左外边界不能超过其他任何向左浮动的盒子的右外边界，或者这个盒子的上边界必须比其他盒子的下边界低。同理应用于向右浮动的盒子。
   
3. 任何向左浮动的盒子的右外边界不能超过任何与之相邻的向右浮动的盒子的左外边界。同理应用于向右浮动的盒子。
   
4. 浮动盒子的上外边界不能比包含块的上边界高。当浮动发生在两个合并的margin中时，浮动的盒子根据一个假设的父的空匿名块盒子定位。
   
5. 浮动盒子的上外边界不能比任何其他之前的块盒子或浮动盒子的上外边界高。
   
6. 浮动盒子的上外边界不能比任何之前的行盒子的上边界高。
   
7. 一个向左浮动的盒子，如果在他之前还有向左浮动的盒子，那么这个盒子的右外边界不能超过包含块的有边界，除非这个盒子已经尽可能的向左了。同理应用于向右浮动的盒子。
   
8. 浮动元素要尽可能的往高放置。
   
9. 向左浮动的盒子要尽可能向左，向右浮动的盒子要尽可能向右。但是相对于尽可能向左或向右，更高的位置有更高的优先级。

下面的html片段，b浮动到右边：

ab

如果P元素的宽度足够，那么a和b将各占一边，如下：

5.2 clear属性

clear属性的取值范围是： none | left | right | both | inherit, 初始值为none。只应用于块级元素。

该属性决定元素盒子的哪一边不与浮动盒子相邻。clear属性不考虑被应用元素内部的浮动以及其他块格式化上下文中的浮动。

属性取值含义如下:

所有不是none的值都将引入空隙（clearance）。clearance禁止margin合并，表现得就像元素的上外边距外还有一段空间。
要计算应用了clear属性的元素的clearance，首先需要找到元素上边界的假定位置。这个假定位置就是当clear属性值为none时元素实际上的上边界。
如果假定的元素的上边界不能越过相关的浮动元素（past the relevant floats）,那么就需要引入clearance。

空隙的大小为如下两个值中的较大值：

1. 将元素的上边界与最低的浮动元素的底外边界对齐需要的空间大小。
   
2. 将元素的上边界放置到它假定的位置需要的空间大小。
   注意，空隙的大小可能为负也可能为0.

举个例子1，假设有三个盒子，块B1的bottom margin为M1（B1没有后代，没有padding也没有border），浮动块F的高度为H，块B2的top margin为M2(没有padding，没有border，也没有后代)。B2设置了clear：both。不考虑B2的clear属性，这三个盒子的如下图。B1和B2的margin重叠了。假设B1的底边界为y坐标原点（y=0），F的顶部在y=M1处，B2的上边界在y=max(M1,M2)，F的底部在y=M1+H。

我们还假设B2不在F的下面，也就是说，我们需要引入clearance。因此：
max(M1,M2) < M1 + H
我们需要计算clearance C两次， C1和C2，然后 C=max(C1,C2)。
第一步，将B2的顶部与F的底部对其，也就是说，在y=M1 + H。考虑到margin不再合并，那么：
F的底 = B2的上边界 <=>
M1 + H = M1 + C1 + M2 <=>
C1 = M1 + H -M1 - M2
= H - M2
第二步计算，就是保持B2在原来的位置，y=max(M1,M2),也就是说：
max(M1,M2) = M1 + C2 + M2 <=>
C2 = max(M1, M2) - M1 - M2
按照我们之前的假设max(M1,M2) < M1 + H,所以：
C2 = max(M1,M2) - M1 - M2 < M1 + H - M1 - M2 <=>
C2 < H - M2
因为C1= H - M2，所以
C2 < C1
因此，C= max(C1,C2) = C1。

例2，假设所有元素都没有border和padding,在下面的代码中，clearance是-1em。

  First paragraph.
  Floating paragraph.
  Last paragraph.

解释： 如果没有clear，第一段和最后一段的margin将会合并，并且最后一段的上边界将会与浮动段的顶部对齐。但是clear需要上边界低于浮动元素，也就是说要再低2em。这就意味着必须要引入clearance。因此，margin不再合并，并且 clearance + margin-top = 2em， 也就是说clearance = 2em - margin-top= -1em。

当该属性被应用于浮动元素时，浮动元素的上外边界必须要低于之前的左浮动元素（clear：left）、右浮动元素（clear：right）或者左右浮动元素（clear：both）的底外边界。

6. 绝对定位（Absolute positioning）

在绝对定位模型中，盒子被从正常文档流中完全移除，并只相对于它的包含块进行偏移定位。绝对定位的盒子会为它的正常文档流后代盒子以及非fixed的绝对定位后代盒子建立一个包含块。绝对定位的盒子可能会遮盖其他元素，具体取决于堆叠层次。

6.1 固定布局（Fixed positioning）

固定布局是绝对布局的一个子类，唯一的不同在于固定布局的盒子的包含块由视口（viewport）产生。
我们通常通过fixed布局来创建页面的框架，比如：

上图的效果可以通过如下代码采用fixed布局实现：

                  
 ...  
    
 ...  
    
 ...  
    
 ...  
  

7. display、position和float的关系

这三个属性都影响盒子的产生以及定位，他们关系如下：

1. 如果display的值为none，那么position和float不起作用。在这种情况下，元素不产生盒子。
   
2. 否则，如果position的值为absolute或者fixed，那么盒子就使用绝对定位，float的最终使用的值为none，display的取值依据如下表格来定。盒子的显示位置根据top、right、bottom和left属性决定。
   
3. 否则，如果float的取值不会none，那么盒子将会浮动，display的取值参照下表。
   
4. 否则，如果元素是根元素，那么display的取值参照下表。
   
5. 否则，display的取值就是指定的值。
   
   
   
   
   
   

   指定的值	最终使用的值
   inline-table	table
   inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
   其他	与指定的值相同

8. 正常文档流、浮动和绝对定位的比较

为了说明正常文档流、相对定位、浮动和绝对定位的不同，我们通过几个例子来说明，这些例子都是基于下面这段代码：

              
Beginning of body contents.       Start of outer contents.       Inner contents.      End of outer contents.      End of body contents.    
  

我们给上面的文档应用如下样式:

body { display: block; font-size:12px; line-height: 200%;        width: 400px; height: 400px }p    { display: block }span { display: inline }

在每个例子的说明中，左侧的数字表示正常文档流的位置。

8.1 正常文档流

我们增加如下样式：

#outer { color: red }#inner { color: blue }

P元素包含所有的行内容：匿名行内文本与两个SPAN元素。因此，所有的内容都在一个行格式化上下文中布局，他们都在P元素建立的包含块之中，效果如下：

8.2 相对定位

我们添加如下样式：

#outer { position: relative; top: -12px; color: red }#inner { position: relative; top: 12px; color: blue }

outer元素之前的文本正常流动，然后包含outer文本的行内盒子整体上移了12px。作为outer的子元素，inner也要上移12px，但是包含inner元素内容的盒子还需要根据自己的位置再下移12px，回到他们原来的位置。效果如下：

注意，outer元素后面的文本并没有受影响。

8.3 浮动

我们给inner元素添加如下样式，使之向右浮动：

#outer { color: red }#inner { float: right; width: 130px; color: blue }

inner盒子之前的文本正常流动，inner盒子被从正常文档流中拿出并浮动到右边（已经为inner指定的宽度）。浮动盒子左边的行盒子宽度减少。

再看clear属性的作用，我们给文档添加一个sibling元素：

              
Beginning of body contents.       Start of outer contents.       Inner contents.       Sibling contents.      End of outer contents.      End of body contents.    
  

添加如下样式：

#inner { float: right; width: 130px; color: blue }#sibling { color: red }

让inner盒子浮动到右边，同时文档中剩余的文本流入空出来的区域。 效果如下：

但是，如果给silibling元素应用clear:right，那么sibling元素内容将会流动到float元素的下面。

#inner { float: right; width: 130px; color: blue }#sibling { clear: right; color: red }

8.4 绝对定位

最后，我们再看绝对定位：

#outer {     position: absolute;     top: 200px; left: 200px;     width: 200px;     color: red;}#inner { color: blue }

上面的样式将会使得outer盒子根据他的包含块来定位。一个已经定位的盒子的包含块由离它最近的已经定位的祖先盒子建立，如果这样的祖先盒子不存在的话，那么就是用初始包含块（initial containing block）。所以，outer盒子的上边距离包含块的顶部200px，左边距离包含块左边200px。outer的子元素在outer内部正常流动。效果如下：

下面的这个例子展示的父元素采用相对定位的绝对定位的盒子。尽管作为父元素outer盒子实际上并没有偏移，但是，设置了position:relative就意味着这个盒子可以作为它的已定位的后代盒子的包含块。因为outer盒子是一个行内盒子并且分散在多行内，所以第一个行内盒子的上边缘和左边缘（图中粗虚线标出）作为top和left的参考。

#outer {   position: relative;   color: red }#inner {   position: absolute;   top: 200px; left: -100px;   height: 130px; width: 130px;   color: blue;}

效果如下：

如果不给outer盒子设置position属性：

#outer { color: red }#inner {  position: absolute;   top: 200px; left: -100px;   height: 130px; width: 130px;   color: blue;}

那么，inner盒子的包含块就变成了初始包含块。效果如下：

其他具体内容请参考http://www.w3.org/TR/CSS2/visuren.html