隐藏 div 的 CSS - HTML

在开发中，我们常常需要隐藏或显示某个元素，比如隐藏一个 div 元素。下面是几种实现方法。

1. display: none;

使用 display: none; 可以彻底地隐藏一个元素，该元素将不会在页面上出现。需要注意的是，该元素仍占用在页面布局中。

div {
    display: none;
}

2. visibility: hidden;

使用 visibility: hidden; 也可以隐藏一个元素，但是该元素在页面布局中依然存在，只是看不见而已。

div {
    visibility: hidden;
}

3. opacity: 0;

使用 opacity: 0; 可以将元素隐藏，但是该元素仍然占用在页面布局中，只是看不见而已。与 visibility: hidden; 不同的是，使用 opacity: 0; 的元素可以通过 css 动画来渐变显示/隐藏。

div {
    opacity: 0;
}

4. height、width、padding、margin 均为 0;

将元素的 height、width、padding、margin 均设置为 0，也可以隐藏该元素。

div {
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
}

5. position: absolute; left: -9999px;

将元素的 position 设置为 absolute，并将 left 设置为一个很大的负数，例如 -9999px，这样也可以将元素完全隐藏起来。

div {
    position: absolute;
    left: -9999px;
}

实现隐藏一个元素有多种方法，选择哪种方法根据实际情况而定。以上都是通过 css 实现的方法，但是也可以通过 js 代码动态地隐藏或显示一个元素。