The absolute and relative elements set the difference in percentage width and height, absoluterelative

The absolute and relative elements set the difference in percentage width and height, absoluterelative

Generally, the space occupied by elements on the page includes magin border padding content. Previously, the percentage width and height of a child element were calculated based on the content value of the parent element. However, when the position of the sub-element is different, it is different.

Demo

Use the following demo for testing:

  <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;    }

The effect is as follows:

　　

The sub-element is calculated based on the content width of the parent element, 20% is 20px, And the offset is calculated based on the content (although this is 0)

If the sub-element position is absolute, the effect is as follows:

In this case, the percentage width of the child element is calculated as 28px Based on the padding + content value of the parent element, and the offset is also calculated based on the padding value.

Conclusion

When the percentage of absolute elements is calculated in width and heightContain block padding + content,For the offset reference, add the padding section.

When the percentage and width of relative elements are calculated, the value of the content containing the block is calculated.