1. display: none
-
设置该属性后,该元素和它所有的后代元素都会被隐藏。
-
无法使用屏幕阅读器等辅助设备访问
-
占据的空间消失
<div> <p>A没有设置display:none</p> <p style="display: none;">B设置display:none</p> <p>C没有设置display:none</p> </div>
效果图
2. visibility:hidden
-
隐藏元素仍需占用与未隐藏时一样的空间,任然会影响页面布局
<div> <p>A没有设置visibility: hidden</p> <p style="visibility: hidden;">B设置visibility: hidden</p> <p>C没有设置visibility: hidden</p> </div>
效果图
3. opacity: 0
跟visibility:hidden
一样,隐藏元素仍需占用与未隐藏时一样的空间,任然会影响页面布局。opacity
设置了元素的透明度
<div>
<p>A没有设置opacity: 0;样式</p>
<p style="opacity: 0;">B设置opacity: 0;样式</p>
<p>C没有设置opacity: 0;样式</p>
</div>
效果图
4. 区别
-
display: none
会产生回流和重绘,visibility:hidden;
和opacity:0;
只会引起页面重绘 -
visibility
具有继承性,给父元素设置visibility:hidden;
,子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible
,则子元素又会显示出来。这个和display: none有着质的区别 -
opacity
也有继承性,但是父元素隐藏后,给子元素设opacity:1;
,子元素也不会显示 -
opacity:0;
隐藏后的元素可以点击- 效果图
- 效果图
-
visibility: hidden和opacity:0不会影响计数器的计数。visibility: hidden虽然让一个元素不见了,但是其计数器仍在运行。这和display: none完全不一样
<body> <div> <strong>给元素设置visibility:hidden样式</strong> <ol> <li>元素1</li> <li style="visibility:hidden;">元素2</li> <li>元素3</li> <li>元素4</li> </ol> </div> <div> <strong>给元素设置display:none样式</strong> <ol> <li>元素1</li> <li style="display:none;">元素2</li> <li>元素3</li> <li>元素4</li> </ol> </div> </body>
- CSS3的
transition
支持visibility
属性,但是并不支持display
,由于transition可以延迟执行,因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。