许小珂最近在研究自适应布局,深入研究让许小珂确实对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 系列函数等;
发表评论