學習一種矩形通過css定義寬高等比例自適應的方法

參考資料1：

參考資料2：

參考資料3：

1、原理：當用百分比定義高寬的時候以及padding的時候，paddingmargin相對于父元素的寬度來計算的，我們可以利用這一屬性來實現我們的需求，通過設定元素的

width:50%; padding_bottom:50%; height:0;

.item

2、修改為可設定外部寬度，以及可設定內部子元素的高度，參考：

height

absolute

this is a demo;
this is a demo;
this is a demo;
this is a demo;

.box .scale .item

關於設定position: absolute; 後，再設定height，高度可以設定，如果沒有設定absolute，高度依然為0；

原因：未設定position: absolute; 的元素的百分比高度的計算是相對於已將產生的盒子的內容塊的高度，本文即是父元素，父元素高度為0，則該元素高度也為0，但是裡面有內容，內容有多少就撐開多高，不會佔據100%高度；

設定 position: absolute; 的元素的百分比高度的計算是相對于父元素的padding區域+內容區域，所以設定height:100%後，該元素的高度撐滿了整個父元素，同時也可以設定其它百分比高度，同時可以有效撐開元素。

this is child

body .parent .child

不設定absolute結果：僅計算內容區域高度100px；設定absolute結果，計算內容區域100px+padding區域50px=150px

3、如果自適應塊內只有單個元素，也可以使用偽類實現，即父元素的偽類定義width和padding_bottom，實現以父元素的寬度為基準計算偽類定義的百分比，然後將父元素空間撐開高度的功能，則同級別子元素共享該高度即可設定自己的高度；

this is a pseudo_element this is a pseudo_element this is a pseudo_element

.parent .child .parent:after

結果如下，改變瀏覽器大小時，藍色框和紅色框都會同步等比例適應大小：