display:none,overflow:hidden,visibility:hidden之間的區別


一,display:none;

隱藏元素,不占網頁中的任何空間,讓這個元素徹底消失(看不見也摸不着)

二,overflow:hidden;

讓超出的元素隱藏,就是在設置該屬性的時候他會根據你設置的寬高把多余的那部分剪掉

我們都知道每個瀏覽器對代碼的解析都不同,所以我們在做頁面的時候會遇到很多bug,在IE里面如果內容的高度超過了該層的高度他會自動地撐開,但火狐等里面的高度是多高這層就只有這么大,內容的高即使超出了也不會影響你設置的高,在這個時候我們有的問題就可以用overflow:hidden;來解決,這是第一點,還有就是我們可以利用它做出很多hove效果

三,visibility:hidden;

他是把那個層隱藏了,也就是你看不到它的內容但是它內容所占據的空間還是存在的。(看不見但摸得到)


{ display: none; /* 不占據空間,無法點擊 */ } 
/********************************************************************************/

{ visibility: hidden; /* 占據空間,無法點擊 */ } 
/********************************************************************************/

{ height: 0; overflow: hidden; /* 不占據空間,無法點擊 */ } 
/********************************************************************************/
{ position: absolute; top: -999em; /* 不占據空間,無法點擊 */ } 
/********************************************************************************/
{ position: relative; top: -999em; /* 占據空間,無法點擊 */ } 
/********************************************************************************/
{ position: absolute; visibility: hidden; /* 不占據空間,無法點擊 */ } 
/********************************************************************************/
{ opacity: 0; filter:Alpha(opacity=0); /* 占據空間,可以點擊 */ } 
/********************************************************************************/
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據空間,可以點擊 */ } 
/********************************************************************************/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM