<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#inner1{
width:400px ;
height: 400px;
background: red;
}
#inner2{
position: absolute;
left: 50%; /* 参照的是初始包含块的width */
width: 50%; /* 参照的是初始包含块的width */
height: 100%;
background: yellow;
}
/* 总结：
百分比参照于谁
width margin padding:包含块的width
height:包含块的height
left:包含块的width
top:包含块的height
*/
</style>
</head>
<body>
<div id="wrap">
<div id="inner1">
<div id="inner2"></div>
</div>
</div>
</body>
</html>
总结：
百分比参照于谁
width margin padding:包含块的width
height:包含块的height
left:包含块的width
top:包含块的height
2D中的transform:translate(50%,50%)里的百分比参照的是元素自身的宽高