欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

用css實現(xiàn)正方形div 的兩種方法

  發(fā)布時間：2019-04-23 15:29:08   作者：佚名   我要評論
這篇文章主要介紹了用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，不過會有塌陷的危險，所以，就這兩個夠用啦~~
 

總結(jié)

以上所述是小編給大家介紹的用css實現(xiàn)正方形div 的兩種方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

相關(guān)文章

最新評論