absolute和relative元素 設置百分比寬高的差別

本文轉載於:猿2048網站absolute和relative元素 設置百分比寬高的差別

　　通常元素在頁面所佔的空間包括：magin border padding content。之前一直覺得子元素設置百分比寬高都是以父元素的content值爲基準計算的。可是當子元素的position不一樣時，倒是不一樣的結果。

demo

　　用以下小demo測試：

<aside class="container">
    <div class="test">
    </div>
  </aside>

    .container{
      position: relative;
      margin: 100px auto;
      padding: 20px;
      height: 100px;
      width: 100px;
      border : 10px solid green;
      background-color: red;
    }

    .test{
      height: 20%;
      width: 20%;
      position: relative;
      top: 0;
      left: 0;
      background-color: #000000;
    }

　　效果以下：

　　

　　子元素以父元素的content寬度100px爲基準計算的20%爲20px 且是以content爲參考進行的偏移（雖然這裏爲0）

　　若子元素position爲absolute時，效果以下：

　　此時子元素的百分比寬度是以 父元素的 padding + content的值進行計算的 爲28px; 並且也是以padding爲基礎進行偏移的。

結論

　　absolute元素的百分比寬高 計算時按照的包含塊的 padding + content的值算的，偏移的參考也要加上padding那部分

　　relative元素的百分比寬高 計算時按照的包含塊的 content的值算的.