隐藏div的几种方法

隐藏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的几种方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。