目標：實現一個正方形，這個正方形邊長等於 方法一：使用單位vw， （ps我覺得這個是最簡單的方法） html結構也很簡單，只有一個div即可 方法二： 使用padding-bottom 要點： html結構： css: 行了吧，兩種就可以了，你也可以使用margin，不過會有塌陷的危險，所以，就這兩 ...
目標：實現一個正方形，這個正方形邊長等於
方法一：使用單位vw， （ps我覺得這個是最簡單的方法）
html結構也很簡單，只有一個div即可
<html> <body> <div class="square"> </div> </body> </html>
.square{ width: 50vw; height: 50vw; background: blue; }
方法二： 使用padding-bottom
要點：
- height: 0， 內容會溢出到padding里，不用擔心~~
- padding-bottom 值設置為百分比時候，相對於包含塊的寬度。
- 需要設置包含塊
html結構：
<html> <body> <div class="container"> <div class="square"> </div> </div> </body> </html>
css:
*{ margin: 0; } /* 設置撐滿頁面可見區域 */ .container{ height: 100vh; width: 100vw; background: palegoldenrod; } .square{ width: 50%; /* 相對與container的width */ padding-bottom: 50%; /* 相對與container的width */ background: palegreen; }
行了吧，兩種就可以了，你也可以使用margin，不過會有塌陷的危險，所以，就這兩個夠用啦~~
