7.1.1. The Containing Block – 包含块
每个元素都有各自的包含块,可以说包含块就是一个元素的布局上下文。CSS2.1定义了一系列判断某一元素包含块的规则,在我们深入学习之前,先对这些知识作一些基本的了解。
通常对于一个西方风格文本流元素而言,其包含块就是上级元素中离它最近的块级元素、表格单元或内联块。以下面的代码为例:
This is a paragraph.
在这个简单的例子中,P元素的包含块就是DIV元素,同样的,DIV的包含块就是body。所以P元素的外观布局受DIV元素的影响,当然与body元素也脱离不了关系。
7.1.2. A Quick Refresher
在这里我们先快速的过一下将要讨论的元素类型,其中也涉及一些我们将会接触的术语:
标准流
在西方语言和传统的HTML文档布局中,文本的阅读方向都是自左到右、自上而下,在非西方语言中这个顺序可能存在例外。绝大部分的元素都是标准流,而让一个元素脱离标准流的唯一方法就是浮动和定位。
非替换元素
指的是某个元素的内容内置于文档中,比如一个段落中的文本,它不像图片一样是以路径的形式出现在文档中。
替换元素
所谓的替换元素指的是其在文档中的内容实质上相当于一个占位符,很多时候我们无法从文档中替换元素本身的内容上想象出其在浏览器中的实际效果。最经典的替换元素就是IMG了,它只是以路径的形式表现插入到HTML文档中的图片。另外,大部分的表单元素也属于替换元素。
块级元素
诸如段落、标题或DIV之类的元素都属于块级元素,这些元素在文档中都独立成行,我们可以通过设置display: block来将一个元素转换为块级。
内联元素
如strong或span都属于内联元素,这类元素在文档中不会独立成行,它们一般是某个块级元素的后代,我们可以通过设置display: inline来将一个元素转换为内联级。
根元素处于文档结构树顶端的元素我们称之为根元素。在HTML中,根元素指的就是html,而在XML文档中,它可以是任何由语言permits的元素。