【CSS】隐藏元素总结

本文旨在加深对css隐藏元素方法的理解，资料均来源于网络，文章结尾附有参考连接。

1、CSS中隐藏元素的经常使用方法有如下几种：

1. {display: none; //不占据空间，没法点击}
2. {visibility: hidden; //占据空间，没法点击}
3. {height: 0; overflow: hidden; //不占据空间，没法点击}
4. {opacity:0; filter:alpha(opacity=0); //占据空间，能够点击}

2、display：none和visibility：hidden的区别

主要有如下三点：

• 空间占据

• reflow和repaint

• 株连性

1. 空间占据

display：none 隐藏的元素不占据任何空间
visibility：hidden 隐藏的元素占据空间

注意 无论用何种方式，HTML里的元素都在打开网页时一并加载，可是表现的时候用 CSS 来控制你是否能看获得。

2. reflow和repaint

`display:none` 会引发`reflow`和`repaint`
    `visibility:hidden` 不会引起`reflow`，可是会引发`repaint`，引起的`repaint`较小

注关于repaint与reflow会另外总结

3. 株连性

株连性：若是祖先元素遭殃了，其子孙元素也无一例免的都将遭殃。

display：none 若是祖先元素设置了该样式，该元素及其子孙元素都将隐藏，而且没有其它让其子孙元素恢复显示的办法。
visibility：hidden 若是祖先元素设置了该样式，该元素及其子孙元素都将隐藏，可是给其子孙元素设置 visibility：visible样式，仍然可让该子孙元素恢复显示。

3、visibility失效的妙用

利用visibility的非株连性让父元素隐藏，而子元素显示

场景分析：
要让父标签的圆角、投影、背景等什么的都隐掉，只留里面的文本框。该怎么实现？若是是要display:none，则里面的文本框框也会被一并抹杀掉的，若是是要脚本控制style，须要修改太多的样式。毋庸置疑，这里使用visibility控制是最高效也是最巧妙的方法。

4、height：0和overflow：hidden组合

overflow:溢出隐藏，也就是说盒子之外的元素都会隐藏掉。
可是，这里有例外的状况，先来看一下css2.1对overflow的解释:

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

此属性（overflow）规定，当一个块元素容器的内容溢出其盒子模型的边界时，溢出的内容是否隐藏取决于溢出内容的包含块，若是溢出元素（内容，即块元素容器的子孙元素）的包含块是该块元素容器（即用overflow样式的元素）的祖先元素，则该溢出元素将不隐藏。

包含块：一个绝对定位的元素，其包含块是最近的拥有非static定位属性的祖先元素，若是任何一级祖先元素都不符合，则其包含块是body元素。

参考：
一、您可能不知道的CSS元素隐藏“失效”以其妙用
二、CSS display:none和visibility:hidden的区别