這個(gè)內(nèi)容較好理解,不上完整代碼,不截圖奋姿!
1、最常用之——display: none;
給元素設(shè)置display: none;
后素标,元素會(huì)從頁(yè)面中徹底消失称诗,它原本占據(jù)的空間會(huì)被其他元素占有,會(huì)造成瀏覽器的回流與重繪头遭。
2寓免、最常用之——visibility: hidden;
給元素設(shè)置visibility: hidden;
后,元素會(huì)從頁(yè)面中消失计维,它原本占據(jù)的空間會(huì)被保留袜香,會(huì)造成瀏覽器的重繪,適用于希望元素隱藏又不影響頁(yè)面布局的場(chǎng)景鲫惶。
3困鸥、隱身大法——opacity: 0;
給元素設(shè)置opacity: 0;
后,元素變成透明的我們?nèi)庋劬涂床坏搅私0矗栽菊紦?jù)的空間還在。
4澜术、設(shè)置盒模型屬性為0
將height艺蝴、width、padding鸟废、border猜敢、margin等盒模型屬性的值全設(shè)為0,如果元素內(nèi)還有子元素或內(nèi)容盒延,還應(yīng)overflow: hidden;來(lái)隱藏子元素缩擂。
.box1 {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
overflow: hidden;
}
5、最雞賊——設(shè)置元素絕對(duì)定位與top添寺、right胯盯、bottom、left等將元素移出屏幕计露。
如:
.box1 {
position: absolute;
left: 100%;
}
或:
.box1 {
position: absolute;
top: 9999px;
}
6博脑、設(shè)置元素的絕對(duì)定位與z-index憎乙,將z-index設(shè)置成盡量小的負(fù)數(shù)。
但z-index是相對(duì)而言的 叉趣,用z-index就要設(shè)置其他元素的z-index值泞边,且如果元素本身占據(jù)空間很大就不一定會(huì)被z-index值比它大的元素完全覆蓋,所以不推薦這種方法疗杉。
如:
.box1 {
position: absolute;
z-index: -9999;
}
.box2 {
position: absolute;
z-index: 1;
}