关于网页自适应百分比单位的使用

许小珂最近在研究自适应布局，深入研究让许小珂确实对css的属性的理解的更深刻了。今天就来介绍一下网页自适应所使用的百分比单位，希望能解大家的迷惑。不正确的地方也请高手指点出来，许小珂不胜感激。

大家都知道百分比单位的取值不是相对于自身的，大部分都是相对于父元素。

一个我们最经常使用的宽度取值公式:目标宽度÷父元素宽度=结果(比例宽度)即当前元素的像素宽度÷当前元素的父元素的像素宽度=当前元素的百分比宽度。

不知道小伙伴有没有思考过，宽度的取值是相当于父元素的宽度，那么高度的取值是相当于父元素的哪个元素取值？这里许小珂总结了几点。希望能解决一点疑惑。

相对于父元素宽度取值的元素
[max/min-]width、margin、padding、left、right 等；
测试代码
HTML代码

<div class="container">
    <div class="content">我爱吃橙子</div>
</div>

css代码

.container{
    width: 600px;
    background-color: #eee;
    height: 200px;
    margin: 0 auto;
}
.content{
    width: 60%;
    background: #77A7F7;
    margin: 10%;
    padding: 20%;
    position: relative;
    left: 10%;
}

相对于父元素高度的取值的元素有：
[max/min-]height、top、bottom 等；

测试代码

HTML代码

<div class="container">
    <div class="content">许小珂</div>
</div>

css代码

.container{
    width: 600px;
    background-color: #eee;
    height: 200px;
    margin: 0 auto;
}
.content{
    width: 60%;
    height: 90%;
    background: #77A7F7;
    position: relative;
    top: 10%;
}

相对于继承字号
font-size 等；

相对于自身字号的：
line-height 等；

相对于自身宽高的：
transform: translate()、transform-origin、border-radius、background-size、zoom、clip-path 等；

特殊算法的：
background-position（方向长度 / 该方向除背景图之外部分总长度 * 100）、
filter 系列函数等；