HTMLCSS小白——盒子模型，绝对定位和相对定位

水深无声 2023-07-10 08:10 36阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		.wrapper{
        
    			width: 100px;
    			height: 100px;
    			background-color: red;
    			border: 10px solid green;
    			padding: 100px 150px;
    			padding-top: 200px;
    			/*一个值是正方形*/
    			/*两个值 是 上下 左右*/
    			/*三个值 上 左右 下*/
    			/*四个值属性是上右下左*/
    		}
    		.content{
        
    			width: 100px;
    			height: 100px;
    			background-color: black;
    			border: 10px solid blue;
    			padding: 10px;
    		}
    		#qaq{
        
    			width: 100px;
    			height: 100px;
    			padding: 0 100px;
    			margin: 10px 20px 30px 40px;
    			border: 1px solid black;
    			background-color: orange;
    			padding: 0;
    		}
    	</style>
    </head>
    <body>
    	<div class="wrapper">
    		<div class="content"></div>
    	</div>
    	<div id="qaq"></div>
    
    </body>
    </html>

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    	*{
        
    		padding: 0;
    		margin: 0;
    	}
    	/*.demo{
    		position: relative;
    		left: 100px;
    		top: 100px;
    		width: 100px;
    		height: 100px;
    		background-color: red;
    		opacity: 0.5;
    		透明度
    	}
    	.box{
    		width:150px;
    		height:150px;
    		background-color: green;
    	}*/
    	.wrapper{
        
    		/*position: relative;*/
    		
    		width: 200px;
    		height: 200px;
    		background-color: orange;
    	}
    	.content{
        
    		/*position: relative;*/
    		margin-left: 100px;
    		width: 100px;
    		height: 100px;
    		background-color: black;
    	}
    	.box{
        
    		position: relative;
    		left: 50px;
    		width: 50px;
    		height: 50px;
    		background-color: yellow;
    	}
    	span{
        
    		position: fixed;
    		top: 50%;
    		left: 50%;
    		display: block;
    		width: 100px;
    		height: 100px;
    		background-color: yellow;
    		color: red;
    		font-family: arial;
    		margin-left: -50px;
    		margin-top: -50px;
    	}
    
    
    	</style>
    </head>
    <body>
    	
    	
    	 
    	  
    
    
    
    	<div class="wrapper">
    		<div class="content">
    			<div class="box"></div>
    		</div>
    	</div>
    	<span>欢迎关注一张平台谢谢</span>
    
    </body>
    </html>