css隐藏页面元素的几种方法

一说起隐藏HTML页面上的元素，很多人第一反应就是设置元素的css属性display:none;值，这是一种最常见的隐藏页面元素方法。本篇文章我们就一起看看使用CSS隐藏页面元素的方法，以及它们的区别。

CSS技巧-隐藏页面元素的几种方法比较

display:none
最简单也最粗暴的方法就是设置元素的display属性为none;
也是最常见的一种之一
他会使元素脱离文档流不占据原有的空间
其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。

当我们把元素隐藏后需要他显示的时候可以给他一个伪类当鼠标以上给他设置样式是display：block

visibility: hidden
设置元素的visibility属性为hidden。
这是第二种 该元素不脱离文档流，仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。如果希望元素隐藏后不会引起页面布局的变化，则推荐使用visibility:hidden;方式。

当我们把元素隐藏后需要他显示的时候可以给他一个伪类当鼠标以上给他设置样式是visibility:visible

opacity:0
设置元素透明度opacity属性为0，也可以隐藏页面元素。
在呈现上与visibility:hidden;方式一样，同样会占据页面空间。不脱离文档流

当我们把元素隐藏后需要他显示的时候可以给他一个伪类设置元素透明度opacity属性为1