CSS 元素隐藏
CSS 元素隐藏是一种使用 CSS 样式来隐藏不需要的元素的方法。这可以使用 display：none，visbility：hidden 和 opacity：0 等 CSS 属性来实现。
方法一：
display：none：元素不显示出来，并且也不占据位置，不占据任何空间 (和不存在一样);方法二：
visibility：hidden：元素不显示出来，但是会占据元素应该占据的空间;- 设置为 hidden, 虽然元素不可见，但是会占据元素应该占据的空间;
- 其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为
visibility: visible，则该子元素依然可见。 - 默认为 visible, 元素是可见的;
方法三：
opacity：0：元素不显示出来，但是会占据元素应该占据的空间;- 设置为 0, 元素不可见，但是会占据元素应该占据的空间;
- 其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为
opacity: 1，则该子元素依然可见。 - 默认为 1, 元素是可见的;
方法四：
rgba(0,0,0,0)：rgba 的 a 设置的是 alpha 值，可以设置透明度，不影响子元素;
- HTML
- CSS
<div class="css-hide-an-element-demo">
<div class="normal">
<p>这里是段落一</p>
<p>这里是段落二</p>
<div>
<p>这里是子 div 里的段落</p>
</div>
</div>
<div class="hide">
<span class="keyword">display: none;</span>
<p>这里是段落一</p>
<p>这里是段落二</p>
<div>
<p>这里是子 div 里的段落</p>
</div>
</div>
<div class="visibility">
<span class="keyword">visibility: hiddle;</span>
<p>这里是段落一</p>
<p>这里是段落二</p>
<div>
<p>这里是子 div 里的段落</p>
</div>
</div>
<div class="alpha">
<span class="keyword">background-color: rgba(0, 0, 0, 0);</span>
<p>这里是段落一</p>
<p>这里是段落二</p>
<div>
<p>这里是子 div 里的段落</p>
</div>
</div>
<div class="opacity">
<span class="keyword">opacity: 0;</span>
<p>这里是段落一</p>
<p>这里是段落二</p>
<div>
<p>这里是子 div 里的段落</p>
</div>
</div>
</div>
.css-hide-an-element-demo {
width: 800px;
background-color: #d7e9b9;
color: #007;
font-size: 16px;
font-weight: bold;
}
.css-hide-an-element-demo > div > span.keyword {
background-color: #89c4e1;
color: #007;
}
.css-hide-an-element-demo > div {
margin: 10px;
padding: 10px;
width: 200px;
border: thin solid #007;
border-radius: 5px;
display: inline-block;
}
/* 元素不显示出来，并且也不占据位置，不占据任何空间 (和不存在一样) */
.css-hide-an-element-demo > div.hide > p:nth-child(2) {
display: none;
}
/* 元素不显示出来，但是占据位置，占据空间 */
.css-hide-an-element-demo > div.visibility > p:nth-child(2) {
visibility: hidden;
}
/* 元素不显示出来，但是占据位置，占据空间 */
.css-hide-an-element-demo > div.alpha > p:nth-child(2) {
background-color: rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
}
/* 元素不显示出来，但是占据位置，占据空间 */
.css-hide-an-element-demo > div.opacity > p:nth-child(2) {
opacity: 0;
}
http://localhost:3000/18-css-hide-an-element.html