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


就是采用overflow隱藏，然后把元素的基本屬性值設(shè)置為最小或無(wú)，當(dāng)然，如果你要顯示的話，還得寫(xiě)另一個(gè)相應(yīng)的類(lèi)。
CSS中的visibility和display兩個(gè)屬性很容易被混淆，因?yàn)樗鼈兛雌饋?lái)是做同樣的事情，但實(shí)際上，這兩個(gè)屬性是完全不同的。 visibility屬性用來(lái)設(shè)置一個(gè)給定的元素是否顯示（visibility="visible|hidden"），但是，雖然一個(gè)元素的visibility被設(shè)置為hidden，但是該元素仍然會(huì)占據(jù)設(shè)計(jì)的位置：


<div onclick="toggleVisibility(this)" style="position:relative">
This example displays text that toggles between a visibility of 'visible' and 'hidden'.
Note the behavior of the next line.</div><div>This second line shouldn't
move, since visibility retains its position in the flow</div>


<div onclick="toggleVisibility(this)" style="position:relative">
This example displays text that toggles between a visibility of 'visible' and 'hidden'.
Note the behavior of the next line.</div><div>This second line shouldn't
move, since visibility retains its position in the flow</div>
注意如果display屬性沒(méi)有被明確設(shè)置，將默認(rèn)被設(shè)置為該類(lèi)元素的常用值。明顯地，兩個(gè)屬性中display屬性更有用，多數(shù)情況下在隱藏文字的時(shí)候要將相關(guān)的元素做相應(yīng)的調(diào)節(jié)（例如樹(shù)結(jié)構(gòu)）。
注意當(dāng)一個(gè)元素被隱藏時(shí)，不能接受任何事件，因此上例中當(dāng)<div>被隱藏后，不能再接受鼠標(biāo)點(diǎn)擊事件，所以再點(diǎn)擊該控件位置不能再次顯示控件。Display屬性的作用則有所不同，visibility隱藏元素，但是卻為該元素預(yù)留位置，而display實(shí)際是設(shè)置該元素的屬性。例如任何display設(shè)置為block的元素都被視為一個(gè)單獨(dú)的塊兒，這時(shí)的<SPAN>會(huì)象<DIV>一樣工作，而當(dāng)display屬性設(shè)置為inline時(shí)該元素將變成一個(gè)單列的元素，這時(shí)的<DIV>也會(huì)象<SPAN>一樣工作。最后，如果一個(gè)元素的display屬性被設(shè)置為none，那么這個(gè)元素實(shí)際上將徹底從輸出流中去除，并且其后的所有元素將提到前面對(duì)的位置。


<div>Click on the <span id="blueText" onclick="toggleDisplay(this)"
style="color:blue;position:relative;cursor:hand;">blue text</span> to
see how it affects the flow.</div>

最新評(píng)論