CSS中的百分数到底是以谁为基准的？——场景整理

在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>