隐藏元素的方法有很多，能想到的就有一大摞，像display、opacity、visibility、height、position这些属性都可以达到隐藏元素的效果，但并不是光光把元素隐藏看不见就完事儿了，还得考虑应用场景。整理了几个隐藏元素的方法，以及它们有什么区别，可用于什么样的场景。
这里主要介绍的方法有：
- display:none;
- height:0;
- opacity:0;
- visibility:hidden;
- HTML全局属性hidden
像position:absolute;left:-9999px;这样的用法也可以隐藏元素，但我想不到它可以应用的场景，就不讲了。
隐藏元素
在隐藏元素之前长这样,后面会将div2隐藏，div2隐藏的后代设置测试株连性（div2隐藏后，div2的后代是否还有可见的机会）
display:none;
为什么display:none;可以隐藏元素，看官方文档的解释：
display属性：指定建立布局时元素生成的显示框类型
The display property specifies the type of box used for an element.
display:none;
This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the ‘display’ property on the descendants.
Please note that a display of ‘none’ does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.
这段关于有display:none;的元素的解释有以下几点：
1、该元素不会生成box，不占据空间，直接从格式化结构中移除了
2、该元素的后代元素也不会生成box，即使给后代元素设置display属性为非none值也没有用
3、注意display:none;不是生成一个不可见的box,它根本就没有生成box
4、css提供了可以让元素生成一个不可见box的机制，visibility属性就可以实现这个机制
所以display:none;让元素不可见的原因是因为根本就没有生成box,这个元素从格式化结构中移除了
下面设置了div2 display:none; div2的后代 display:block; 但都是不可见的，不占据空间，当然也不会响应交互,div2的后代无法改变不可见状态
jquery中的hide()、show()、toggle()都是通过控制display:none实现的，使用display:none来隐藏元素会是页面重绘和回流
visibility:hidden;
visibility属性：控制由该元素生成的box是否被渲染
The ‘visibility’ property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the ‘display’ property to ‘none’ to suppress box generation altogether)
visibility:hidden;
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have ‘visibility: visible’.
这段的解释是：
1、生成的box是完全不可见的，完全透明，没有绘制，但不影响布局，仍然占据空间。
2、然而这个元素的后代是可以通过设置visibility:visible变成可见的
下面这个就是设置了div2 visibility:hidden; div2的后代设置了 visibility:visible; 并且给div2设置了:hover{visibility:visible; }
可见visibility:hidden;使元素隐藏了，但还是占据空间的,把光标放到div2占据的空白处试试看，没有反应说明隐藏后不会响应交互(将光标放在div2的后代上是可以响应交互的)，div2的后代可以设置visibility:visible;改变不可见状态
height:0;
其实width:0;max-height:0;max-width:0;都可以使元素不可见，一般都用height:0;
使用height:0;隐藏元素，不占据空间，也不会响应交互
下面设置了div2 height:0;div2的后代 height: 50px;div2的后代可以设置height为非0值改变不可见状态
opacity:0;
opacity设置元素的透明度，当透明度为0时就看不见了，但仍然占据空间。
把光标放在div1原本的位置（div2上方的空白处）试试看，opacity:0;是可以响应交互的。div2的后代无法改变不可见状态
HTML全局属性hidden
这里隐藏了div1，用HTML全局属性hidden隐藏元素不占据空间,div2的后代无法改变不可见状态
各种方法比较
看过每种方法隐藏元素之后的现象，可以从这几个方面来比较，在选择使用哪种方法时也可以参考这几个方面
- 是否占据空间
- 是否响应交互
- 是否触发回流与渲染
- 是否有株连性
| 隐藏方法 | 是否占据空间 | 是否响应交互 | 是否触发回流 | 是否触发重绘 | 是否有株连性 |
|---|---|---|---|---|---|
| display:none; | 否 | 否 | 是 | 是 | 是 |
| visibility:hidden; | 是 | 否 | 否 | 是 | 否 |
| height:0; | 否 | 否 | 是 | 是 | 否 |
| opacity:0; | 是 | 是 | 否 | 是 | 是 |
| HTML属性hidden | 否 | 否 | 是 | 是 | 是 |