padding的使用技巧(持续更)

来源:互联网 发布:算法帝国 原版 编辑:程序博客网 时间:2024/05/22 16:03

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

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

最终效果:
这里写图片描述

原创粉丝点击