這篇文章主要介紹了怎么用css實現正方形div，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
目標：實現一個正方形，這個正方形邊長等于
方法一：使用單位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”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
