padding的使用技巧（持续更）

原创于 2017-08-06 08:28:01 发布 · 842 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

11 篇文章

订阅专栏

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

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

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

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;
        }