css元素隐藏不可获取,Css隐藏元素(display,visibility)的区别
Css隱藏元素(display,visibility)的區別
display
display屬性值
display 屬性規定元素應該生成的框的類型。
屬性值：
block：
/表現為一個塊級元素(一般情況下獨占一行)/
當display被設置為block(塊)時，容器中所有的元素將會被當作一個單獨的塊，就像DIV元素一樣，它會在那個點被放入到頁面中。(實際上你可以設置span的display:block，使其可以像DIV一樣工作。)
inline:
/表現為一個行級元素(一般情況下不獨占一行)/
將display設置為inline，將使其行為和元素inline一樣—即使它是普通的塊元素如DIV，它也將會被組合成像span那樣的輸出流。
none:
/元素不可見，并且不為其保留相應的位置/
最后是display被設置：none,這時元素實際上就從頁面中被移走，它下面所在的元素就會被自動跟上填充。
display的使用
1、display默認屬性值為塊級的元素：
adress,quote,body,xmp,center,col,colgroup,dd,dtr,div,
dl,dt,fieldset,form,hn,hr,iframe,legend,listing,marquee,
menu,ol,p,plaintext,pre,table,td,th,tr,ul
2、display默認屬性值為none的元素：
br,frame,nextid,tbody,tfoot,thead
3、li元素的display屬性默認值為：list-item
4、其他元素display屬性默認值都為inline
display的特性
改變元素的display屬性將對周圍元素造成的影響有：
在屬性值設為block的元素后面添加新行
從屬性值設為inline的元素所在行中刪除一行
隱藏屬性值設為none的元素并且釋放該元素在文檔中所占的物理空間，對于其他元素來說，相當于該元素不存在，因此，該元素的位置被其他元素頂替
visibility
visibility的屬性值
visibility:visible
/元素可見，默認值/
visibility:hidden
/元素不可見，但仍然為其保留相應的空間/
visibility:collapse
/只對table對象起作用，能移除行或列但不會影響表格的布局。如果這個值用在table以外的對象上則表現為hidden。/
visibility:inherit
/繼承上級元素的visibility值。/
visibility特性
用來確定元素是顯示還是隱藏，這用visibility=”visible/hidden”來表示，visible表示顯示，hidden表示隱藏。當visibility被設置為”hidden”的時候，元素雖然被隱藏了，但它仍然占據它原來所在的位置。
visibility和display的區別
大多數人很容易將CSS屬性display和visibility混淆，它們看似沒有什么不同，其實它們的差別卻是很大的。visibility和display兩個屬性都有隱藏元素的功能。visibility屬性所控制的元素雖然不在瀏覽器里面顯示出來，但他在瀏覽區里是存在的，只是不顯示而已。而display屬性設置為none，這個元素就變成了一個不顯示的元素
display:none;
使用該屬性后，HTML元素(對象)的寬度、高度等各種屬性值都將“丟失”;
visibility:hidden;
使用該屬性后，HTML元素(對象)僅僅是在視覺上看不見(完全透明)，而它所占據的空間位置仍然存在，也即是說它仍具有高度、寬度等屬性值。
visibility和display的其他區別
其實visibility和display的區別主要有三點：
空間占據
回流與渲染
株連性
回流與渲染：
display:none隱藏產生reflow和repaint(回流與重繪)，而visibility:hidden沒有這個影響前端性能的問題；
株連性：
所謂“株連性”，就是如果祖先元素遭遇某禍害，則其子子孫孫無一例外也要遭殃。
display:none就是“株連性”明顯的聲明：一旦父節點元素應用了display:none，父節點及其子孫節點元素全部不可見，而且無論其子孫元素如何不屈地掙扎都無濟于事。
在實際的web應用中，我們要經常實現一些顯示隱藏的功能，由于display:none本身特性以及jQuery潛在的驅動，使得我們對display:none這種隱藏特性相當熟知。因此，久而久之會形成比較牢固的情感化認識，并無法避免地將這種認識遷移到其他類似表現屬性(eg.?visibility)的認識上，再加上一些常規經驗……
舉例來說吧，通常情況下，我們給一個父元素應用visibility:hidden，則其子孫后代也都會全部不可見。于是，我們就會有類似的認識遷移：應用了visibility:hidden聲明下的子孫元素如何不屈地掙扎都擺脫不了不可見被抹殺的命運。而實際上卻存在隱藏“失效”的情況。
何時隱藏“失效”？很簡單，如果子孫元素應用了visibility:visible，那么這個子孫元素又會劉謙般地顯現出來。
對比總結：
display:none是個相當慘無人道的聲明，子孫后代全部搞死(株連性)，而且連塊安葬的地方都不留(不留空間)，導致全體民眾嘩然(渲染與回流)。
visibility:hidden則具有人道主義關懷，雖然不得已搞死子孫，但是子孫可以通過一定手段避免(偽株連性)，而且死后全尸，墓地俱全(占據空間)，國內民眾比較淡然(無渲染與回流)。
其他隱藏元素
在CSS中，讓元素隱藏(指屏幕范圍內肉眼不可見)的方法很多，有的占據空間，有的不占據空間；有的可以響應點擊，有的不能響應點擊
{ display: none; /* 不占據空間，無法點擊 */ }
{ visibility: hidden; /* 占據空間，無法點擊 */ }
{ position: absolute; top: -999em; /* 不占據空間，無法點擊 */ }
{ position: relative; top: -999em; /* 占據空間，無法點擊 */ }
{ position: absolute; visibility: hidden; /* 不占據空間，無法點擊 */ }
{ height: 0; overflow: hidden; /* 不占據空間，無法點擊 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占據空間，可以點擊 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據空間，可以點擊 */ }
{
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* IE6/IE7/IE9不占據空間，IE8/FireFox/Chrome/Opera占據空間。都無法點擊 */
}
{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占據空間，無法點擊 */
}
height:0和overflow:hidden的組合
overflow:hidden用中文理解就是“溢出隱藏”，也就是盒子以外的內容都咔嚓掉不可見的。加上height:0，只要是一般的非inline水平元素，則元素內部所有子孫都應該是不可見的。
height:0和overflow:hidden組合隱藏“失效”的條件如下：祖先元素沒有position:relative/absolute/fixed聲明，同時內部子元素應用了position:absolute/fixed聲明。
什么時候使用Visibility或者Display屬性？
Visibility和Display屬性雖然都可以達到隱藏頁面元素的目的，但它們的區別在于如何回應正常文檔流。
如果你想隱藏某元素，但在頁面上保留該元素的空間的話，你應該使用visibility：hidden。如果你想在隱藏某元素的同時讓其它內容填充空白的話應該使用display：none。
在現實中我(作者)更多的傾向于使用display屬性(相信這也是大多數人的習慣，bolo注)。當你決定用display：none來隱藏一個元素時，你必須知道其它內容將填充到該元素留下的空白位置，從而改變頁面的布局。
使用Visibility或者Display屬性的注意事項
display:none:
1、JS讀取元素屬性值
如果在樣式文件或頁面文件代碼中直接用display:none對元素進行了隱藏，載入頁面后，在沒有通過js設置樣式使元素顯示的前提下，使用js代碼會無法正確獲得該元素的一些屬性，比如offSetTop,offSetLeft等，返回的值會為0，通過js設置style.display來使元素顯示后才能正確獲得這些值。
2、SEO優化時需要注意
使用display:none隱藏的元素不會被百度等搜索網站檢索，會影響到網站的SEO，某些情況下可以使用left:-100000px來達到同樣效果。
3、樣式文件
如果是通過樣式文件或方式來設置元素的display:none樣式，用js設置style.display=”“并不能使元素顯示，可以使用block或inline等值來代替。通過style=”display:none”直接在元素上進行的設置不會有這個問題
4、有些情況下可以使用style.visibility來代替style.display，但是要注意的是style.visibility隱藏元素時會保留元素在頁面上所占的空間，而style.display隱藏元素且讓出所占頁面空間。
visibility:hidden:
如果想讓某一段代碼在前臺不顯示，最簡單的方法是用css的display:none,這樣，下邊的內容就自動填補這個空隙。但是在一些特殊的情況下，我們只需要隱藏這個元素，但它的位置不能被其他元素占用了，那么，visibility:hidden就可以實現這個要求。
例子
display屬性值的使用.test{
height:100px;
background-color:#ccc;
}
.displayWrap{
display: none;
height:100px;
background-color:#E60C0F;
}
.displayChild{
display: block;
height:100px;
width: 50%;
background-color:#000;
}
.visibilityWrap{
visibility: hidden;
height:100px;
background-color:#f5f00e;
}
.visibilityChild{
visibility: visible;
height:100px;
width: 50%;
background-color:#000;
}
displayChildvisibilityChild總結
以上是生活随笔為你收集整理的css元素隐藏不可获取,Css隐藏元素(display,visibility)的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux 0.00 Makefile
- 下一篇： 80x86描述符总结及解析描述符的小程序