理解HTML与CSS元素-优快云博客

元素

元素
- 替换元素
- 非替换元素
元素显示角色
- 块级元素
- 行内元素

元素

元素是文档结构的基础。在HTML中，最常用的元素很容易识别，如p、table、span、a和div。文档中每个元素都对文档的表现起一定作用。在CSS中，至少在CSS2.1中，意味着每个元素生成一个框（box，也称为盒）其中包含元素的内容。

替换元素

替换元素（replaced element）是指用来替换元素内容的部分并非并非由文档内容直接表示。在XHTML中，我们最熟悉的替换元素例子就是img元素，它由为文档本身之外的一个图像文件来替换、实际上，img没有具体的内容，通过以下的简单例子可以了解这一点：

<img src="howdy.gif"/>

这个标记片段不包含任何具体内容，只有一个元素名和一个属性。除非将其指向一个外部内容（在这里，就是由src属性指定的一个图像），否则这个元素没有任何意义。input元素与之类似，取决于input元素的类型，要由一个单选钮、复选框或文本输入框替换。替换元素显示时也生成框。

非替换元素

大多数HTML和XHTML元素都是非替换元素（nonreplaced element）。这意味着，其内容由用户代理（通常是一个浏览器）在元素本身生成的框中显示。例如:hi there

<span>hi there</span>//就是一个非替换元素，文本"hi there"将由用户代理显示。

段落、标题、表单元格、列表和XHTML中的几乎所有元素都是非替换元素。

元素显示角色

除了替换和非替换元素，CSS2.1还使用另外两种基本元素类型：块级（block-level）元素和行内（inline-level）元素。

块级元素

块级元素生成一个元素框，（默认地）它会填充其父元素的内容区，旁边不能有其他元素。换句话说，它在元素框之前和之后生成了”分隔符“。我们最熟悉的HTML块元素是p和div。替换元素可以是块级元素，不过通常都不是。
列表项是块级元素的一个特例。除了表现方式与其他块元素一致，列表项还会生成一个标记符——无序列表中通常是一个圆点，有序列表中则是一个数字——这个标记符会”关联“到元素框。除了这个标记符外，列表项在所有其他方面都与其他块元素相同。

引用文本

行内元素

行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素。这些元素不会再它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。注意，尽管“块”和“行内”这两个词与XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套在行内元素中）。但是在css中，对于显示角色如何嵌套不存在任何限制。
要了解这是如何工作的，下面来考虑一个CSS属性：display。
display有很多值，其中只有3个值在前面提到过：block、inline、list-item。

display
值：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit
初始值：inline
应用于：所有元素
继承性：无
计算值：对于浮动元素，定位元素和根元素可变；否则为指定值

目前，我们只关心block和inline。考虑以下标记：

<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p>
</body>

This is a paragraph with an inline element within it.

这里有两个块元素（body和p）和一个行内元素（em）。按照XHTML规范，em可以继承p，但是反过来不行。一般地，XHTML层次结构要求：行内元素可以继承块元素，而反之不允许。与此不同，CSS没有这种限制。仍然是上述标记，不过可以改变两个元素的显示角色，如下:

p{display:inline;}
em{display:block;}

这会使得元素在一个行内框生成一个块框。这是完全合法的，不违反任何规范。唯一的问题是，如果试图如下反转元素的嵌套关系：

<em><p>This is a paragraph improperly enclosed by an inline element.</p></em>

This is a paragraph improperly enclosed by an inlin element.

不论通过CSS对显示角色做了什么改变，在XHTML中这都是不合法的。
对于XHTML文档来说，尽管改变元素的显示角色可能很有用，不过对xml文档的意义则更为重大。xml文档不太可能有固有显示角色，所以要有创作人员来定义。例如，你可能想知道如何摆放以下xml片段：

<book>
<maintitle>Cascading Style Sheets:The Definitive Guide</maintitle>
subtitle>Second Edition</subtitle>
<author>Eric A,Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>2004</pubdate>
<isbn>blahblahblah</isbn>
</book>
<book>
<maintitle>CSS2 Pocket Reference</maintitle>
<author>Eric A,Meyer</author>
<publisher>O'Reilly and Associates</publisher>
<pubdate>2004</pubdate>
<isbn>blahblahblah</isbn>
</book>

由于display的默认值是inline，默认地其内容会显示为行内文本，但这种显示用处不大。