div的width和height属性

最新推荐文章于 2024-10-10 17:36:40 发布

山外人家

最新推荐文章于 2024-10-10 17:36:40 发布

阅读量5.2k

点赞数

分类专栏：前端笔试

本文链接：https://blog.csdn.net/liyujia6636/article/details/52493979

版权

前端笔试专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>model</title>
</head>
<body>
	<!-- 600*300 -->
	<div style="width:600px; height:300px;">
		<!-- 600*300 width:auto是默认值，相对于父元素自适应宽度-->
		<div style="width:auto; height:100%;">
			<!-- 200*100 -->
			<div style="position:absolute; width:200px; height:100px;">
				Hello World!
			</div>
		</div>
	</div>
</body>
</html>

高度height在auto的情况下，如果没有内容，则值为0。子div脱离文档流后不会撑起父div宽高。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>document</title>
</head>
<body>
	<!-- 600*300 -->
	<div style="width:600px; height:300px;">
		<!-- 600*0 width:auto是默认值,height:auto也是默认值-->
		<div style="">
			<!-- 200*100 -->
			<div style="position:absolute; width:200px; height:100px;">
				Hello World!
			</div>
		</div>
	</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div style="width:600px; height:300px; margin:20px; padding:30px; border:2px solid black; ">
		<!-- width为auto时，width+border+padding+margin = 父元素内容区宽度 = 600px -->
		<div style="width:auto; height:100%; margin:20px; padding:20px; border:2px solid black;"></div>
	</div>

	<!-- 设置了box-sizing,width = 左右border + 左右padding + content -->
	<div style="width:600px; height:300px; margin:20px; padding:30px; border:2px solid black; box-sizing:border-box;">
		<!-- width为auto时，width+border+padding+margin = 父元素内容区宽度 = 536px 依然成立-->
		<div style="width:auto; height:100%; margin:20px; padding:20px; border:2px solid black;"></div>
	</div>

	<div style="width:600px; height:300px; margin:20px; padding:30px; border:2px solid black; box-sizing:border-box;">
		<!-- width和height的值为父元素内容区宽度536px、高度236px -->
		<div style="width:100%; height:100%; margin:20px; padding:20px; border:2px solid black;"></div>
	</div>
	
	<!-- 子div的border相当于父div的border的距离 = 父padding + 子div的margin，两者不会叠加 -->
	<div style="width:600px; height:300px; margin:20px; padding:30px; border:2px solid black;">
		<!-- width和height的值为父元素内容区宽度、高度 -->
		<div style="width:100%; height:100%; margin:20px; padding:20px; border:2px solid black;"></div>
	</div>
</body>
</html>