這個內容較好理解,不上完整代碼,不截圖!
1、最常用之——display: none;
給元素設置display: none;
后,元素會從頁面中徹底消失,它原本占據的空間會被其他元素占有,會造成瀏覽器的回流與重繪。
2、最常用之——visibility: hidden;
給元素設置visibility: hidden;
后,元素會從頁面中消失,它原本占據的空間會被保留,會造成瀏覽器的重繪,適用于希望元素隱藏又不影響頁面布局的場景。
3、隱身大法——opacity: 0;
給元素設置opacity: 0;
后,元素變成透明的我們肉眼就看不到了,所以原本占據的空間還在。
4、設置盒模型屬性為0
將height、width、padding、border、margin等盒模型屬性的值全設為0,如果元素內還有子元素或內容,還應overflow: hidden;來隱藏子元素。
.box1 {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
overflow: hidden;
}
5、最雞賊——設置元素絕對定位與top、right、bottom、left等將元素移出屏幕。
如:
.box1 {
position: absolute;
left: 100%;
}
或:
.box1 {
position: absolute;
top: 9999px;
}
6、設置元素的絕對定位與z-index,將z-index設置成盡量小的負數。
但z-index是相對而言的 ,用z-index就要設置其他元素的z-index值,且如果元素本身占據空間很大就不一定會被z-index值比它大的元素完全覆蓋,所以不推薦這種方法。
如:
.box1 {
position: absolute;
z-index: -9999;
}
.box2 {
position: absolute;
z-index: 1;
}