display:none与visibility:hidden的区别?

162 阅读1分钟

相同点:都是用来控制元素隐藏和显示的

不同点:

1.dispaly:none设置该属性后,该元素下的元素都会隐藏,占据的空间消失
2.visibility:hidden设置该元素后,元素虽然不可见了,但是依然占据空间的位置
3.visibility具有继承性,其子元素也会继承此属性,若设置visibility:visible,则子元素会显示
4.visibility 不会影响计数器的计算,虽然隐藏掉了,但是计数器依然继续运行着
5.display:none会引起回流和重绘visibility:hidden会引起重绘