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