**当想实现一个区域或者内容的消失(隐藏)**,我们有多种代码可以实现。但是根据要求和用户体验,应该选择最合适的方法实现。
代码中最常用的代码包括:display:none; visibility:hidden opacity:0; 其中还有一种被程序员们忽略的rgba();通过改变颜色的透明度,也可以改变内容的字体颜色透明度。一般最难区分的是前三者。
1、display:none;
从字面意思上理解为没有展示的内容。
实现代码后,元素内容会直接消失;我们可以在检查器中查看。
h1已经不占据实际尺寸,并且我们在浏览器器无法点击到。因此,能总结出,display:none;会让元素不占据实际尺寸并且无法点击。
2、visibility:hidden;
我们从英文上的直译上会发现他们的意思都是一样的,我们用代码来验证两者是否有区别。
在检查器中,我们能观察到content区域有实际的宽高尺寸,当然在浏览器中肯定是不显示的,我们还会发现之前的内容区域也无法点击。 因此,它会隐藏内容,内容依然会占据实际的宽高尺寸,但是无法进行点击。
3、opacity:0;
opacity是不透明的意思,在css中我们通常用来作为透明度,取值是0~1;当取值为1时,内容完全显示;取值为0时,内容消失。我们先通过代码进行实现。
我们会发现他和visibility:hidden;在检查器中都会占用实际尺寸。我们将鼠标放在内容区域上,光标形状会发生改变。说明内容依然展示在页面上。因此,opacity:0;会隐藏内容,并且占据实际宽高尺寸。
通过代码对以上进行验证:
display:none; 不会占据实际尺寸并且无法点击隐藏内容;
visibility:hidden; 会占据实际尺寸但无法点击隐藏内容;
opacity:0; 会占据实际尺寸并且能够点击到隐藏的内容。
我只是通过简单代码进行验证,你们也可以通过加入其他标签来验证会更好理解。。。。。。。