绝对定位元素的布局

最新推荐文章于 2022-11-29 19:28:18 发布

原创最新推荐文章于 2022-11-29 19:28:18 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

前端同时被 3 个专栏收录

65 篇文章

订阅专栏

css3

47 篇文章

订阅专栏

css

42 篇文章

订阅专栏

本文详细介绍了CSS中的绝对定位元素布局，包括水平布局和垂直布局的计算公式，以及如何实现垂直水平居中。在水平布局中，涉及到left、right、margin、padding和border等属性的综合运用。在过度约束情况下，浏览器会自动调整auto值以满足布局。对于垂直布局，也有类似的计算规则。同时，文章展示了如何通过设置position、margin、left和right来实现元素的垂直水平居中对齐。

绝对定位元素的水平布局

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，

	所以如果不指定left和right，则等式不满足时，会自动调整两个值

绝对定位元素的垂直布局

垂直方向布局的等式也要满足以下等式:

							   top
								+
						   margin-top
								+
						   padding-top
								+
						   border-top
								+
							  height
							  	+
						  border-bottom
							  	+
						  padding-bottom
								+
						  margin-bottom
								+
							  bottom
								=
							包含快元素

设置垂直水平居中

						position:absolute;
						
						margin:auto
						
						left:0;
						
						right:0;
						
						top:0;
						
						bottom:0;