CSS学习笔记——视觉格式化模型 visual formatting model

CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制。他有一套既定的规则（也就是W3C规范），规定了浏览器该怎么处理每一个盒子。以下内容翻译自W3C官方文档，其中加上了自己的一些理解。相关链接：https://www.w3.org/TR/CSS2/visuren.html#block-boxes。

1、可替换元素（Replaced element）

下面的一段话引自MDN：

典型的可替换元素有 <img>、 <object>、 <video> 和表单元素，如<textarea>、 <input> 。某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。通过 CSS content 属性来插入的对象被称作匿名可替换元素（anonymous replaced elements）。

简单的讲，可替换元素就是在源代码中不能直接看出他的要显示的内容的元素。比如<img>元素要通过src属性告诉浏览器显示什么内容的图片。

2、不可替换元素（non-replaced element）

相对的，不是替换元素的元素就是不可替换元素。

3、块级元素和块盒（block-level elements and block boxes）

块级元素（block-level elements）在源文档中格式化为可见的块。“display”属性值为“block”、“list-item”、“table”的元素是块级元素。

一般情况下一个块级元素产生一个块级盒（block-level box），称为主块级盒（principal block-level box），主块级盒用来包含后代盒（descendant boxes ）以及后代盒中的内容。主块级盒可以参与任何定位方案（positioning scheme）。

Tips：CSS2.1中的positioning scheme：常规流、浮动、绝对定位。

有些块级元素除了产生主块级盒，也可能产生额外的盒（additional boxes），比如display属性值为“list-item”的元素。产生的额外的盒用来包含项目符号（可以用list-style-position属性设置额外的盒是放在主块级盒内还是外）。

主块级盒参与块级格式上下文（Block formatting context）的布局。

除了表格盒（table boxes）和可替换元素盒外，一个块级盒也可以是一个块容器盒（block container box）。块容器盒有两个功能（只能同时具备一种功能）：

1、只用来包含其他块级盒；

2、创建一个行内格式化上下文（inline formatting context），行内格式化上下文只用来包含行内级盒（inline-level boxes）。

display为inline-block的元素不能嵌套block-level element，例子如下：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
 2 <HTML>
 3   <HEAD>
 4     <TITLE>Example of inline flow on several lines</TITLE>
 5     <STYLE type="text/css">
 6     *{
 7       padding:0;
 8       margin:0;
 9     }
10      #inlineblock{
11          background-color: red;
12          display:inline-block;
13         margin:30px;
14      }
15      #block{
16          background-color: blue;
17          display:block;
18           margin:30px;
19      }
20      div{
21          background-color: yellow;
22          width:50px;
23          height:50px;
24      }
25     </STYLE>
26   </HEAD>
27   <BODY>
28      <p id="p1">This value causes an element to generate an <span id="block">inline-level block container</span>. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.This value causes an element <span id="inlineblock">(e.g., LI in HTML)<div></div></span> to generate a principal block box and a marker box. For information about lists and examples of list formatting, please consult the section on lists.The 'position' and 'float' properties determine which of the CSS 2.1 positioning algorithms is used to calculate the position of a box.</p>
29   </BODY>
30 </HTML>

View Code