元素不可见方法实践
Posted 仲夏.net
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了元素不可见方法实践相关的知识，希望对你有一定的参考价值。
html 中通过css方式隐藏元素的方式有很多种，除了display:none的方式外，还可以通过变换元素的位置来达到效果。
代码如下
<!doctype html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
div:nth-child(2n){
background:#c1f7c2;
height:50px;
}
div:nth-child(2n+1){
background:#c6d2c6;
height:50px;
}
span{
background:#e6ffd6;
}
/*隐藏当前元素且不占用文档流*/
.displayNone{
display:none;
}
/*隐藏当前元素但是占用文档流只是不显示出来*/
.visibilityHidden{
visibility:hidden;
}
/*移动当前元素到屏幕左侧，占用文档流元素仍然存在，只是在当前屏幕看不到了*/
.positionRelative{
position:relative;
left:-101%;
}
/*移动子元素到父元素的右侧，配合超出后不显示，达到隐藏的效果，占用文档流元素仍然存在*/
.textIndent{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
}
/*设置宽度和高度都是零，不占用空间，达到隐藏的效果(子元素不会受到影响，仍然会显示出来)*/
.heightWidth{
height:0px;
width:0px;
}
/*文字内容可以设置字体大小为0达到隐藏效果*/
.fontsize0{
font-size:0;
}
/*设置元素的透明度0*/
.opacity0{
opacity:0;
}
/*旋转元素，按照X轴的方向旋转90度，与当前页面垂直，仍然占用文档流，同理可以旋转Y轴*/
.transformRotatex{
transform:rotateX(90deg);
}
/*在X轴方向上移动元素，仍然占用文档流，同理可以向Y轴方向移动*/
.transformTranslateX{
transform:translateX(-10000px);
}
/*缩小或者放大，0倍时元素隐藏，元素仍然存在，占用文档流*/
.transformScale{
transform:scale(0);
}
/*以中心位置旋转90度，元素仍然存在*/
.transformSkew{
transform:skew(90deg);
}
</style>
</head>
<body>
<div class="displayNone"><span>display:none</span></div>
<div class="visibilityHidden"><span>visibility: hidden;</span></div>
<div class="positionRelative"><span>position:relative;</span></div>
<div class="textIndent"><span>text-indent: 100%;</span></div>
<div class="heightWidth"><span class="fontsize0">height&width</span></div>
<div class="opacity0"><span>opacity</span></div>
<div class="transformRotatex"><span>transform:rotateX(90deg)</span></div>
<div class="transformTranslateX"><span>transform:translateX(-10000px)</span></div>
<div class="transformScale"><span>transform:scale(0)</span></div>
<div class="transformSkew"><span>transform:skew(90deg)</span></div>
</body>
</html>
效果对比图如下：
以上是关于元素不可见方法实践的主要内容，如果未能解决你的问题，请参考以下文章