绝对定位后元素的宽高如果用百分比表示的计算方法

最新推荐文章于 2022-11-05 23:11:37 发布

原创最新推荐文章于 2022-11-05 23:11:37 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

12 篇文章

订阅专栏

position

1 篇文章

订阅专栏

本文详细解析了CSS中使用百分比定义子元素宽高的规则。包括正常情况下的百分比计算方式，以及添加绝对定位后的计算变化，特别是父元素进行定位时的情况。

.big{
	padding-right: 100px;
	padding-bottom: 100px;
	width: 0;
	height: 0;
	background: yellow;			
	margin-top: 100px;
	margin-left: 100px;
}
.inner {
	width: 50%;
	height: 50%;
	background: black;			
}

<div class="big">
	<div class="inner">			
	</div>
</div>

正常情况下innerbox的宽高根据父元素的宽高进行百分比运算，即为0。

当innerbox添加了absolute绝对定位后，如果父元素且所有祖先元素没有进行定位，其宽高百分比将根据浏览器可视宽高进行计算。

.big{
	padding-right: 100px;
	padding-bottom: 100px;
	width: 0;
	height: 0;
	background: yellow;			
	margin-top: 100px;
	margin-left: 100px;
	position: relative;
}
.inner {
	width: 50%;
	height: 50%;
	background: black;	
	position: absolute;		
}

如果其父元素进行了定位，宽高则根据父元素的盒子宽高（content + padding）（不含border！）进行百分比计算。