相同: 1、兩者都能隱藏元素。 不同: 1、display:none 不占頁面空間,visiblity:hidden 占據原先頁面空間。 這裡必須說明的是,元素不占頁面空間後,取該元素或其內部元素的寬高值永遠是0。如果想隱藏又想取到寬高值,那就得用visiblity:hidden。 2、displa ...
相同:
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,用哪個還是看需求,性能優化只是其中一部分,莫要本末倒置。