css margin，padding 百分比

最新推荐文章于 2022-11-14 13:37:51 发布

浅醉樱花雨

最新推荐文章于 2022-11-14 13:37:51 发布

阅读量932

点赞数

分类专栏： HTML5 文章标签： css margin top 百分比

本文链接：https://blog.csdn.net/u013314786/article/details/49123307

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

margin，padding的百分比都是相对于最近的父级容器的宽度 width 进行计算的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百分比</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.father {
			width:500px;			
			height: 100px;
			background: green;
		}

		.child {
			display: box;
			width: 300px;
			height: 100px;
			margin-left: 20%;
			padding-left: 20%;
			background: pink;
			box-sizing: border-box;
		}

		.child span {
			background: red;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">
			<span>child</span>
		</div>
	</div>
</body>
</html>

猜测主要原因：

1、为了统一比例，如果宽和高比例相同（比如都是10%），结果页面效果却显示的一个有100px, 一个有200px那么大，岂不是太糟糕；

2、页面排版习惯。我们都习惯于上下滑动页面，不习惯左右滑动，所以页面通常设计成左右刚好铺满，上下可拖动，高度不固定。这样用宽度做参照就比较容易控制

浅醉樱花雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css margin，padding 百分比

margin，padding的百分比都是相对于最近的父级容器的宽度 width进行计算的百分比 * { margin: 0; padding: 0; } .father { width:500px; height: 100px; background: green; } .child { display: bo
复制链接

扫一扫

专栏目录