CSS的隱藏方式

display:none和visibility:hidden的區別

// 一、空間佔據
display:none;// 隱藏的元素不佔文檔流
visibility:hidden;// 隱藏的元素空間存在(佔茅坑、不拉屎)
// 二、迴流和重繪(reflow/repaint)
display:none;// 引起迴流和重繪
visibility:hidden;// 無迴流和重繪
// 三、株連九族
display:none;// 其內的標籤元素所有隱藏、不管如何掙扎都無濟於事
visibility:hidden;// 其元素若添加visibility:visible;則會顯示出來

height:0;overflow:hidden;

overflow:hidden;// 溢出隱藏
//若父級被添加了position屬性、子級內添加了絕對定位、則不會被隱藏
//火星人在地球觸發了法律，若是火星人的老爸在這法律以外，則這個火星人啥事沒有；不然，坐牢！

position:absolute;top:-999em;// 不佔空間、沒法點擊
position:relative;top:-999em;// 佔空間、沒法點擊
position:absolute;visibility:hidden;// 不佔空間、沒法點擊
opacity:0;filter:Alpha(opacity=0);// 佔空間、能夠點擊

那些緣由引發瀏覽器的迴流

1. 改變字體大小

2. 樣式表改動

3. DOM操做

4. CSS僞類

5. 元素內容變化、尤爲是輸入控件

6. 調整窗口大小( resize )

7. width、clientWidth(內容可視區大小)、offsetWidth(border+clientWidth)、scrollTop/scrollHeight(元素內容高度/包括溢出內容)

會使瀏覽器將漸進迴流隊列Flush、當即執行迴流
如何減小頁面迴流

• 避免逐項更改樣式、最好一次性更改style屬性cssText、或者定義class一次性添加className

• 避免循環操做DOM、建立一個documentFragment或div在上面應用全部DOM操做、最後在添加到指定的元素中

也能夠在一個display:none;的元素上進行操做、由於display:none;上的DOM操做不會引起迴流(reflow)和重繪(repaints)

• 避免循環讀取offsetLeft等屬性、在循環以前把他們存儲起來

• 進行復雜動畫的元素運動時、使用絕對定位、使其脫離文檔流。不然會引發父元素以及後續元素大量的迴流