CSS之定位（绝对定位元素的布局）

最新推荐文章于 2023-02-25 15:36:52 发布

不动声色的小蜗牛

最新推荐文章于 2023-02-25 15:36:52 发布

阅读量336

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_45720626/article/details/107379471

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

绝对定位元素的布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>绝对定位元素的布局</title>
		<style>
			.box1{
				width: 500px;
				height: 500px;
				background-color: #7FFFD4;
				position: relative;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: orange;
				position: absolute;
				
				margin: auto;
				/*
					水平布局：
						left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right
					
					-当我们开启了绝对定位后：
						水平方向的布局等式就需要添加left和right两个值
							此时规则和之前一样只是多添加了两个值：
								当发生过度约束时：
									如果9个值中没有auto，则自动调整right值以使等式满足
									如果有auto，则自动调整auto值以使等式满足
								-可设置auto值：
									margin width left right
									其中left和right默认值为auto
									
						垂直方向布局的等式也必须满足
							top + margin-top/bottom + badding-top/bottom + border-top/bottom + bottom
				 */
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

不动声色的小蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS之定位（绝对定位元素的布局）

绝对定位元素的布局：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>绝对定位元素的布局</title> <style> .box1{ width: 500px; height: 500px; background-color: #7FFFD4; position: relative; }
复制链接

扫一扫