web第一次课后作业 visibility与display区别

深藏阁楼爱情的钟 2022-11-28 15:30 111阅读 0赞

## visibility:hidden ##

仅仅是视觉上看不见，原位置存在

## display:none ##

不光看不见，位置也没有

### js实现点击按钮更改visibility display属性 ###

<!DOCTYPE html>
    <html>
    <head>
    	<title>visibility与display区别</title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		*{
    			padding: 0;
    			margin: 0;
    			text-decoration: none;
    			list-style: none;
    			border: 1px solid black;
    		}
    		.visibility,
    		.display{
    			float: left;
    		}
    		.visibility::after,
    		.display::after{
    			content: '';
    			clear: both;
    			display: block;
    		}
    		.visibility,
    		.display{
    			text-align: center;
    			line-height: 20px;
    			width: 300px;
    			height: 100px;
    		}
    		.contain div span,
    		.contain div input{
    			display: block;
    			text-align: center;
    		}
    		.contain{
    			width: 100%;
    			height: 100%;
    			padding: 100px 30%;
    		}
    		.btn{
    			width: 100px;
    			height: 30px;
    			cursor:pointer;
    		}
    		#s1,
    		#s2{
    			background-color: blue;	
    		}
    
    	</style>
    
    </head>
    <body>
    
    	<div class="contain">
    		<div class="visibility">
    			<span id="s1">visibility:hidden</span>
    			<input class="btn" onclick="change1()" id="input1" type="button" value="隐藏" name="">
    		</div>
    
    		<div class="display">
    			<span id="s2">display:none</span>
    			<input class="btn" onclick="change2()" id="input2" type="button" value="隐藏" name="">
    		</div>
    	</div>
    
    	<script type="text/javascript">
    		//状态
    		var status1 = 'display';
    		var status2 = 'display';
    		var span1 = document.getElementById('s1');
    		var span2 = document.getElementById('s2');
    		var input1 = document.getElementById('input1');
    		var input2 = document.getElementById('input2');
    		function change1(){
    			if (status1 === 'display') {
    				span1.style.visibility = 'hidden';
    				input1.value = '显示';
    				status1 = 'hide';
    			}else{
    				span1.style.visibility = '';
    				input1.value = '隐藏';
    				status1 = 'display';
    			}
    		}
    		function change2(){
    			if (status2 === 'display') {
    				span2.style.display = 'none';
    				input2.value = '显示'
    				status2 = 'hide';
    			}else{
    				span2.style.display = '';
    				input2.value = '隐藏';
    				status2 = 'display';
    			}
    		}
    
    
    
    	</script>
    </body>
    </html>

## 第二道 ##

### 第一种方法 ###

<!DOCTYPE html>
    <html>
    <head>
    	<title>position display float</title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		*{
    			margin:0;/*清除样式*/
    			padding: 0;
    		}
    		.wrapper{
    			border:1px solid black;
    			position: relative;
    		}
    		.wrapper,
    		.contain1,
    		.contain2{
    			overflow: hidden;/*触发bfc*/
    		}
    
    		.wrapper div ul{
    			float: left;
    			width: 50%;
    		} 
    		.wrapper div ul::after{
    			/*清楚浮动流*/
    			content: '';
    			display: block;
    			clear: both;
    		}
    	</style>
    </head>
    <body>
    	<div class="wrapper">
    		<div class="contain1">
    			<ul>
    				<input type="checkbox" value="清新" name="">
    				<label>清新</label>
    			</ul>
    			<ul>
    				<input type="checkbox" value="节奏" name="">
    				<label>节奏</label>
    			</ul>
    		</div>
    		<div class="contain2">
    			<ul>
    				<li>I don't want to talk about it</li>
    				<li>Those sweet words</li>
    				<li>Close to you</li>
    			</ul>
    			<ul>
    				<li>I want it that way</li>
    				<li>Just give me a reason</li>
    			</ul>
    		</div>
    	</div>
    </body>
    </html>

### 第二种方法 ###

<!DOCTYPE html>
    <html>
    <head>
    	<title>3</title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		*{
    			padding: 0;
    			margin:0;
    		}
    		.wrapper{
    			border: 1px solid black;
    		}
    		.contain{
    			position: relative;
    			width: 100%;
    		}
    		#x,
    		#y{
    			position: absolute;
    			left: 50%;
    			top: 0;
    		}
    
    	</style>
    </head>
    <body>
    	<div class="wrapper">
    		<div class="contain">
    			<ul>
    				<input type="checkbox" name="">
    				<span>清新</span>
    			</ul>
    			<ul id="x">
    				<input type="checkbox" name="">
    				<span>节奏</span>
    			</ul>
    		</div>
    		<div class="contain">
    			<ul>
    				<li>I don't want to talk about it</li>
    				<li>Those sweet words</li>
    				<li>Close to you</li>
    			</ul>
    			<ul id="y">
    				<li>I want it that way</li>
    				<li>Just give me a reason</li>
    			</ul>
    		</div>
    	</div>
    </body>
    </html>