CSS 元素消失
在CSS中，可以设置一个元素从页面中消失（对HTML代码没有影响，影响的只是页面外观），这也是网页设计中常用的小技巧。
display属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于HTML,如果使用display不谨慎，可能会违反HTML中已经定义的显示层次结构。对于XML,由于XML没有内置的这种层次结构，所以display是绝对必要的。 display属性的值可以是以下几种：
© none: 此元素不会被显示。
© block：此元素将显示为块级元素，元素前后会带有换行符。
© inline：默认，此元素会被显示为内联元素，元素前后没有换行符。
© inline-block：行内块元素（CSS2.1新增的值）。
© list-item：此元素会作为列表显示。
© run-in：此元素会根据上下文作为块级元素或内联元素显示。
© table：此元素会作为块级表格来显示（类似<table>)，表格前后带有换行符。
© inline-table：此元素会作为内联表格来显示（类似<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：此元素会作为一个表格标题显示（类似<caption>)。
© inherit：规定应该从父元素继承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>
从代码运行结果中可以看出，对第二个div进行display: none操作之后，元素会隐藏，同时元素原来所占的位置也被第三个div取代了。所以display: none其实是把元素彻底从页面中删除了。再次强调：影响的是页面的外观显示，而不是HTML代码。
湘公网安备:43011102000856号 
点击加载更多评论>>