display:none 与 visibility:hidden 的区别?
元素
隐藏和显示
最常用的为 display:none 和 visibility:hidden
dispaly:none
设置该属性后,该元素下的元素都会隐藏,占据的空间消失visibility:hidden
设置该元素后,元素虽然不可见了,但是依然占据空间的位置
区别:
1.visibility 具有继承性,其子元素也会继承此属性,若设置 visibility:visible,
则子元 素会显示
2.visibility 不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着。
3.在 CSS3 的 transition 中支持 visibility 属性,但是不支持 display,因为
transition 可以延迟执行,因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以
提高用户体验
4.display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘
标签:none,元素,显示,visibility,display,hidden,隐藏,css From: https://www.cnblogs.com/liu-com/p/17012623.html