在css屬性中，很多屬性的取值可以是百分比，比如：width、height、padding、margin、font-size、line-height、background-position等，那麼這些百分比值的計算是相對於誰呢？

先來看幾個例子，分別是正常文件流中、浮動情況下和定位情況下。

正常文件流中：

<div class="parent">
    <div class="child">
        css百分比在正常文件流的體現
    </div>
</div>

   .parent {
            width: 500px;
            height: 300px;
            padding:50px;
            background: #999;
            margin-left:50px;
            font-size: 15px;
            line-height:30px;
            border: 1px solid #808080;
    }
    .child {
            width: 50%;
            height: 20%;
            padding-left: 10%;
            margin-left:10%;
            border:2px solid black;
            font-size: 150%;
            line-height: 150%;
            background: orange;
     }
 

此時，class為parent的div元素的content-box的寬度、高度值分別為500px、300px；padding-box的寬度、高度分別為600px、400px，如下圖所示：

當為child元素設定float為left後，結果與上述一樣，即浮動下各屬性百分比的計算是和正常文件流中一樣的。

當為元素設定定位後，

      .parent {
            width: 500px;
            height: 300px;
            padding:50px;
            background: #999;
            margin-left:50px;
            font-size: 15px;
            line-height:30px;
            border: 1px solid #808080;
            position: relative;
        }
        .child {
            width: 50%;
            height: 20%;
            padding-left: 10%;
            margin-left:10%;
            border:2px solid black;
            font-size: 150%;
            line-height: 150%;
            background: orange;
            position:absolute;
            top:20%;
            left:20%;
        }
 

子元素的寬度、高度、內外邊距等屬性值變化如下所示：

由上述三個例子，總結如下：

一、font-size

當前的字型大小等於100%

二、line-height

line-height的計算值就是當前字型的值乘以該百分比。注意line-height取值為數值或者百分比的差異，此處不細緻講解。

三、width

正常文件流中和設定浮動的情況下，相對於父元素content-box的寬度；絕對定位時，相對於包含塊padding-box的寬度。

四、height

height對百分比也是支援的，但是其和width還是有一個明顯的區別：當父元素width屬性為auto時，子元素寬度仍然可以使用百分比設定。但是對於height，只要子元素還是在正常文件流當中的，如果父元素的height屬性為auto，則子元素height設定為百分比會被忽略。規範中指出：如果包含塊的高度沒有顯式指出（即高度由內容決定），並且該元素不是絕對定位，則計算值為auto。而auto*100/100=NaN。所以，若要高度的百分比設定有效，需要如下設定：

html,body{
  height:100%
}

上述高度計算，都是對於正常流

五、margin、padding

無論是垂直或水平方向，均是相對於父元素的寬度，正常文件流中和設定浮動的情況下，相對於父元素content-box的寬度；絕對定位時，相對於包含塊padding-box的寬度。

六、background-position

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

 top,bottom設定百分比定位是按包含塊padding-box的高度來計算的，同樣left,right,設定百分比定位是按包含塊padding-box的寬度來計算的。