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