在CSS属性中，很多属性的取值可以采用百分比制，比如：width、height、padding、margin、font-size、line-height、background-position等，那么他们的计算依据是什么呢？

根据相关实例测试，现得出以下结论：

  • font-size

    当前的字体大小等于100%

  • line-height

    line-height的计算值就是当前字体的值乘以该百分比。

  • width

    正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度。

  • height

    height对百分比也是支持的，但是其和width还是有一个明显的区别：当父元素width属性为auto时，子元素宽度仍然可以使用百分比设置。但是对于height，只要子元素还是在正常文档流当中的，如果父元素的height属性为auto，则子元素height设置为百分比会被忽略。规范中指出：如果包含块的高度没有显式指出（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto。而auto*100/100=NaN。经常我们希望body的高度为100%，那么我们需要做如下设置：

    1
    2
    3
    html,body{
    	height:100%
    }

  • margin、padding

    无论是垂直或水平方向，均是相对于父元素的宽度，正常文档流中和设置浮动的情况下，相对于父元素content-box的宽度；绝对定位时，相对于包含块padding-box的宽度。

  • 定位元素的left/right/bottom/top百分比值

    top,bottom设置百分比定位是按包含块padding-box的高度来计算的，同样left,right,设置百分比定位是按包含块padding-box的宽度来计算的。

  • background-position

    使用关键字和百分比的情况下，设定的值同时应用于元素和图片，换句话说，如果设定了20% 20% ,则外部元素水平20%的位置和图片水平20%的位置对齐、外部元素垂直20%的位置和图片垂直20%的位置对齐。设背景的区域高度为containerY、宽度为containerX，背景图片的宽度为imgX、高度为imgY，针对对齐点，计算出图片相对于左上角：

    1
    2
    3
    4
    5
    6
    top: containerY * 20% - imgY * 20% = (containerY - imgY) * 20%;
    left: containerX * 20% - imgX * 20% = (containerX - imgX) * 20%;

    换算过程为：
    (设置背景的区域高度 - 背景图的高度) * 百分比（正或负值），如：
    (100 - 200) * (-50%) = 50px。