塊級元素生成一個元素框，（默認地）它會填充其父元素的內(nèi)容區(qū)，旁邊不能有其他元素。換句話說，它在元素框之前和之后生成了“分隔符”。我們最熟悉的HTML塊元素是p和div。替換元素可以是塊級元素，不過通常都不是。
列表項是塊級元素的一個特例。除了表現(xiàn)方式與其他塊元素一致，列表項還會生成一個標記符——無序列表中這通常是一個圓點，有序列表中則是一個數(shù)字——這個標記符會“關(guān)聯(lián)”到元素框。除了這個標記符外，列表項在所有其他方面都與其他塊元素相同。
行內(nèi)元素在一個文本行內(nèi)生成元素框，而不會打斷這行文本。行內(nèi)元素最好的例子就是XHTML中的a元素。strong和em也屬于行內(nèi)元素。這些元素不會在它本身之前或之后生成“分隔符”，所以可以出現(xiàn)在另一個元素的內(nèi)容中，而不會破壞其顯示。
注意，盡管“塊”和“行內(nèi)”這兩個詞與XHTML中的塊級和行內(nèi)元素有很多共同點，但也存在一個重要的差別。在HTML和XHTML中，塊級元素不能繼承自行內(nèi)元素（即不能嵌套在行內(nèi)元素中）。但是在CSS中，對于顯示角色如何嵌套不存在任何限制。
要了解這是如何工作的，下面來考慮一個CSS屬性：display。
你可能已經(jīng)注意到，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
應(yīng)用于：
所有元素
繼承性：
無
計算值:
對于浮動元素、定位元素和根元素可變（參見CSS2.1第9.7節(jié)）。否則為指定值
這里有兩個塊元素（body和p）和一個行內(nèi)元素（em）。按照XHTML規(guī)范，em可以繼承P，但是反過來不行。一般地，XHTML層次結(jié)構(gòu)要求：行內(nèi)元素可以繼承塊元素，而反之不允許。
與此不同，CSS沒有這種限制。仍然是上述標記，不過可以改變兩個元素的顯示角色，如下：
p {display: inline;}
em {display: block;}
這會使得元素在一個行內(nèi)框中生成一個塊框。這是完全合法的，不違反任何規(guī)范。唯一的問題是，如果試圖如下反轉(zhuǎn)元素的嵌套關(guān)系：
<em><p>This is a paragraph improperly enclosed by an inline element.</p></em>
不論通過CSS對顯示角色做了什么改變，在XHTML中這都是不合法的。
對于XHTML文檔來說，盡管改變元素的顯示角色可能很有用，不過對XML文檔的意義則更為重大。XML文檔不太可能有固有顯示角色，所以要由創(chuàng)作人員來定義。例如，你可能想知道如何擺放以下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，默認地其內(nèi)容會顯示為行內(nèi)文本。這種顯示用處不大。
可以用display來定義基本布局：
book,maintitle,subtitle,author,isbn{display:block;}
publisher,pubdate{display:inline;}
現(xiàn)在將7個元素中的5個設(shè)置為塊元素，另外兩個設(shè)置為行內(nèi)元素。這意味著，每個塊元素都會像XHTML中的div元素一樣處理，而兩個行內(nèi)元素的處理方式將類似于span。
HTML和XHTML網(wǎng)頁文檔有一個固有結(jié)構(gòu)，這里需要重申這一點。事實上，正是這一點導(dǎo)致了以前網(wǎng)頁所存在的部分問題：我們之中太多的人已經(jīng)忘記網(wǎng)頁文檔要有一個內(nèi)部結(jié)構(gòu)，而且這與其視覺結(jié)構(gòu)完全是兩碼事。我們可能急于創(chuàng)建最酷的頁面，可能會以各種方式擺放頁面的內(nèi)容，而通常忽略了一點：頁面應(yīng)當包含有某種結(jié)構(gòu)含義的信息。
這種結(jié)構(gòu)正是XHTML和CSS之間關(guān)系中的一個固有部分，如果沒有這種結(jié)構(gòu)，就根本不會有任何關(guān)系。為了更好地理解這一點，下面來看一個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>
當前文章標題：網(wǎng)站制作中的塊級元素和行內(nèi)元素是什么
當前URL：http://linjicha.cn/news/wzzz/what-block-level-inline-level.html
上一篇：網(wǎng)站制作簡史
