html自动适应页面的单位,关于网页自适应百分比单位的使用

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

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

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

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

相对于父元素宽度取值的元素

[max/min-]width、margin、padding、left、right 等；

测试代码

HTML代码

我爱吃橙子

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代码

许小珂

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 系列函数等；