display:none、visibility:hidden,opacity:0三者区别

1. display:none

  • 设置display:none,让这个元素消失

  • 消失不占据原本任何位置

  • 连带子元素一起消失

  • 元素显示:display:block

 

2. visibility:hidden

  • 元素消失,只是视觉消失,在页面中实际存在,对布局依然起作用

  • 元素显示:visibility:visible

 

3. opacity:0

  • opacity值为0代表透明度为0

  • 元素完全透明,视觉上消失,页面实际存在,依然对布局起作用

  • 0-1之间代表透明度,值为1则元素完全显示

上一篇:XML基础


下一篇:只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!