display屬性指定由元素生成的框的類型,通常用到display對(duì)應(yīng)值有block、none、inline這三個(gè)值。
CSS規(guī)范定義了所有元素的默認(rèn)顯示值，例如 <div>元素呈現(xiàn)為塊，而<span>元素以嵌入式顯示。
覆蓋元素的默認(rèn)顯示值是display屬性的一個(gè)重要含義。例如，將一個(gè)內(nèi)聯(lián)級(jí)元素更改為一個(gè)塊級(jí)元素，或者將一個(gè)塊級(jí)元素更改為一個(gè)內(nèi)聯(lián)級(jí)元素。
注意： CSS display屬性是所有CSS中最強(qiáng)大和有用的屬性之一。這對(duì)于創(chuàng)建外觀不同但仍遵循Web標(biāo)準(zhǔn)的網(wǎng)頁非常有用。
以下部分描述了最常用的CSS顯示值。
display屬性的block值強(qiáng)制元素的行為類似于塊級(jí)元素，例如<div>或<p>元素。以下示例中的樣式規(guī)則將<span>和 <a>元素顯示為塊級(jí)元素：
span {
display: block;
}
a {
display: block;
}測(cè)試看看?/?注意：更改元素的顯示類型僅會(huì)更改元素的顯示行為，而不是元素的類型。例如，不允許將內(nèi)聯(lián)元素設(shè)置為display: block;，使其內(nèi)部嵌套有塊元素。
display屬性的inline值使元素的行為就像是inline-level元素一樣，例如<span>或<a>元素。以下示例中的樣式規(guī)則將<p>和 <li>元素顯示為內(nèi)聯(lián)級(jí)元素：
p {
display: inline;
}
ul li {
display: inline;
}測(cè)試看看?/?display屬性的inline-block值使元素生成一個(gè)方框框，該方框框?qū)⑴c周圍的內(nèi)容一起流動(dòng)，即與相鄰內(nèi)容在同一行中。以下樣式規(guī)則將<div>and <span>元素顯示為內(nèi)聯(lián)塊：
div {
display: inline-block;
}
span {
display: inline-block;
}測(cè)試看看?/?display屬性值為none時(shí)，使元素根本不生成任何框,并且在頁面上不顯示。子元素也不會(huì)生成任何框，即使它們的顯示屬性設(shè)置為非。呈現(xiàn)的文檔好像該元素在文檔樹中不存在。
h1 {
display: none;
}
p {
display: none;
}測(cè)試看看?/?注：display屬性值為none的不會(huì)創(chuàng)建一個(gè)無形的盒子-它不產(chǎn)生任何框。也不為被隱藏的對(duì)象保留其物理空間，即該對(duì)象在頁面上徹底消失，通俗來說就是看不見也摸不到。請(qǐng)參閱“ 可見性與顯示”部分中給出的實(shí)時(shí)演示。