网站制作中的块级元素和行内元素是什么-盈岚科技

网站制作中的块级元素和行内元素是什么

2018-07-26 08:38:56
阅读次数：次
作者：盈岚科技小编
来源：http://www.lyjtt.cn

块级元素

块级元素生成一个元素框，（默认地）它会填充其父元素的内容区，旁边不能有其他元素。换句话说，它在元素框之前和之后生成了“分隔符”。我们最熟悉的HTML块元素是p和div。替换元素可以是块级元素，不过通常都不是。

列表项是块级元素的一个特例。除了表现方式与其他块元素一致，列表项还会生成一个标记符——无序列表中这通常是一个圆点，有序列表中则是一个数字——这个标记符会“关联”到元素框。除了这个标记符外，列表项在所有其他方面都与其他块元素相同。

行内元素

行内元素在一个文本行内生成元素框，而不会打断这行文本。行内元素最好的例子就是XHTML中的a元素。strong和em也属于行内元素。这些元素不会在它本身之前或之后生成“分隔符”，所以可以出现在另一个元素的内容中，而不会破坏其显示。

注意，尽管“块”和“行内”这两个词与XHTML中的块级和行内元素有很多共同点，但也存在一个重要的差别。在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套在行内元素中）。但是在CSS中，对于显示角色如何嵌套不存在任何限制。

要了解这是如何工作的，下面来考虑一个CSS属性：display。

你可能已经注意到，display有很多值，其中只有3个值在前面提到过：block、inline和list-item。

块级元素和行内元素

<body>

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

</body>

display

值

初始值：

inline

应用于：

所有元素

继承性：

无

计算值:

对于浮动元素、定位元素和根元素可变（参见CSS2.1第9.7节）。否则为指定值

这里有两个块元素（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>

不论通过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>

<isbn>blahblahblah</isbn>

</book>

<book>

<maintitle>CSS2 Pocket Reference</raaintitle>

<author>Eric A. Meyer</author>

<publisher>0'Reilly and Associates</publisher>

<isbn>blahblahblah</isbn>

</book>

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

可以用display来定义基本布局：

book,maintitle,subtitle,author,isbn{display:block;}

publisher,pubdate{display:inline;}

现在将7个元素中的5个设置为块元素，另外两个设置为行内元素。这意味着，每个块元素都会像XHTML中的div元素一样处理，而两个行内元素的处理方式将类似于span。

HTML和XHTML网页文档有一个固有结构，这里需要重申这一点。事实上，正是这一点导致了以前网页所存在的部分问题：我们之中太多的人已经忘记网页文档要有一个内部结构，而且这与其视觉结构完全是两码事。我们可能急于创建最酷的页面，可能会以各种方式摆放页面的内容，而通常忽略了一点：页面应当包含有某种结构含义的信息。

这种结构正是XHTML和CSS之间关系中的一个固有部分，如果没有这种结构，就根本不会有任何关系。为了更好地理解这一点，下面来看一个XHTML文档的例子，后面将逐一介绍这个文档中的各个部分：

<html>

<head>

<title>Eric's World of Waffles</title>

h1 {color: maroon;}

body {background: yellow;}

/* These are my styles! Yay! */

</style>

</head>

<body>

<h1>Waffles!</h1>

<p styles="color:gray;">The most wonderful of all breakfast foods is the waffle—a ridged and cratered slab of home-cooked, fluffy goodness that makes every ch1ld's heart soar with joy. And they're so easy to make! Just a simple waffle-maker and some batter, and you're ready for a morning of. aromatic ecstasy!

</P>

</body>

</html>