块级元素生成一个元素框，（默认地）它会填充其父元素的内容区，旁边不能有其他元素。换句话说，它在元素框之前和之后生成了“分隔符”。我们最熟悉的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
值
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
应用于：
所有元素
继承性：
无
计算值:
对于浮动元素、定位元素和根元素可变（参见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>
<pubdate>2004</pubdate>
<isbn>blahblahblah</isbn>
</book>
<book>
<maintitle>CSS2 Pocket Reference</raaintitle>
<author>Eric A. Meyer</author>
<publisher>0'Reilly and Associates</publisher>
<pubdate>2004</pubdate>
<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>
<link rel="stylesheet" type="text/css" href ="sheet1.css" media="all"/>
<style type="text/css">@import url(sheet2.css);
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>