CSS-自适应正方形的实现

最新推荐文章于 2024-07-25 09:45:35 发布

小矮马

最新推荐文章于 2024-07-25 09:45:35 发布

阅读量1.4k

点赞数 1

文章标签： html5 css css3

本文链接：https://blog.csdn.net/qq_40007317/article/details/121563444

版权

本文介绍了三种实现网页上自适应正方形卡片布局的方法：1）利用百分比padding和position；2）伪元素after配合padding；3）使用CSS3的vw单位。详细展示了每种方法的代码实现和原理。

摘要由CSDN通过智能技术生成

1、效果展示

html结构如下：

<body>
    <div class="card-box">
        <div class="card"></div>
    </div>
</body>

2、实现方法

（1）设置垂直方向的padding

在 CSS 中，margin 和 padding 的百分比是相对于父元素的宽度来计算的，利用这个特性，将 padding-top 或者 padding-bottom 设置为与 width 相同的百分比，再将 height 设为 0，最后通过定位可以实现自适应的正方形。

.card-box {
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    position: relative;
}

.card {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: skyblue;
}

（2）伪元素after + padding

.card-box {
    width: 25%;
    position: relative;
}

.card-box::after {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.card {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: skyblue;
}

（3）使用vw

CSS3中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。vw 是相对于浏览器内部的可视区域（viewport）宽度的单位，1vw = 1% viewport width; 1vh = 1% viewport height。假设浏览器内部宽度为 1000px，那么 1vw = 10px。

.card-box {
    width: 25%;
    height: 25vw;
}

.card {
    width: 100%;
    height: 100%;
    background-color: skyblue;
}

小矮马

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
4
评论
CSS-自适应正方形的实现

1、效果展示 html结构如下：<body> <div class="card-box"> <div class="card"></div> </div></body>2、实现方法（1）设置垂直方向的padding在 CSS 中，margin 和 padding 的百分比是相对于父元素的宽度来计算...
复制链接

扫一扫