碎言博客
·
display:none没有隐藏元素所占空间的原因
💡
原文中文，约1000字，阅读约需3分钟。
📝
内容提要
文章讨论了CSS属性“display: none”和“visibility: hidden”的区别。使用“display: none”可以隐藏元素并不占用空间，而“visibility: hidden”则保留空间。在动态使用JavaScript更改“display”属性时需谨慎，以免影响页面布局。
🎯
关键要点
-
使用CSS的'display: none'属性可以隐藏元素并且不占用空间。
-
使用CSS的'visibility: hidden'属性隐藏元素时，元素仍然会保留其空间。
-
在动态使用JavaScript更改'display'属性时需谨慎，以免影响页面布局。
❓
延伸问答
display: none和visibility: hidden有什么区别？
display: none会完全隐藏元素并不占用空间，而visibility: hidden会隐藏元素但仍保留其空间。
使用display: none时会对页面布局产生什么影响？
使用display: none时，元素会从文档流中移除，不会影响页面布局。
在JavaScript中动态更改display属性时需要注意什么？
动态更改display属性时需谨慎，以免影响页面布局，可能导致元素重新占用空间。
为什么要使用display: none而不是visibility: hidden？
如果希望隐藏元素并且不占用任何空间，应该使用display: none。
display: none会影响哪些类型的元素？
display: none可以应用于任何HTML元素，隐藏后不占用空间。
visibility: hidden会对页面布局造成什么影响？
visibility: hidden会隐藏元素，但仍然保留其在页面布局中的位置和空间。
➡️
