[分享]css中如何隐藏和显示出来

在 CSS 中，有多种方法可以让元素隐藏和显示出来。下面就来介绍一些常用的方法。

/* 隐藏元素 */
display: none;

/* 显示元素 */
display: block/inline/inline-block; 

以上代码中，display 属性用于控制元素的显示方式。其中，none 表示元素被隐藏，而 block/inline/inline-block 等值则表示元素显示为块级元素/行内元素/行内块级元素。

另外，还有一种常用的隐藏元素的方式可以结合 position 和 visibility 属性：

/* 隐藏元素 */
position: absolute;
top: -9999px;
visibility: hidden;

/* 显示元素 */
position: static/relative/absolute;
top: auto;
visibility: visible; 

以上代码中，position 属性设置为 absolute 使元素脱离文档流并可以通过设置 top 的值把它移出屏幕外，同时将其 visibility 属性设置为 hidden 隐藏元素。当需要显示元素时，将 position 属性设为 static、relative 或 absolute，并将 top 和 visibility 属性分别设为它们的默认值即可。

通过以上方法，我们可以在 CSS 中方便快捷地隐藏和显示元素，为网页布局和交互带来更多可能性。