CSS隱藏元素 display、visibility、opacity的區別

關於使指定元素無法在視野內看到，有3個方法

display: none;

opacity: 0;

visibility: hidden;

1.display: none; 該方法會改變頁面布局。

1. 元素徹底消失，脫離文檔流。
2. 子元素跟隨父元素被隱藏，並且無法單獨顯示。
3. 綁定的事件也無法觸發。
4. 無論如何，DOM節點還是存在的，仍舊可以用 js 操作。

2.opacity: 0; 該方法不會改變頁面布局。

1. 實際上是元素的透明度為0。
2. 子元素 opacity:1 是無效的，元素仍舊無法顯示。
3. 綁定的事件仍舊可以觸發。

3.visibility:hidden; 該方法不會改變頁面的布局。

1. 使元素不可見。
2. 子元素設置 visibility:visible; 后，子元素會顯示，但是父元素不會顯示。
3. 綁定的事件不能觸發。

4.height:0和overflow:hidden的組合

overflow:hidden用中文理解就是“溢出隱藏”，也就是盒子以外的內容都咔嚓掉不可見的。加上height:0，只要是一般的非inline水平元素，則元素內部所有子孫都應該是不可見的。

height:0和overflow:hidden組合隱藏“失效”的條件如下：祖先元素沒有position:relative/absolute/fixed聲明，同時內部子元素應用了position:absolute/fixed聲明

5.overflow和text-overflo區別

text-overflow：clip/ellipsis; 　　屬性規定當文本溢出包含元素時發生的事情。

overflow:hidden;    隱藏所有在超過盒子設定寬度范疇外的內容。