您的位置：首页 > Web前端 > CSS

css margin，padding 百分比

2015-10-14 14:39 796 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航