第1章曾簡單地提到,網(wǎng)頁設(shè)計(jì)中可以為屬性display設(shè)置一個(gè)值來影響用戶代理顯示的方式。既然我們已經(jīng)深入地了解了視覺格式化,下面再使用本章的概念復(fù)習(xí)display屬性,并討論它的另外兩個(gè)值,
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)、定位和根元素,計(jì)算值可變(見CSS2.1第9.7節(jié)),否則,根據(jù)指定確定
說明:網(wǎng)站建設(shè)CSS2中還有值compact和marker,不過由于缺乏廣泛的支持,在 網(wǎng)站建設(shè)CSS2.1中已經(jīng)去掉
我們將忽略與表有關(guān)的值,它們將在第11章討論;在此還忽略了值list-item,因?yàn)檫@個(gè)值將在第12章詳細(xì)介紹。我們已經(jīng)花了很大篇幅討論塊元素和行內(nèi)元素,下面介紹inline-block和run-in元素,不過之前先花點(diǎn)時(shí)間介紹改變?cè)仫@示角色將如何改變布局。
設(shè)置一個(gè)文檔的樣式時(shí),如果能改變?cè)氐娘@示角色顯然很方便。例如,假設(shè)一個(gè)div 中有一系列鏈接,你想把這個(gè)div布局為一個(gè)垂直邊欄:
<div id="navigation ">
<a href ="index. html ">WidgetCo Home</a><a href =""products. html ">Products</a>
<a href="services.htm">Services</a><a href ="fun.html">Widgety Fun!</a>
<a href="support.html">Support</a><a href="about.html" id=""current">About Us</a>
<a href="contact.html ">Contact</a>
</div>
可以把所有鏈接都放在表單元格中,或者每個(gè)鏈接都包在其自己的div中,或者還可以讓它們都是塊級(jí)元素,如下:
div#navigation a {display: block;}
這會(huì)讓導(dǎo)航欄div中的每個(gè)a元素都是一個(gè)塊級(jí)元素。如果再增加一些樣式,可以得到圖7-49所示的結(jié)果。
對(duì)于不支持網(wǎng)站建設(shè)CSS的瀏覽器,盡管導(dǎo)航鏈接作為行內(nèi)元素,但網(wǎng)站建設(shè)人員希望瀏覽器能把它們作為塊級(jí)元素?cái)[放,在這些情況下,改變顯示角色就很有用。將鏈接作為塊級(jí)元素,就可以像處理div元素一樣設(shè)置樣式,這有一個(gè)好處,即整個(gè)元素框會(huì)成為鏈接的一部分。因此,如果用戶的鼠標(biāo)指針停留在元素框的某處,他就能點(diǎn)擊這個(gè)鏈接。
你可能還想讓元素作為行內(nèi)元素。假設(shè)有一個(gè)無序的人名列表:
<ul id="rollcall">
<li>Bob c.</li>
<li>Marcio G.</li>
<li>Eric M.</li>
<li>Kat M.</li>
<li>Tristan N.</li>
<li>Arun R.</li>
<li>Doron R.</li>
<li>Susie W.</li>
</ul>
對(duì)于以上標(biāo)記,假設(shè)你想讓這些名字成為一系列行內(nèi)名,其間用豎線間隔(另外在列表的左右兩端也有豎線)。為此,唯一的辦法就是修改其顯示角色,以下規(guī)則將得到如圖7-50所示的效果:
#rollcall li {display: inline; border-right: 1px solid; padding: 0 0.33em;}
#rollcall li:first-child {border-left: 1px solid;}
還可以采用很多其他方法來在設(shè)計(jì)中充分利用display。開動(dòng)腦筋,看看你能有哪些創(chuàng)造!
不過有一點(diǎn)要注意,你改變的只是元素的顯示角色,而不是其本質(zhì)。換句話說,讓一個(gè)段落生成行內(nèi)框并不會(huì)把這個(gè)段落真正變成一個(gè)行內(nèi)元素。例如,在XHTML中,有些元素是塊元素,另外一些是行內(nèi)元素(還有一些是“流”元素,不過暫時(shí)不考慮這些元素),行內(nèi)元素可能是一個(gè)塊元素的后代,但是反過來則不行。因此,盡管鏈接可以放在一個(gè)段落中,但是鏈接卻不能包圍段落,不論如何設(shè)計(jì)元素的樣式,都是如此??紤]以下標(biāo)記:
<a href="http://www.example.net" style="display: block;">
<p style=" display: inline;">this is wrong!</p>
</a>
這個(gè)標(biāo)記將是無效的,因?yàn)閴K元素(p)嵌套在一個(gè)行內(nèi)元素(a)中。改變顯示角色也不會(huì)使以上標(biāo)記變得合法。display之所以得名就是因?yàn)樗绊懙氖窃厝绾物@示,而不影響它是何種元素。