CSS中有三种不同的隐藏方法:display: none、visibility: hidden、opacity: 0。它们的区别如下:<style> // display:
CSS中有三种不同的隐藏方法:display: none、visibility: hidden、opacity: 0。它们的区别如下:
<style> // display: none .hide1 { display: none; } // visibility: hidden .hide2 { visibility: hidden; } // opacity: 0 .hide3 { opacity: 0; } </style> <p>首先,display: none会完全从文档流中移除元素,它不占据任何空间,同时它所包含的内容也不会渲染。相比较而言,visibility: hidden会隐藏元素但不会改变页面的布局,它仍然占据原来的空间,且它所包含的内容也会渲染(比如可以复制隐藏的元素的文字。)。最后,opacity: 0会使元素透明,但是它仍然占据空间,且它所包含的内容也会渲染。相较而言,opacity: 0虽然让元素透明, 但是鼠标事件仍然可以作用于它,因此有时可能需要将元素的pointer-events属性设置为none来禁用它的交互。</p>
粉丝
0
关注
0
收藏
0