1. 定位元素
left & right & top & bottom
-
子元素没有设置定位，其尺寸设置百分比参照的对象是：该子元素的父级元素；如果父元素未设置高度，则以浏览器高度为准。
-
子元素绝对定位后，其尺寸设置为百分比参考的对象是: 该子元素设置了定位（这里的定位包括绝对定位，相对定位和固定定位）的祖先元素（一层一层往上找，直到找到定位的祖先元素停止）。若没有找到目标，则参照的是浏览器窗口
-
定位元素的宽高百分比标准是最近的定位的父元素的宽高（这里的定位包括绝对定位，相对定位和固定定位; 一层一层往上找，直到找到定位的祖先元素停止），就算父元素没有明确设置高度，是被内容撑开的，则定位子元素依然参考父元素的宽高;若没有找到目标，则参照的是浏览器窗口。
2. width和height
-
width和height的百分比计算是基于包裹它的父元素的宽和高来计算 -
父元素没有明确的高度定义(指的是不定义height或者使用min/max-height这种，都属于不明确的高度定义)，并且子元素使用百分比并且不是绝对定位，那么这时候的百分比等同于auto
3. margin和padding
margin和padding的百分比参考是：参考父对象width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>定位盒子水平居中</title>
<style>
.cube-container{
border: 1px dotted #ee3979;
width: 120px;
height: 100px;
}
.cube{
background-color: #98d4fb;
height: 70%;
/* 以父盒子的width120为参考对象：6px 18px */
margin: 5% 15%;
/* 以父盒子的width120为参考对象：0 12px */
padding: 0 10%;
width: 50%
}
</style>
</head>
<body>
<div class="cube-container">
<div class="cube">
</div>
</div>
</body>
</html>
4. transform:translate
translate的百分比参考对象是其自身元素的宽度+边框+内边距或者高度+边框+内边距；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>定位盒子水平居中</title>
<style>
.border-container {
width: 100px;
height: 100px;
border: 1px dotted #666;
}
.cube {
padding: 10px 10px;
width: 50px;
height: 30px;
transform: translateX(50%) translateY(30%);
border: 1px dotted #999;
}
.cube1 {
width: 50px;
height: 30px;
transform: translateX(50%) translateY(30%);
border: 1px dotted #999;
}
</style>
</head>
<body>
<div class="border-container">
<div class="cube"></div>
</div>
<div class="border-container">
<div class="cube1"></div>
</div>
</body>
</html>
