css百分比参照总结
2019-06-04 本文已影响0人
baxiamali
参照父元素宽度的元素：padding margin width text-indent
特别注意：`margin-top:20%;` 为父元素宽度的的20%。
参照父元素高度的元素：height
参照父元素属性: font-size line-height
特别：top bottom left right
相对定位的时候，参照的是父元素的内容区域的高度与宽度，而绝对定位的时候参照的是最近的定位元素包含padding的高度与宽度。
即：相对定位只参照内容宽度，绝对定位参照padding box。
<style>
*{
padding: 0;
margin: 0;
/* box-sizing: border-box; */
}
.outer{
position: relative;
width: 100px;
height: 100px;
background: #ccc;
border:20px solid grey;
margin: 120px;
padding: 20px;
}
.inner-relative{
position: relative;
width: 100px;
height: 100px;
background: #ccc;
border:20px solid grey;
top:100%;
left: 100%;
background: greenyellow;
border: 10px solid yellow;
z-index: 1;
}
.inner-absolute{
position: absolute;
width: 100px;
height: 100px;
background: #ccc;
border:20px solid grey;
top:100%;
left: 100%;
background: greenyellow;
border: 10px solid yellow;
z-index: 1;
}
#border{
width: 100%;
height: 200px;
border-bottom:1px solid #ccc;
}
</style>
<body>
<div class="outer">
<div class="inner-relative"></div>
</div>
<div class="outer">
<div class="inner-absolute"></div>
</div>
</body>
image.png
