css不可见

CSS不仅能够让网页变得美观，还可以实现很多有趣的交互效果。然而在CSS中，有一些样式是看不见的，但也是非常重要的。本文将探讨CSS中不可见的样式及其应用。

一、display:none

display:none是CSS中最常见的不可见样式之一。它可以让元素彻底消失，不占据任何空间。具体来说，当使用display:none的时候，元素不仅不会被渲染，也不会占据任何空间，因此在页面中也看不到它的任何痕迹。

这个样式经常用于控制网页的可见性。比如，在网页中有一些功能需要在特定的条件下才能显示，这时就可以通过JS控制元素的display属性，使其在满足特定条件时显示，不满足时隐藏。

二、visibility:hidden

visibility:hidden与display:none有些相似，它们都可以让一个元素不可见。然而，visibility:hidden与display:none的区别在于：visibility:hidden的元素虽然不可见，但仍然占据空间，所以页面上会有一个看不见但是存在的元素占据了对应的位置。

这个样式有时候会用于控制与CSS动画相关的效果。比如，在实现一个淡入淡出的动画时，延迟加载一些元素，可以先使用visibility:hidden将其隐藏起来，等到需要显示时再将其visibility属性改为visible，这样就能实现动画效果。

三、opacity:0

opacity:0是另外一种不可见的样式。它可以让元素变成完全透明，不占据空间，但是仍然存在。和display:none以及visibility:hidden不同，这个样式会让元素变成透明，但是仍然保留了它的大小和位置信息。

这个样式在实现一些动画效果时非常常见。比如，实现一个从不透明到透明的淡出效果，就可以先将元素的opacity属性设为1，然后通过JS动态改变它的opacity值，从1变为0，进而实现淡出效果。

四、height:0;width:0

height:0;width:0是CSS中一种不可见但是非常有用的样式。它可以让元素变成一种看不见、无声无息的存在。和上面介绍的样式不同，这个样式并不仅仅是让元素变得不可见，而是连元素所占据的空间也被完全抹掉了。

这个样式在实现一些特定效果时非常有用。比如，在实现一些指示器或者小图标的时候，可以先定义一个空的