dispaly:none和visibility:hidden的区别

1.占据空间与否：
display:none：该元素不占据任何空间，即该对象在页面上彻底消失，跟v-if类似，通俗来说就是看不见也摸不到。
visibility:hidden：使对象在网页上不可见，跟v-show类似，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
2.是否继承
display:none，display不是继承属性，元素及其子元素都会消失。
visibility:hidden，visibility是继承属性，若子元素使用了visibility:visible，则不继承，这个子孙元素又会显现出来。
3.是否被读取器读取
读屏器不会读取display：none的元素内容，而会读取visibility：hidden的元素内容。
4.是否渲染
display:none：会触发reflow（回流），进行渲染。
visibility:hidden：只会触发repaint（重绘），因为没有发现位置变化，不进行渲染。