CSS中三种显示和隐藏

1.overflow 溢出显示和隐藏，占据原来的空间

div{
    overflow: visible ;
}

div{
    overflow: hidden ;
}

2.display 隐藏不占据空间

div{
    display: block ;
}

div{
    display: none ;
}

3.visibility 隐藏会占据原来的空间

div{
    visibility: visible ;
}

div{
    visibility: hidden ;
}

4.v-show 和 v-if 的区别
v-show 隐藏是 visibility:hidden ;
v-if 隐藏是 display:none ;

5.display : none 和 visibility : hidden 的区别
display:none 是彻底消失，不在文档流中站位，浏览器也不会解析该元素
visibility:hidden 是视觉上消失了，可以理解为透明度为0的效果,在文档流中站位，浏览器会解析该元素。
使用 visibility:hidden 比 display:none 性能上要好，display:none 切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而 visibility 切换是否显示则不会引起回流。