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)？有什麼區別？