【CSS_Tips】两种隐藏元素方式的比较

【CSS_Tips】两种隐藏元素方式的比较

visibility: hidden;

div1设置visibility: hidden;,效果如下:
【CSS_Tips】两种隐藏元素方式的比较
可见,div1并未脱离文档流

display:none;

div1设置display:none;,效果如下:
【CSS_Tips】两种隐藏元素方式的比较
脱离了文档流

比较总结

display:none;更适合制作选项卡之类的页面样式.。
例如:将div1设置为display:block;,将div2div3设置为display:none;,通过js控制三者的display的值在特定情况下转变实现相应效果(如点击上方tab栏)