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

最新推荐文章于 2023-06-25 18:56:31 发布

_浮舍_

最新推荐文章于 2023-06-25 18:56:31 发布

阅读量369

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/LED_of_Java/article/details/98871965

版权

Java 专栏收录该内容

118 篇文章 0 订阅

订阅专栏

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>

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

_浮舍_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
【web前端(十八)】html_绝对定位

body设重定义<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>绝对定位1</title> <style> /*对body设重定义*/ body{ height: 1000px; } ...
复制链接

扫一扫