關于CSS屬性中visibility隱藏和display消失的區(qū)別簡析

2024-07-11 08:48:46

字體：大中小

來源：轉載

供稿：網(wǎng)友

了解Css的人應該都知道display:none;和visibility:hidden;之間的一些區(qū)別，當html元素被設置為display:none;后，瀏覽器不會解析該元素，“none”就是沒有，消失了，所以他不會再文檔流中占位。而visibility:hidden;僅僅是視覺上消失了，“hidden”也就是隱藏了，但是它所在的位置仍然還在，就像你把你個文件給隱藏了，但是這個文件在你的硬盤中仍然是占據(jù)一定空間的，只是你看不見而已。
對使用display:none;的元素，瀏覽器不會去解析，搜索引擎可能會認為被隱藏的文字屬于垃圾信息而被忽略，而且屏幕閱讀器（是為視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字。
而對使用visibility:hidden;的元素，雖然隱藏了，但位置仍在，給人的感覺是“占著茅坑布拉斯”，要配合position:relative和position:absolute一起來用，沒有display:none;那么簡單、靈活。就另外一點，visibility:hidden;轉換為visibility:visible跟display:none;轉換為display:block;性能要好，因為display在切換可見性時會產(chǎn)生reflow，它要重新構建frame，當然要比visibility:visible慢。
如果你以上兩種方法都不想要的話，可以寫一個類：

復制代碼

上一篇：firebug使用方法在IE上使用firebug的技巧圖文介紹

下一篇：css 固定頂部怎么用css定義一個固定在頁面頂部的層