【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的區別