display:none和visiblity:hidden差別

相同：

1、兩者都能隐藏元素。

不同：

1、display:none 不占頁面空間，visiblity:hidden 占據原先頁面空間。

這裡必須說明的是，元素不占頁面空間後，取該元素或其内部元素的寬高值永遠是0。如果想隐藏又想取到寬高值，那就得用visiblity:hidden。

2、display:none 的子元素也一定無法顯示，visiblity:hidden 的子元素可以設定顯示。

display:none元素及其子元素都将隐藏，而visiblity:hidden元素的子元素卻可以設定visibility: visible 顯示出來。在這一點上，如果頁面是比較複雜或者是不受控制的，就要慎重使用visiblity:hidden，因為保不齊哪個元素被設定成可見，影響顯示效果。

3、display:none 引起頁面重繪和回流， visiblity:hidden 隻引起頁面重繪。

visiblity:hidden 看起來的性能比display:none好些，在兩者都能使用情況下，可先考慮visiblity:hidden。但也不用千方百計用visiblity:hidden，用哪個還是看需求，性能優化隻是其中一部分，莫要本末倒置。

本文轉自 海角在眼前 部落格園部落格，原文連結：  http://www.cnblogs.com/lovesong/p/8045091.html ，如需轉載請自行聯系原作者