CSS隐藏元素的多种方式

CSS中隐藏元素有多种方式，主要区别在于元素隐藏后是否占据空间以及是否会对文档流产生影响。

1. display: none

完全隐藏元素，不占据任何空间。

.demo {
    display: none;
}

2. visibility: hidden

隐藏元素，但仍占据空间。

.demo {
    visibility: hidden;
}

3. opacity: 0

使元素完全透明，但仍会占据空间。

.demo {
    opacity: 0;
}

4. position: absolute; 和 left: -9999px

将元素定位到屏幕之外，隐藏元素但仍占据空间。

.demo {
    position: absolute;
    left: -9999px;
}