網(wǎng)站制作中的塊級(jí)元素和行內(nèi)元素是什么

  • 2018-07-26 08:38:56
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.iy5y368.cn

塊級(jí)元素

塊級(jí)元素生成一個(gè)元素框,(默認(rèn)地)它會(huì)填充其父元素的內(nèi)容區(qū),旁邊不能有其他元素。換句話說,它在元素框之前和之后生成了“分隔符”。我們最熟悉的HTML塊元素是p和div。替換元素可以是塊級(jí)元素,不過通常都不是。

列表項(xiàng)是塊級(jí)元素的一個(gè)特例。除了表現(xiàn)方式與其他塊元素一致,列表項(xiàng)還會(huì)生成一個(gè)標(biāo)記符——無序列表中這通常是一個(gè)圓點(diǎn),有序列表中則是一個(gè)數(shù)字——這個(gè)標(biāo)記符會(huì)“關(guān)聯(lián)”到元素框。除了這個(gè)標(biāo)記符外,列表項(xiàng)在所有其他方面都與其他塊元素相同。

行內(nèi)元素

行內(nèi)元素在一個(gè)文本行內(nèi)生成元素框,而不會(huì)打斷這行文本。行內(nèi)元素最好的例子就是XHTML中的a元素。strong和em也屬于行內(nèi)元素。這些元素不會(huì)在它本身之前或之后生成“分隔符”,所以可以出現(xiàn)在另一個(gè)元素的內(nèi)容中,而不會(huì)破壞其顯示。

注意,盡管“塊”和“行內(nèi)”這兩個(gè)詞與XHTML中的塊級(jí)和行內(nèi)元素有很多共同點(diǎn),但也存在一個(gè)重要的差別。在HTML和XHTML中,塊級(jí)元素不能繼承自行內(nèi)元素(即不能嵌套在行內(nèi)元素中)。但是在CSS中,對(duì)于顯示角色如何嵌套不存在任何限制。

要了解這是如何工作的,下面來考慮一個(gè)CSS屬性:display。

你可能已經(jīng)注意到,display有很多值,其中只有3個(gè)值在前面提到過:block、inline和list-item。

塊級(jí)元素和行內(nèi)元素

<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)用于:

所有元素

繼承性:

計(jì)算值:

對(duì)于浮動(dòng)元素、定位元素和根元素可變(參見CSS2.1第9.7節(jié))。否則為指定值

這里有兩個(gè)塊元素(body和p)和一個(gè)行內(nèi)元素(em)。按照XHTML規(guī)范,em可以繼承P,但是反過來不行。一般地,XHTML層次結(jié)構(gòu)要求:行內(nèi)元素可以繼承塊元素,而反之不允許。

與此不同,CSS沒有這種限制。仍然是上述標(biāo)記,不過可以改變兩個(gè)元素的顯示角色,如下:

p {display: inline;}

em {display: block;}

這會(huì)使得元素在一個(gè)行內(nèi)框中生成一個(gè)塊框。這是完全合法的,不違反任何規(guī)范。唯一的問題是,如果試圖如下反轉(zhuǎn)元素的嵌套關(guān)系:

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

不論通過CSS對(duì)顯示角色做了什么改變,在XHTML中這都是不合法的。

對(duì)于XHTML文檔來說,盡管改變?cè)氐娘@示角色可能很有用,不過對(duì)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的默認(rèn)值是inline,默認(rèn)地其內(nèi)容會(huì)顯示為行內(nèi)文本。這種顯示用處不大。

可以用display來定義基本布局:

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

publisher,pubdate{display:inline;}

現(xiàn)在將7個(gè)元素中的5個(gè)設(shè)置為塊元素,另外兩個(gè)設(shè)置為行內(nèi)元素。這意味著,每個(gè)塊元素都會(huì)像XHTML中的div元素一樣處理,而兩個(gè)行內(nèi)元素的處理方式將類似于span。

HTML和XHTML網(wǎng)頁(yè)文檔有一個(gè)固有結(jié)構(gòu),這里需要重申這一點(diǎn)。事實(shí)上,正是這一點(diǎn)導(dǎo)致了以前網(wǎng)頁(yè)所存在的部分問題:我們之中太多的人已經(jīng)忘記網(wǎng)頁(yè)文檔要有一個(gè)內(nèi)部結(jié)構(gòu),而且這與其視覺結(jié)構(gòu)完全是兩碼事。我們可能急于創(chuàng)建最酷的頁(yè)面,可能會(huì)以各種方式擺放頁(yè)面的內(nèi)容,而通常忽略了一點(diǎn):頁(yè)面應(yīng)當(dāng)包含有某種結(jié)構(gòu)含義的信息。

這種結(jié)構(gòu)正是XHTML和CSS之間關(guān)系中的一個(gè)固有部分,如果沒有這種結(jié)構(gòu),就根本不會(huì)有任何關(guān)系。為了更好地理解這一點(diǎn),下面來看一個(gè)XHTML文檔的例子,后面將逐一介紹這個(gè)文檔中的各個(gè)部分:

<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>


當(dāng)前文章標(biāo)題:網(wǎng)站制作中的塊級(jí)元素和行內(nèi)元素是什么

當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/what-block-level-inline-level.html

上一篇:網(wǎng)站制作簡(jiǎn)史

下一篇:css在網(wǎng)頁(yè)設(shè)計(jì)中的引入

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))