本文共 965 字，大约阅读时间需要 3 分钟。
1、隐藏元素的方法
- display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
- visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。
- opacity: 0：将元素的透明度设置为 0，来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
- position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏，不会影响布局，能够响应元素绑定的监听事件。
- z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。
- transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
- clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
2、总结
- visibility：影响布局（占据空间），影响交互（不会响应绑定事件）；
- opacity：影响布局（占据空间），不影响交互（会响应绑定事件）；
- display：不影响布局（不占据空间），影响交互；
- position：不影响布局，不影响交互；
3、display:none与visibility:hidden的区别：
1）在渲染树中
display:none 会让元素完全从渲染树中消失，渲染时不会占据任何空间； visibility:hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。
2）是否是继承属性
display:none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；visibility:hidden 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；
3）修改常规文档流中元素的 display 通常会造成文档的重排（不占据空间），但是修改visibility属性只会造成本元素的重绘（占据空间）；
4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。
转载地址：http://iorti.baihongyu.com/