用css實現(xiàn)正方形div 的兩種方法
發(fā)布時間：2019-04-23 15:29:08 作者：佚名 
我要評論
我要評論這篇文章主要介紹了用css實現(xiàn)正方形div 的兩種方法,需要的朋友可以參考下
目標：實現(xiàn)一個正方形，這個正方形邊長等于
方法一：使用單位vw， （ps我覺得這個是最簡單的方法）
html結構也很簡單，只有一個div即可
<html>
<body>
<div class="square">
</div>
</body>
</html>
.square{
width: 50vw;
height: 50vw;
background: blue;
}
方法二： 使用padding-bottom
要點：
1.height: 0， 內(nèi)容會溢出到padding里，不用擔心~~
2.padding-bottom 值設置為百分比時候，相對于包含塊的寬度。
3.需要設置包含塊
html結構：
<html>
<body>
<div class="container">
<div class="square">
</div>
</div>
</body>
</html>
css:
*{
margin: 0;
}
/* 設置撐滿頁面可見區(qū)域 */
.container{
height: 100vh;
width: 100vw;
background: palegoldenrod;
}
.square{
width: 50%; /* 相對與container的width */
padding-bottom: 50%; /* 相對與container的width */
background: palegreen;
}
行了吧，兩種就可以了，你也可以使用margin，不過會有塌陷的危險，所以，就這兩個夠用啦~~
總結
以上所述是小編給大家介紹的用css實現(xiàn)正方形div 的兩種方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
css3 圖片圓形顯示 如何CSS將正方形圖片顯示為圓形圖片布局
這篇文章主要為大家介紹了正方形圖片使用CSS如何實現(xiàn)成圓形布局，不使用PS軟件處理，直接使用DIV CSS布局如何實現(xiàn)圖片圓形化，具體實現(xiàn)過程請看下文2014-10-10
這篇文章主要介紹了CSS實現(xiàn)一個自適應的正方形的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2020-11-23