怎么用css實現(xiàn)正方形div

發(fā)布時間：2021-03-19 09:46:01 來源：億速云閱讀：174 作者：小新欄目：web開發(fā)

這篇文章主要介紹了怎么用css實現(xiàn)正方形div，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

目標(biāo)：實現(xiàn)一個正方形，這個正方形邊長等于

方法一：使用單位vw，（ps我覺得這個是最簡單的方法）

html結(jié)構(gòu)也很簡單，只有一個div即可

<html>
<body>
    <div class="square">
   </div>
</body>
</html>

.square{
  width: 50vw;
  height: 50vw;
  background: blue;  
}

方法二：使用padding-bottom

要點：

1.height: 0，內(nèi)容會溢出到padding里，不用擔(dān)心~~

2.padding-bottom 值設(shè)置為百分比時候，相對于包含塊的寬度。

3.需要設(shè)置包含塊

html結(jié)構(gòu)：

<html>
<body>
    <div class="container">
       <div class="square">
       </div>
   </div>
</body>
</html>

css:

*{
        margin: 0;
    }
    /* 設(shè)置撐滿頁面可見區(qū)域 */
    .container{
        height: 100vh; 
        width: 100vw;
        background: palegoldenrod;
    }
    .square{
        width: 50%; /* 相對與container的width */
        padding-bottom: 50%;  /* 相對與container的width */
        background: palegreen;
    }

行了吧，兩種就可以了，你也可以使用margin，不過會有塌陷的危險，所以，就這兩個夠用啦。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用css實現(xiàn)正方形div”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

怎么用css實現(xiàn)正方形div

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽