目標：實現一個正方形，這個正方形邊長等于
方法一：使用單位vw， （ps我覺得這個是最簡單的方法）
html結構也很簡單，只有一個div即可
<html><body> <div class="square"> </div></body></html>
.square{ width: 50vw; height: 50vw; background: blue; }方法二： 使用padding-bottom
要點：
1.height: 0， 內容會溢出到padding里，不用擔心~~
2.padding-bottom 值設置為百分比時候，相對于包含塊的寬度。
3.需要設置包含塊
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，不過會有塌陷的危險，所以，就這兩個夠用啦~~
總結
以上所述是小編給大家介紹的用css實現正方形div 的兩種方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
