padding的使用技巧（持续更）

最新推荐文章于 2024-10-09 19:16:55 发布

景洪在编程

最新推荐文章于 2024-10-09 19:16:55 发布

阅读量842

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/github_38861674/article/details/76737999

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