display:none, hidden 你选哪个？
在 CSS 世界中，我们经常需要隐藏元素。而 display: none 和 visibility: hidden 就是两个常用的方法。但它们之间究竟有什么区别？又该如何选择呢？别急，让我们一起深入探讨！
1. 它们是如何隐藏元素的？
想象一下，你有一张桌子，上面放着很多东西。你想把其中一个东西藏起来，你会怎么做？
display: none 就好像把这个东西从桌子上拿走，并把桌子上空出来的空间也一起抹掉了。
visibility: hidden 则好像是用一块布盖住这个东西，虽然你看不见它，但它还在桌子上，占据着原来的空间。
换句话说：
display: none 会将元素完全从文档流中移除，它不再占据任何空间，也不影响布局。
visibility: hidden 会隐藏元素，但它仍然占据着原来的空间，并影响布局。
2. 它们对布局的影响有什么不同？
还是以桌子的例子来说明，如果把一个很大的东西从桌子上拿走，整个桌子的布局都会发生变化。而如果只是用布盖住它，桌子的布局则不会改变。
同样，display: none 会改变元素周围的布局，而 visibility: hidden 不会。
例如：
假设你有一个包含多个元素的容器，其中一个元素使用 display: none 隐藏了，那么容器会自动调整大小，以适应其他可见元素。而使用 visibility: hidden 隐藏元素，容器的大小则不会改变。
3. 它们对性能的影响有什么区别？
display: none 会完全移除元素，因此浏览器不需要渲染它，这对性能有一定提升。而 visibility: hidden 虽然隐藏了元素，但浏览器仍然需要渲染它，因此对性能影响更大。
但
在现代浏览器中，渲染性能的差异已经非常小，一般情况下不用太过担心。
4. 它们在哪些场景下更适合使用？
使用 display: none 的场景：
当需要完全移除元素，并希望它不再影响布局时，例如：
隐藏导航菜单
隐藏错误提示信息
隐藏加载中的动画
使用 visibility: hidden 的场景：
当需要隐藏元素，但希望它仍然保留空间，并继续影响布局时，例如：
隐藏一个重要的元素，但需要它占据原有位置，例如：
隐藏一个图片，但希望保留它原来的位置，以避免其他元素发生位置偏移。
隐藏一个元素，但需要它参与某些事件触发，例如：
隐藏一个按钮，但仍然希望它能够响应点击事件。
5. 它们的使用方法有什么区别？
它们的用法其实非常简单：
css
/ 隐藏元素 /
.hidden-element {
display: none; / 或 visibility: hidden; /
/ 显示元素 /
.hidden-element {
display: block; / 或 visibility: visible; /
| 属性 | 默认值 | 说明 |
|---|---|---|
| display | inline | 用于控制元素的显示方式，可以设置为 none、block、inline、inline-block 等等，其中 none 表示隐藏元素，不再占用任何空间 |
| visibility | visible | 用于控制元素的可见性，可以设置为 hidden、visible，其中 hidden 表示隐藏元素，但仍然占据原来的空间 |
display: none 和 visibility: hidden 都是用来隐藏元素的，但它们的使用场景和性能表现有所不同。
display: none 会完全移除元素，并影响布局。
visibility: hidden 会隐藏元素，但仍然保留空间，不会影响布局。
选择哪一种方法，取决于你的具体需求。
你是否也遇到过关于 display: none 和 visibility: hidden 的惑呢？欢迎在评论区分享你的观点和经验！