关于隐藏

显示隐藏的标签有display:none和visibility:hidden，那么他们二者有什么区别呢？

首先我们建立一个100*100的盒子，并写上一些内容，在盒子外建立一个p标签也写上内容。

代码如下

给它加上display:none这个隐藏属性后，结果如下：

可见display:none这个属性能隐藏本身以及子级且不会占据原来的位置。

然后我们来看看visibility:hidden这个属性，还是之前的代码，结果如下：

可见visibility:hidden这个属性在隐藏的同时还占据着原来的位置。

要显示的话只需加display:block即可显示。

关于透明度

关于透明度的属性有opacity和rgba，接下来让我们看看他们二者又有什么不同。

0为隐藏1为显示       0.5为透明度范围在0到1之间

结果如下：

可见opacity把本身和子级全部透明化了。

而rgba仅仅只是把背景半透明化了，子级不透明。

小伙伴们，你们明白了吗？