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