CSS 元素消失
在CSS中，可以設(shè)置一個(gè)元素從頁(yè)面中消失（對(duì)HTML代碼沒(méi)有影響，影響的只是頁(yè)面外觀），這也是網(wǎng)頁(yè)設(shè)計(jì)中常用的小技巧。
display屬性規(guī)定元素應(yīng)該生成的框的類型。這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型。對(duì)于HTML,如果使用display不謹(jǐn)慎，可能會(huì)違反HTML中已經(jīng)定義的顯示層次結(jié)構(gòu)。對(duì)于XML,由于XML沒(méi)有內(nèi)置的這種層次結(jié)構(gòu)，所以display是絕對(duì)必要的。 display屬性的值可以是以下幾種：
? none: 此元素不會(huì)被顯示。
? block：此元素將顯示為塊級(jí)元素，元素前后會(huì)帶有換行符。
? inline：默認(rèn)，此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。
? inline-block：行內(nèi)塊元素（CSS2.1新增的值）。
? list-item：此元素會(huì)作為列表顯示。
? run-in：此元素會(huì)根據(jù)上下文作為塊級(jí)元素或內(nèi)聯(lián)元素顯示。
? table：此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似<table>)，表格前后帶有換行符。
? inline-table：此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似<table>)，表格則后沒(méi)有換行符。
? table-row-group: 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似<tbody>)。
? table-header-group: 此元素會(huì)作為一個(gè)或多個(gè)行的分組來(lái)顯示（類似<thead>)。
? table-footer-group: 此元素會(huì)作為_(kāi)個(gè)或多個(gè)行的分組來(lái)顯示（類似<tfoot>)。
? table-row：此元素會(huì)作為一個(gè)表格行顯示（類似<tr>)。
? table-column-group: 此元素會(huì)作為一個(gè)或多個(gè)列的分組來(lái)顯示（類似<colgroup>)。
? table-column：此元素會(huì)作為一個(gè)單元格列顯示（類似<col>)。
? table-cell：此元素會(huì)作為一個(gè)表格單元格顯示（類似<td>和<th>)。
? table-caption：此元素會(huì)作為一個(gè)表格標(biāo)題顯示（類似<caption>)。
? inherit：規(guī)定應(yīng)該從父元素繼承display屬性的值。
這里只對(duì)元素消失的知識(shí)點(diǎn)進(jìn)行講解，不對(duì)此屬性的其他用法進(jìn)行探討。
【例題】讓元素消失
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
border:2px red solid;
background:
}
.d1{background: pink;}
.d2{
background: lightblue;
display: none;
}
.d3{background: yellowgreen;}
</style>
</head>
<body>
<div></div>
<div class="d2 hidden"></div>
<div></div>
</body>
</html>
從代碼運(yùn)行結(jié)果中可以看出，對(duì)第二個(gè)div進(jìn)行display: none操作之后，元素會(huì)隱藏，同時(shí)元素原來(lái)所占的位置也被第三個(gè)div取代了。所以display: none其實(shí)是把元素徹底從頁(yè)面中刪除了。再次強(qiáng)調(diào)：影響的是頁(yè)面的外觀顯示，而不是HTML代碼。
湘公網(wǎng)安備:43011102000856號(hào) 
點(diǎn)擊加載更多評(píng)論>>