在css中怎样设置能保证盒子绘制出来是正方形

html-css018

在css中怎样设置能保证盒子绘制出来是正方形,第1张

首先，把宽和高设为同样的固定值，则肯定是正方形，这个不用多说；

其次，如果是自适应的界面，需要用百分比来设置正方形的边长，则可以用css3的新增长度单位vw、vh来设置，1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。比如下面这个正方形的边长是屏幕宽度的50%：

<div style="width:50vw height:50vw background-color:#888"></div>

但是，这个方法要求浏览器支持css3，一些老的浏览器可能就不支持了。

<!DOCTYPE html>

<html>

<head>

    <meta charset="GBK">

    <title>test</title>

   <style type="text/css">

       *{

           box-sizing: border-box

           margin: 0

           padding: 0

       }

       .container{

           width: 90px

           height: 90px

       }

       .item{

           width: 30px

           height: 30px

           display: block

           float: left

       }

   </style>

</head>

<body>

<div class="container">

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

</body>

</html>

<script type="text/javascript">

    var items = document.querySelectorAll('.item')

    Array.prototype.slice.call(items, 0).forEach(function(item){

        item.style.backgroundColor = '#'+(~~(Math.random()*(1<<24))).toString(16)

    })

</script>