html CSS元素不可见方法

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>

　效果对比图如下：

 

 

 

 

 

 

 

posted @ 2017-08-19 21:02  仲夏.net  阅读(1819)  评论(0)    收藏  举报