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

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

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

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)spa

  若子元素position爲absolute時,效果以下:code

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

結論

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

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

相關文章
相關標籤/搜索