两种方法控制CSS中的div显示/隐藏

CSS中的display和visibility属性可以用来隐藏和显示HTML元素。尽管它们看起来相似，但很多人仍然容易搞混。下面将分别介绍它们的属性和用法。

方法一：使用display属性

当使用display:none时，一个HTML元素将被隐藏，并且在浏览器中不占据任何空间。如果该元素后面有其他元素，它们将会上移填补隐藏元素所占的空间（类似于将100块钱从桌子上拿走放到抽屉里，桌子上的其他物品会占据原先放钱的位置）。当使用display:block时，已经隐藏的HTML元素会重新显示出来，如果其他元素占据了该空间，它们将下移以腾出位置（类似于将100块钱重新从抽屉里拿出来放回桌子上）。

方法二：使用visibility属性

当使用visibility:hidden时，一个HTML元素将被隐藏，但是它仍然占据着相应的空间（类似于将100块钱藏在桌布下面，钱还在那里占据空间）。当使用visibility:visible时，隐藏的元素将重新显示出来（类似于拿掉桌布，看到了100块钱）。

示例代码演示

下面是一个使用JavaScript和CSS的示例代码，展示了如何通过按钮点击事件来控制div元素的显示和隐藏。

```html

```

图示

以下是未进行任何改变的原始图示，用于更好地理解这两种方法的效果。

（图片略）

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。