本文首发于知乎：https://www.zhihu.com/people/xiao-chong-10-60
布局中，常见单位，除了px,还有百分比。那么写不同地方的百分比代表什么呢？
看一个选择题：
margin-top:50%，这里的百分比是参考谁的?
A、盒子自身的宽
B、盒子自身的高
C、父盒子的宽
D、父盒子的高
你的答案是？心里默念，答案解析在文末。
1.参考父级盒子大小的情况
width和height都会参考父级盒子的宽和高。准确的讲，会参考父盒子盒子模型里内容的宽和高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 600px;
height: 400px;
padding: 100px;
background-color: skyblue;
}
.son {
/* 子盒子的大小是：300px*200px。跟100px的padding没关系 */
width: 50%;
height: 50%;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
子绝父相，绝对定位里的子盒子，边偏移left，top等也会参考父盒子的大小，具体来讲，水平方向的left,right值会参考父盒子的宽，竖直方向的top,bottom会参考父盒子的高。
2.参考盒子自身大小的情况
圆角边框border-radius和2d转换位移的translate（）函数里的百分比，参考盒子自身的大小。
圆角边框border-radius有8个值，横向上参考盒子自身的宽，纵向上参考盒子自身的高。
参见下面的例子：最终的结果是一个椭圆。如果只是参考宽，那么结果是横向和纵向上的圆角值相等，会是一个圆角矩形而不是椭圆。实际上，这个椭圆的长轴就是宽，纵轴是高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 200px;
background-color: skyblue;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.盒子模型里的margin,padding会参考父盒子的宽
margin,padding写百分比，会参考父盒子的宽，跟父盒子的高没关系。这点确实匪夷所思。
回答文章前面提出的问题：答案是margin-top:50%,这个百分比是参考父盒子的宽，答案是C。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 600px;
height: 200px;
background-color: skyblue;
}
.son {
margin: 50%;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。