最浅显易懂的 CSS 之隐藏 - 13本文已参与「新人创作礼」活动，一起开启掘金创作之路。 css 隐藏元素的三种常见

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

css 隐藏元素的三种常见方法

1. display：none

这是最常见的也是使用最多的一种隐藏元素方式。他的可选值有很多，下面列举一些常用的属性值

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示，表格前后带有换行符。

<div></div>

div {
   width:200px;
   height:200px;
   background-color: #2d8cf0;
 }

在加上display：none试试，元素就会被隐藏了。

其实visibility: hidden和display：none非常相似，有一点不同的是，display：none隐藏不占据空间，而visibility: hidden隐藏会占据空间.visibility: hidden的可选直有

visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

opacity是设置一个div元素的透明度级别：opacity：1为不透明；opacity：0为完全透明；opacity：0.5 为半透明

值	描述
value	指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit	Opacity属性的值应该从父元素继承

这种常见于过度动画中使用，从不透明到完全透明间的转换。

<div>希望疫情早点结束，大家脱下口罩，希望这一天早点到来。</div>

div{
    background-color:red;
    opacity:0.5;
}

div{
    background-color:red;
    opacity:0;
}

元素隐藏了。

上面三种隐藏元素的方法，最常用的就是 display：none。