提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

【web前端(十八)】html_绝对定位

定位WebHTML前端 绝对 十八
2023-09-11 14:20:37 时间

 body设重定义

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位1</title>
		<style>
			/*对body设重定义*/
			body{
				height: 1000px;
				}
				/*当我们将body设置好了之后，
				 当浏览器的高较大时，我们就在当前页面进行*/
				
				
			.c1{
				width: 100px;
				height: 100px;
				background-color: #87CEEB;
				position:absolute;
				/*top: 350px;
				left: 350px;*/
				top: 0px;
				left: 0px;
			}
			
			.c2{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
				/*这里是参考当前浏览器窗口定位的（左下角、右上角）*/
				position:absolute;
				right:0px;
				bottom: 0px;
			}
			
			.c3{
				width: 300px;
				height: 300px;
				background-color:#000000;
				
				/*隐藏*/
				/*display: none;*/
				
				/*父窗口加margin*/
				margin:110px;
				position: absolute;
			} 
			
			.c4{
				width: 300px;
				height: 100px;
				background-color:#00FF00;
				position:absolute;
				top: 0px;
				left: 0px;
				
			}
						
			/*在父块没有做修饰或定位的情况下，
				 在绝对定位条件下，
				 子块是不受父块约束的。*/
				/*父集要用相对定位，
				 子集要用绝对定位*/
				/*大块也可用相对定位*/
		</style>
	</head>
	<body>
		<div class="c1">
			
		</div>
		
		<div class="c2">
			
		</div>
		
		<div class="c3">
			
		</div>
		
		<div class="c4">
			
		</div>
	</body>
</html>

 

 

 

水平居中和垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位2</title>
		<style>
			.c1{
				width: 100px;
				height: 100px;
				background-color: #124444;
				position:absolute;
				/*绝对定位还可用百分比*/
				/*此时，在浏览器窗口中有中心点，
				 块是左对齐的，
				 所以看着不像是对半分*/
				top: 50%;
				left: 50%;
				/*margin在该地方，
				 若移动为正值，
				 则向右移动；反之为向左移动。*/
				/*margin: 100px;*/
				
				/*此时，经过调整之后，
				 块的中心与窗口中心重合*/
				
				
				/*水平居中*/
				margin-left: -50px;
				
				
				/*垂直居中*/
				margin-top: -50px;
			}

		</style>
	</head>
	<body>
		<div class="c1">
			
		</div>

	</body>
</html>

此时，块的中心与浏览器窗口的中心是重合的，即块处在窗口正中心位置 。

相关文章