html CSS元素不可见方法

最新推荐文章于 2024-09-02 10:22:03 发布

转载最新推荐文章于 2024-09-02 10:22:03 发布 · 195 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rui-yang/p/7397913.html

html 中通过css方式隐藏元素的方式有很多种，除了display:none的方式外，旋转元素也是一种新的思维方式

div:nth-child(2n){
background: #4a229a;
height: 50px;
}
div:nth-child(2n+1){
background: #dd172f;
height: 50px;
}
span{
background:#7af665;
}
.class1{
display: none;
}
.class2{
visibility: hidden;
}
.class3{
z-index: 0;
}
.class4{
position:relative;
left:-101%;
}
.class5{
text-indent: 100%;
white-space:nowrap;
overflow: hidden;
}
.class6{
height: 0px;
width: 0px;
}
.class7{
opacity:0;
}
.class8{
font-size: 0px;
}
.class9{
transform:rotateX(90deg);
}
.class10{
transform:rotateY(90deg);
}
.class11{
transform:translateX(-10000px);
}
.class12{
transform:translateY(-10000px);
}
.class13{
transform:scale(0);
}
.class14{
transform:skew(90deg);
}
</style>

<body>
<div class="class1"><span>display:none</span></div>
<div class="class2"><span>visibility: hidden;</span></div>
<div class="class3"><span>z-index: 0;</span></div>
<div class="class4"><span>position:relative;</span></div>
<div class="class5"><span>text-indent: 100%;</span></div>
<div class="class6"><span>height&width</span></div>
<div class="class7"><span>opacity</span></div>
<div class="class8"><span>font-size:0</span></div>
<div class="class9"><span>transform:rotateX(90deg)</span></div>
<div class="class10"><span>transform:rotateY(90deg)</span></div>
<div class="class11"><span>transform:translateX(-10000px)</span></div>
<div class="class12"><span>transform:translateY(-10000px)</span></div>
<div class="class13"><span>transform:scale(0)</span></div>
<div class="class14"><span>transform:skew(90deg)</span></div>
<div class="class15"><span>position:absolute</span></div>
</body>

对比图如下：

转载于:https://www.cnblogs.com/rui-yang/p/7397913.html