display:none和visibility:hidden的區別？

css控制元素不可見的方法 { display: none; /* 不佔據空間，沒法點擊 */ }

/********************************************************************************/

{ visibility: hidden; /* 佔據空間，沒法點擊 */ }

/********************************************************************************/

{ position: absolute; top: -999em; /* 不佔據空間，沒法點擊 */ }

/********************************************************************************/

{ position: relative; top: -999em; /* 佔據空間，沒法點擊 */ }

/********************************************************************************/

{ position: absolute; visibility: hidden; /* 不佔據空間，沒法點擊 */ }

/********************************************************************************/

{ height: 0; overflow: hidden; /* 不佔據空間，沒法點擊 */ }

/********************************************************************************/

{ opacity: 0; filter:Alpha(opacity=0); /* 佔據空間，能夠點擊 */ }

/********************************************************************************/

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不佔據空間，能夠點擊 */ }

}

{ zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* IE6/IE7/IE9不佔據空間，IE8/FireFox/Chrome/Opera佔據空間。都沒法點擊 */ }

/********************************************************************************/

{ position: absolute; zoom: 0.001; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); transform: scale(0); /* 不佔據空間，沒法點擊 */ }

 

最經常使用的爲display:none和visibility:hidden

dispaly:none 設置該屬性後，該元素下的元素都會隱藏，佔據的空間消失。

visibility:hidden 設置該元素後，元素雖然不可見了，可是依然佔據空間的位置。

 

display:none和visibility:hidden的區別？

1.visibility具備繼承性，其子元素也會繼承此屬性，若設置visibility:visible，則子元素會顯示

2.visibility不會影響計數器的計算，雖然隱藏掉了，可是計數器依然繼續運行着。

3.在css3的transition中支持visibility屬性，可是不支持display，由於transition能夠延遲執行，所以配合visibility使用純css實現hover延時顯示效果能夠提升用戶體驗

4. display:none會引發迴流(重排)和重繪 visibility:hidden會引發重繪 拓展明日每日一題：什麼是迴流(重排 reflow)？什麼是重繪(repaint)？有什麼區別？

 

 

拓展明日每日一題：什麼是迴流(重排 reflow)？什麼是重繪(repaint)？有什麼區別？