在css中我们常常用到百分数来代替一些具体的值。
这样更方便的实现一些效果
但是问题来了!
这些百分比是以谁为依据的呢!!
其实百分数的这个参照值,不同的属性有不同的针对!!
这个其实没有什么原理可以讲。
就是当忘记了需要的时候,有个总结吧!
上表格:
情景 | 百分数参照 |
---|---|
定位的left、right | 包含块的宽度 |
定位的top、bottom | 包含块的高度 |
———— | ———— |
元素的宽 width | 包含块的宽度 |
元素的高 height | 包含块的高度 |
———— | ———— |
边距margin padding (不分上下左右) | 包含块的宽度 |
———— | ———— |
圆角 border-radius:10% 20% | 自身块的宽/高 |
———— | ———— |
位移 translate(50%,30%) | 自身块的宽/高+方向内边距+方向边框 |
———— | ———— |
字体大小 font-size | 继承过来的绝对大小的值 ,不是相对大小 |
———— | ———— |
行高 line-height | 字体大小,如果没有设置继承过来的字体绝对大小的值 |
需要注意的点:
1、如果设置元素的宽为百分数,包含块的宽必须明确定义。否则置为auto。但是根元素总会生效的,他的包含块是视口。同理高度也一样!
2、边距的百分数,一律参照包含块的宽度。也就是说margin-top:20%,它是宽度的百分之十,不是高度的百分之十。这个可能和预期不同。
3、如果你不知道什么是包含块,可以看下定位相关知识,有各种情况的包含块!!
4、如果你的元素没有定位,快速的告诉你:包含块就是离他最近的祖先块级元素、td单元格或者是行内块inline-block!
上代码:
<div class = 'outer'>
<div class = 'middle'>
<div class = 'inner'>
123123123
</div>
<div>
</div>
<style>
.outer{
width:200px;
height:100px;
font-size:20px;
}
middle{
//测宽高
width:50%; //实际:outer的200*0.5 = 100px
height:50%; //实际:outer的100*0.5 = 50px
//测边距
margin-top:10%; //实际:outer的200*0.1 = 20px
margin-left:10%; //实际:outer的200*0.1 = 20px 不是outer的100*0.1 也不是middle的100*0.1或50*0.1
padding-top:5%; //实际:outer的200*0.05 = 10px
padding-left:5%; //实际:outer的200*0.05 = 10px 不是outer的100*0.05 也不是middle的100*0.05或50*0.05
//测圆角
border-radius:20% 30%; //实际 宽度方向:middle的宽100*0.2 = 20px 高度方向:middle的高50*0.3 = 15px
//测位移
border:1px red solid;
transform:translate(10%,10%);
//实际:宽度方向:middle的(宽100+内边距10+边框1*2)*0.1 = 56px
//实际:高度方向:middle的(高50+内边距10+边框1*2)*0.1 = 31px
//注意这里的padding由于我们每个方向只设置了一个,所以没有加。
//实际上内边距应该算该方向的两个内边距的和
//测字体
font-size:50% //实际:继承字体20*0.5 = 10px
line-height:40px;
}
.inner{
//测行高
line-height:50%;//实际:继承字体middle10*0.5 = 5px(如果自己设置了字体就用自己的,总之是依照字体的基准) 不是middle行高40*0.5
}
<style>