css实现正方形div的3种方式

最新推荐文章于 2025-06-08 20:34:32 发布

原创最新推荐文章于 2025-06-08 20:34:32 发布 · 3.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了CSS3中vw单位的应用，以及如何通过padding-bottom属性和伪元素实现等宽高比的布局技巧。这些方法能够帮助开发者更好地进行响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS3 vw 单位
1vw = 1% viewport width

<div class="vw">hello,viewport</div>
.vw {
        width: 50%;
        height: 50vw;
        background: #ccc;
    }

2.padding-bottom

 <div class="placeholder"></div>
 .placeholder {
        width: 100%;
        padding-bottom: 100%;/* padding百分比相对父元素宽度计算 */
        height: 0;//避免被内容撑开多余的高度
    }

3,padding-bottom+:after+absolute

<div class="square">
        <div class="content">
            Hello!
        </div>
</div>
    .square {
        width: 50%;
        background: #ccc;
    }

    .square:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    .content {
        position: absolute;
        width: 100%;
        height: 100%;
    }