2015 年 12 月 1 日

CSS中的百分比值

Author : lovecicy

一、介绍

CSS中有很多的属性可以有百分比值，而这些百分比值所相对的却各不相同，本文就来总结下这些拥有百分比值的CSS属性的百分比值是相对于谁来计算的。

首先有一个概念需要交待，那就是containing block，这里将其翻译成包围块。许多元素百分比值的相对值是根据包围块来计算的，因此对于包围块的定义，就非常重要了。包围块可以理解为一个包围元素的长方形，而包围块的定义对不同元素来说各不相同。

根元素的包围块叫做初始包围块，和viewport有同样的尺寸。其他元素的包围块取决于元素的定位值：

• static/relative: 包围块为祖先元素中最近的display值为block/inline-block/list-item/run-in/table/table-cell的元素的内容区域

• absolute: 包围块为节点树中最近的定位元素的包括padding的内容区域，定位元素即POSITION属性值为absolute、fixed或relative的元素

• fixed: 包围块为viewport，即可视区域

二、来看看都有哪些百分比值

知道了包围块的定义，我们再来看看哪些属性有百分比值：

1. background-size
   

   background-size: 50%; | background-size: 50% 50%;

   background-size的百分比属性，可以有两个值，分别是宽度和高度，如果只有一个值，则表示高度为auto。两个值分别相对于背景定位区域的宽和高。背景定位区域由background-origin值决定，默认是内容区域加上内边距的值。注意background-size是对背景图片生效的。

2. background-position

   background-position: 50%; | background-position: 50% 50%;

   background-position也是对背景图片的定位，默认值为0% 0%，如果只提供一个值，则background-position-y默认为50%。
   background-position同样取决于背景定位区域的宽和高，同时还取决于background-size的取值，其计算方法为:

       x = (背景定位区域宽度 - background-size-x)*percentage-x;
       y = (背景定位区域高度 - background-size-y)*percentage-y;
       

3. top, bottom

   top: 10% | bottom: 50%;

   top和bottom值对定位元素生效，如果元素是相对定位，则top和bottom指定的是元素离正常位置的距离；如果元素是绝对定位或者固定定位，则top和bottom值指定的是离包围块的距离。
   固定定位和绝对定位元素的top和bottom的百分比值都是相对于距离元素最近的定位元素的高度的百分比值
   相对定位元素的top和bottom的百分比值都是相对于父元素高度的百分比值

4. left, right

   left: 10%; | right: 10%;

   left和right值同top和bottom类似，同样是对定位元素生效。同样的，如果元素是相对定位，则left和right指定的是元素离正常位置的距离；如果元素是绝对定位或者固定定位，则left和right值指定的是离包围块的距离。
   固定定位和绝对定位元素的left和right的百分比值都是相对于距离元素最近的定位元素的宽度的百分比值
   相对定位元素的left和right的百分比值都是相对于父元素宽度的百分比值

5. font-size

   font-size: 150%

   font-size的百分比值指定了该元素的字体大小相对于父元素的字体大小的百分比。比如父元素的字体大小为12px，子元素的字体大小设置为font-size: 150%;，则子元素的字体大小为12*1.5=18px。

6. height

   hegiht: 50%;

   height指定了元素内容区域的高度，height的百分比值是相对于元素的包围块高度，如果包围块没有显式地指定高度，并且当前元素不是绝对定位或者固定定位，则该值计算为auto。如果元素为绝对定位或固定定位，则元素的高度相对于DOM树中距离最近的定位元素的高度计算。

7. width

   width: 50%;

   width指定了元素内容区域的宽度，width的百分比值是相对于元素的包围块宽度计算。

8. line-height

   line-height: 150%;

   line-height用于指定行框的高度，对于块级元素，line-height指定了元素内行框的最小高度；对于非替换行内元素，line-height指定了行框的高度；对于替换行内元素（如按钮，INPUT），line-height无效¹。line-height的百分比值相对于元素自身的字体大小计算。

9. margin

   margin: 50% 20%;

   margin的百分比值相对于包围块的宽度计算，注意，margin-top和margin-bottom的值也是相对于包围块的宽度计算，而不是包围块的高度。

10. padding

    padding: 50% 20%;

    同margin类似，padding的百分比值也是相对于包围块的宽度计算。

11. max-height/min-height

    max-height: 150%; | min-height: 50%;

    max-height和min-height是相对于包围块的高度来计算。如果包围块的高度未指定，并且当前元素不是绝对定位或者固定定位，则max-height或min-height的值会被当做none来对待。

12. max-width/min-width

    max-width: 150%; | min-width: 50%;

    max-width和min-width是相对于包围块的宽度来计算。

13. text-indent

    text-indent: 50%;

    text-indent的百分比值相对于包围块的宽度计算。

14. vertical-align

    vertical-align: 30%;

    vertical-align相对于元素自身的line-height值计算。将元素的基线对齐于父元素基线为起点的指定高度，允许负值。

三、总结

总结一下，我们常用的margin/padding/width/left/right是相对于包围块的宽度来计算，和包围块的高度完全没关系；而像height/top/bottom则是相对于包围块的高度来计算。为了方便记忆，我们可以把margin/padding放在一组，只相对于包围块的宽度来计算，把left/right/top/bottom/width/height放在一组，它们则相对于包围块的相应维度（宽度或高度）来计算

参考：
1. MDN
2. Sitepoint