隱藏div的幾種方法

方法1: display

<div class="one"></div> .one {display: none; }

方法2: opacity

.two {opacity: 0; }

方法3:rgba

.three {background: rgba(0,0,0,0); }

方法4:float:left + margin-left 或 float:right + margin-right 值用負的

.four {float: left;margin-left: -100px;//因為這里我給每個div設置的寬高都是100px }

方法5: 絕對定位或者固定定位 + left 或者 right 挪出視口外

.five {position: absolute; //此時的絕對定位是相對于視口;left: -100px; }

方法6: margin值等于寬高

.six {margin: -100px; }

方法7: 寬或高值為0

.seven {width: 0;/* height: 0; */ }

方法8: box-sizing 使邊框的顏色為背景顏色

.eight {box-sizing: border-box;border: 50px solid white; }

方法9: 同方法8 可用蒙版將盒子蓋住

<div class="nine"><div class="box9"></div> </div> .nine .box9 {width: 100px;height: 100px;background: #FFFFFF; }

方法10: 同方法8 可以用浮動 用一個盒子蓋住另一個盒子

<div class="ten"><div class="box1"></div><div class="box2"></div> </div> .ten .box1 {float: left;background: #FFFFFF; }

方法11:transform: translateX 將元素移出視口外

.eleven {transform: translateX(-520px); // 具體指得看視口大小 }

方法12: transform: rotateX或者rotateY將元素旋轉

.twelve {transform: rotateY(90deg);transform: rotateX(90deg); }

方法13:visibility:hidden

.thirteen{visibility:hidden; }

總結

以上是生活随笔為你收集整理的隐藏div的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。