學習一種矩形通過css定義寬高等比例自適應的方法
參考資料1：https://juejin.im/post/5b0784566fb9a07abd0e14ae
參考資料2：https://blog.csdn.net/u014607184/article/details/52661760
參考資料3：https://segmentfault.com/q/1010000010545728
1、原理：當用百分比定義高寬的時候以及padding的時候，padding和margin都是相對於父元素的寬度來計算的，我們可以利用這一屬性來實現我們的需求，通過設定元素的width:50%; padding_bottom:50%; height:0;，高度與padding_bottom的比例值也可設定為其他，此時高度由padding-bottom撐開並保持，百分比寬度，百分比padding
以下為示例，重點設定width，height：0，padding_bottom，參考：http://jsfiddle.net/luin/25BbH/7/
<div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div>
.item {
float: left;
width: 21%;
margin: 10px 2%;
height: 0;
padding-bottom: 33.98%;
background-color: #dbe0e4;
}2、修改為可設定外部寬度，以及可設定內部子元素的高度，參考：https://juejin.im/post/5b0784566fb9a07abd0e14ae
其中設定寬度需要在外層再套一個父元素，將寬度的控制交給這個父元素來做，如果不需要控制寬度，則該div可以取消。
為元素的height為 0，導致該元素裡面再有子元素的時候，就無法正常設定高度。所以我們需要用到position: absolute;此時設定子元素高度則利用子元素絕對定位absolute使得計運算元元素的百分比高度是相對於元素的(padding區域+內容區域=整個元素的高度)。
<div class="box">
<div class="scale">
<div class="item">
this is a demo;
</div>
</div>
<div class="scale">
<div class="item">
this is a demo;
</div>
</div>
<div class="scale">
<div class="item">
this is a demo;
</div>
</div>
<div class="scale">
<div class="item">
this is a demo;
</div>
</div>
</div>.box {
width: 90%;
background-color: blue;
}
.scale {
float:left;
width: 45%;
margin: 10px 2%;
padding-bottom: 56.25%;
height: 100px;
position: relative;
background-color: red;
}
.item {
width: 100%;
height: 100%;
background-color: aquamarine;
position: absolute;
}關於設定position: absolute; 後，再設定height，高度可以設定，如果沒有設定absolute，高度依然為0；
原因：
The percentage is calculated with respect to the height of the generated box's containing block.
未設定position: absolute; 的元素的百分比高度的計算是相對於已將產生的盒子的內容塊的高度，本文即是父元素，父元素高度為0，則該元素高度也為0，但是裡面有內容，內容有多少就撐開多高，不會佔據100%高度；
Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element.
設定 position: absolute; 的元素的百分比高度的計算是相對於父元素的padding區域+內容區域，所以設定height:100%後，該元素的高度撐滿了整個父元素，同時也可以設定其它百分比高度，同時可以有效撐開元素。
<body>
<div class="parent">
<div class="child"> this is child</div>
</div>
</body>body {
width: 200px;
height:200px;
}
.parent {
width:100%;
height: 100px;
padding-bottom:50px;
background-color: pink;
position: relative;
}
.child {
width:98%;
height:98%;
background-color: black;
position: absolute;
}不設定absolute結果：僅計算內容區域高度100px； 設定absolute結果，計算內容區域100px+padding區域50px=150px
3、如果自適應塊內只有單個元素，也可以使用偽類實現，即父元素的偽類定義width和padding_bottom，實現以父元素的寬度為基準計算偽類定義的百分比，然後將父元素空間撐開高度的功能，則同級別子元素共享該高度即可設定自己的高度；
<div class="parent">
<div class="child">
this is a pseudo_element</br>
this is a pseudo_element</br>
this is a pseudo_element
</div>
</div>.parent {
position: relative;
width: 50%;
background-color: blue;
}
.child {
position: absolute;
width:50%;
height:60%;
margin: 10px 2%;
overflow:hidden;
background-color: red;
}
.parent:after{
content: '';
display: inline-block;
width: 1px;
padding-top: 50%;
background-color: black;
}結果如下，改變瀏覽器大小時，藍色框和紅色框都會同步等比例適應大小：
