CSS属性值的百分比

　　经常能见到CSS属性值出现百分比，之前一直也没有整理过，现在为了以后不迷糊，遂整理一下。

百分比单位

1.乘以包含块的宽度：margin, padding, left, right, text-indent, width, max-width, min-width

　　其中padding和margin的百分比值无论是水平方向还是垂直方向均是相对于包含块宽度计算的！

　　text-indent的百分比值也是相对于当前元素的包含块宽度计算，而且注意要避免使用过大的负值来隐藏文字，因为会有很多弊端，设置得当即可。

2.乘以包含块的高度：top, bottom, height, max-height, min-height

　　关于包含块（containing block）的概念，不能简单地理解成是父元素。

1. 根元素(html元素)，被称为“初始包含块”，其等同于浏览器可视窗口大小。
2. 如果是static定位和relative定位，包含块由其最近的块容器祖先盒的content box边界组成。
3. absolute定位元素相对的包含块是最近的position不为static的祖先元素。
4. 对fixed定位的元素，它的包含块是”初始包含块”，一般为视口（viewport）。

　　但如果absolute定位没有设置left/right/top/bottom属性的话，此时称为无依赖的绝对定位元素，它相对于本身的位置定位。

　　绝对定位元素的height: 100%;是第一个具有定位属性值的祖先元素的高度，而height:inherit;则是单纯的父元素的高度继承。

3.乘以元素(border-box)的宽度：border-radius

4.乘以元素的字体大小：line-height

5.乘以元素的行高 ：vertical-align

　　vertical-align只能应用于内联元素和display值为table-cell的元素！

6.background-position中的百分比单位与CSS中其它百分比单位都不一样！具体见“前端配合设计师之background-position定位图片”这篇Blog

7.字体大小中的百分比 font-size 中的百分比值应该乘以元素所继承到的字体大小，也就是父元素的字体大小

　　这里再提一下常用的字体单位em和rem。

　　ex——相当于字体中的“x”的高度。

　　em——相当于字体“M”的大小，是1个方正宋体的大小，还是font-size的相对单位,因此line-height: 1.5em;就是和当前font-size相乘后的值。 　

　　rem——是根据html元素的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。

百分比的继承

　　如果使用数值作为line-height的属性值，那么所有子元素继承的都是这个值；如果使用百分比相对值作为属性值，那么所有的子元素继承的是最终的计算值。

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

   body{
	font-size: 14px;
	line-height: 1.5;/*子元素继承的line-height都是1.5*/
	line-height: 150%;/*子元素继承的line-height是14px*150%=21px*/
	line-height: 1.5em;/*子元素继承的line-height14px*1.5em=21px*/
}
h3,p{
   	margin: 0;
}
h3{
	font-size: 32px;
}
p{
	font-size: 20px;
}

HTML:

1
2

   <h3>标题呵呵哈哈哈</h3>
<p>内容啊啊啊啊啊</p>

　　所以一般推荐使用数值来操作line-height属性，比如1.5或15px，其中1.5默认就是1.5em，即相对于当前font-size的1.5倍。