看上去值名inline-block是一個(gè)混合產(chǎn)物,實(shí)際上也確實(shí)如此,行內(nèi)塊元素(inline-block element)確實(shí)是塊級(jí)元素和行內(nèi)元素的混合,這個(gè)display值是網(wǎng)站建設(shè)CSS2.1中新增的。
行內(nèi)塊元素作為一個(gè)行內(nèi)框與其他元素和內(nèi)容相關(guān)。換句話(huà)說(shuō),它就像圖像一樣放在一個(gè)文本行中,實(shí)際上,行內(nèi)塊元素會(huì)作為替換元素放在行中。這說(shuō)明,網(wǎng)頁(yè)設(shè)計(jì)中行內(nèi)塊元素的底端默認(rèn)地位于文本行的基線(xiàn)上,而且內(nèi)部沒(méi)有行分隔符。
在行內(nèi)塊元素內(nèi)部,會(huì)像塊級(jí)元素一樣設(shè)置內(nèi)容的格式。就像所有塊級(jí)或行內(nèi)替換元素一樣,行內(nèi)塊元素也有屬性width和height,如果比周?chē)鷥?nèi)容高,這些屬性會(huì)使行高增加。
下面來(lái)考慮一些示例標(biāo)記,它們能更清楚地說(shuō)明這一點(diǎn):
<div id="one">
This text is the content of a block-level level element. Within this
block-level element is another block-level element.<p>Look, it's a
block-level paragraph.</p> Here's the rest of the DIV, which is still block-level.
</div>
<div id="two">
This text is the content of a block-level level element. Within this
block-level element is an inline element.<p>Look, it's an inline
paragraph.</p> Here's the rest of the DIV, which is still block-level.
</div>
<div id="three">
This text is the content of a block-level level element. Within this
block-level element is an inline-block element.<p>Look, it's an inline block
paragraph.</p> Here's the rest of the DIV, which is still block-level.
</div>
對(duì)以上標(biāo)記,應(yīng)用下面的規(guī)則:
div {margin: 1em 0; border: 1px solid;}
p {border: 1px dotted;}
div#one p {display: block; width: 6em; text-align: center;}
div#two p {display: inline; width: 6em; text-align: center;}
div#three p {display: inline-block: width: 6em; text-align: center;}
注意,在第二個(gè)div中,行內(nèi)段落格式化為正常的行內(nèi)內(nèi)容,這說(shuō)明width和text- align被忽略了(它們不能應(yīng)用于行內(nèi)元素)。不過(guò),對(duì)于第三個(gè)div元素,作為行內(nèi)塊元素的段落則有這兩個(gè)屬性,因?yàn)樗鳛橐粋€(gè)塊級(jí)元素被格式化,這個(gè)段落還要求文本行更高一些,因?yàn)樗鼤?huì)影響行高,就好像這是一個(gè)替換元素一樣。
網(wǎng)頁(yè)設(shè)計(jì)中如果行內(nèi)塊元素的width未定義,或者顯式聲明為auto,元素框會(huì)收縮以適應(yīng)內(nèi)容。也就是說(shuō),元素框的寬度剛好足夠包含該內(nèi)容,而沒(méi)有多余的空間。行內(nèi)框也會(huì)這樣做,不過(guò)行內(nèi)框可能會(huì)跨多個(gè)文本行,而行內(nèi)塊元素不能。因此,以下規(guī)則應(yīng)用到前面的示例標(biāo)記時(shí):
div#three p {display: inline-block; height: 2em;}
會(huì)創(chuàng)建一個(gè)較高的框,它的寬度剛好能包含內(nèi)容,如圖7-52所示。
有時(shí)行內(nèi)塊元素很有用,例如,如果有5個(gè)超鏈接,網(wǎng)站建設(shè)人員希望它們?cè)谝粋€(gè)工具條中寬度相等。為了讓它們分別占其父元素寬度的20%,但是仍保持其為行內(nèi)元素,可以聲明如下:
#navbar a {display: inline-block; width: 20%;}
當(dāng)前文章標(biāo)題:網(wǎng)頁(yè)設(shè)計(jì)中的行內(nèi)塊元素
當(dāng)前URL:http://m.iy5y368.cn/news/wzzz/Inline-blocks..html