css画个正方形

方式1

/* 兼容性好 */
.use-transform {
    width: 10%;
    height: 0;
    padding-bottom: 10%;
    border: 1px solid #000;
}

方式2

使用 vw: 为什么不用%？ % 是相对于父元素的大小设定的比率，body默认的宽度为视窗的宽度，没有内容时高度为0，而vw、vh 是视窗大小决定的，不取决于内容。vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度。如下图：

/* 简单方便，兼容性 */
.demo {
    width: 10%;
    height: 10vw;
    border: 1px solid #000;
}

html

    <div class="use-transform">
        正方形
        正方形
        正方形
        正方形
        正方形
        正方形
        正方形
    </div>
    <div class="demo">
        正方形
        正方形
        正方形
        正方形
        正方形
        正方形
        正方形
    </div>

效果

参考

css单位