CSS属性中经常出现的百分比

起源：一道面试题（猫眼电影）

问题：css中的单位都有哪些？可以取百分数的单位有哪些？其中margin-top取百分数时是相对于谁来计算的？

回答：

（1）css中的单位：CSS规定了两种类型的单位，一种是绝对单位，另一种是与其他属性挂钩的相对单位。

绝对单位：in-英寸；cm；mm；pt-磅；pc-pica
相对单位：em-与元素字号挂钩；ex-与元素字体的“x高度”挂钩；rem-与根元素字号挂钩；px-与CSS像素挂钩；%-另一属性值的百分比。

（2）CSS中可以取百分比的样式单位

1. 定位：top,right,bottom,left;

2. 盒模型：width,height,margin,padding;

3. 背景：backgroud-position,background-size;

4. 文本：text-indent;

5. 字体：font-size;

（3）margin-top是相对于父级元素的width属性（不是height属性）来计算的。

总结：CSS中属性取值百分比

1.百分比单位

• 基于包含块的宽度来计算的属性：margin，padding，width，max-width，min-width，left，right，text-indent.

注意

1.margin-top，margin-bottom，padding-top和padding-bottom都是基于包含块的width属性来计算的。
2.text-indent：定义基于父元素宽度的百分比的缩进。当外层不指定宽度时，ie下会基于浏览器宽度。

• 基于包含块的高度来计算的属性：top，bottom，height，max-height，min-height

注意

关于包含块（containing block）的概念，不能简单地理解成是父元素。如果是静态定位和相对定位，包含块一般就是其父元素。但是对于绝对定位的元素，包含块应该是离它最近的 position 为 absolute、relative、或者 fixed 的祖先元素。对固定定位的元素，它的包含块是视口（viewport）。

• 基于当前字体大小来计算的属性：line-height

关于line-heigt的详细解释，请移步这里css行高line-height的用法与计算原理

• 基于line-height来计算的属性：vertical-align

• background-position：背景图像的位置，分别设置水平方向和垂直方向上的两个值，如果使用百分比，那么百分比值会同时应用于元素和图像。例如 50% 50% 会把图片的（50%, 50%）这一点与框的（50%, 50%）处对齐，相当于设置了 center center。同理 0% 0% 相当于 left top，100% 100% 相当于 right bottom。

• backgroud-size:设置背景图像的大小。兼容IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。

注意

background-size还可以取预定义的值：contain，cover，auto。

2.百分比继承

如果某个元素设置了百分比的属性，则后代元素继承的是计算后的值。例如：

p { font-size: 10px } p { line-height: 120% } / 120% of 'font-size' / 那么p的子元素继承到的值是 line-height: 12px，而不是 line-height: 120%。 

补充：

关于css中的继承：

• 样式层叠与继承是样式表中两个关键概念，浏览器会根据层叠和继承规则确定显示一个元素时各种样式属性采用的值。

• 并非所有的CSS属性都可以继承，这这方面有条经验可以参考：与元素外观（文字，颜色，字体等）相关的样式会被继承；与元素在页面上的布局相关的样式不会继承。此外，还可以使用inherit强行实施继承。

参考

1.HTML5权威教程（4.2.3节）
2.css样式可以使用百分比的属性--总结
3.浅析CSS 属性之中经常出现的百分比