display
从这个世界消失了, 不存在了。
display: none; 隐藏元素
display: block; 显示元素
visibility
视觉和物理上都隐身了, 看不见也摸不到, 但是存在的。
visibility:hidden; 隐藏元素
visibility: visible; 显示元素
opacity
视觉上隐身了, 看不见, 可以触摸得到。
opacity: 0; 透明度为0, 在文档流中占位, 浏览器会解析
性能比较
opacity: 0;、visibility:hidden; > display:none;
display切换显示时，页面产生回流。
visibility、opacity切换显隐时则不会引起回流。
回流: 当页面中的部分元素需要改变规模尺寸、布局、显示隐藏等，页面会重新构建渲染。所有页面第一次加载时需要产生一次回流。
是否占据空间
display: none;浏览器不渲染 display 属性为 none 的元素，不占据空间。
visibility:hidden;元素被隐藏，但是会被渲染不会消失，占据空间。
opacity: 0;透明度为0，元素隐藏，占据空间。
动画效果
transition对于display、visibility是无效的。
transition对于opacity是有效的。
事件绑定
display: none;元素在页面已经不存在了，所以在它上面绑定的事件无法触发。
visibility: hidden;元素虽然占据一定空间，但是在它上面绑定的事件是无法触发。
opacity: 0;元素上面绑定的事件是可以触发。
子元素继承
display: none;不会被子元素继承。给子元素设置display: block;也不会显示。
opacity: 0;会被子元素继承。给子元素设置opacity: 1;也不会显示。
visibility: hidden;会被子元素继承。但给子元素设置visible让子元素显示出来。
v-if、v-show
初始值为
false时,v-if不会编译,v-show会编译。
v-if的显隐切换则是通过动态的向DOM树内添加或者删除DOM元素。
v-show只编译一次，通过控制display来控制显隐，始终可以在DOM中获取对应标签。
v-if适用于首次渲染、不需要频繁切换元素显示和隐藏的情况。
v-show适用于需要频繁切换元素显示和隐藏的场景。
总结
| 比较 | display:none | opacity:0 | visibility:hidden |
|---|---|---|---|
| 占据空间 | 否 | 是 | 是 |
| 回流与渲染 | 是 | 否 | 否 |
| 子代继承性 | 不继承 | 继承 | 继承 |
| 子代反继承 | 否 | 否 | 能 |
| transition效果 | 无效 | 有效 | 有效 |
| 绑定的事件 | 不响应 | 能响应 | 不响应 |
附录
CSS 隐藏页面上的一个元素有哪几种方法？
display:none、visibility:hidden、opacity:0这三种。- 设置
fixed并设置足够大负距离的left、top使其“隐藏”。 - 用层叠关系
z-index把元素叠在最底下使其“隐藏”。 - 用
text-indent:-9999px使其文字隐藏。 - 通过使用 绝对定位 、足够的margin值将元素移除可视区域内。
- 设置
height、font-size、line-height值为0，让元素在视觉上不可见。 - 通过
transform:scale(0,0)来将元素缩放为0。元素仍在页面中占据位置，但是不会响应绑定的监听事件。 - 通过
clip/clip-path元素裁剪实现隐藏。元素仍在页面中占据位置，但是不会响应绑定的监听事件。
