css使用display属性隐藏元素不会占位置。
display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性,被隐藏的元素不占据任何空间。
不仅如此,一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在。
任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过渡动画是无效的,它的任何不同状态值之间的切换总是会立即生效。
不过请注意,通过 DOM 依然可以访问到这个元素。因此你可以通过 DOM 来操作它,就像操作其他的元素。
.hide { display: none; }
示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML中文网</title> <style> h1.hidden {display:none;} </style> </head> <body> <h1>这是一个可见标题</h1> <h1 class="hidden">这是一个隐藏标题</h1> <p>注意, 实例中的隐藏标题不占用空间。</p> </body> </html>
效果图:
以上就是css如何隐藏元素不占位?的详细内容,更多请关注易知道|edz.cc其它相关文章!