padding的使用技巧（持续更）

最新推荐文章于 2025-03-03 09:10:08 发布

原创最新推荐文章于 2025-03-03 09:10:08 发布 · 861 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的技巧，通过设置盒子的宽度为100%，高度为0，并使用padding-top属性来创建一个与父元素宽度相等的正方形盒子。

创作一个和宽度相等的正方形盒子

html代码：

 <div class="box-wrapper">
      <div class="box">
      </div>
  </div>

css代码：

    .box-wrapper{
            width: 200px;
            background:yellow;
        }
        .box{
            width: 100%;
            height: 0;
            padding-top: 100%;
            background: rgba(0,0,0,.6);
            position: relative;
        }