css 设置div基于父元素宽度的宽高相等的样式

1. 前言

在移动开发中，有时候需要设置一个宽高相等的div，并且为了使它能够适配更多的屏幕，于是需要让它的宽高和屏幕宽高成一定的比例。这里将提供一个css的解决方案，让一些后端开发不用再写繁琐的js。

2. 实现代码

html:

<!DOCTYPE html>
<html>

<head>
    <title>test</title>
</head>

<body>
    <div class="wrapper">
        <div class="box"></div>
    </div>
</body>
</html>

css: 

<style>
    .wrapper {
        position: relative;
        height: 0;
        padding-top: 80%;
    }

    .box {
        position: absolute;
        width: 80%;
        height: 100%;
        left: 10%;
        top: 0;
        border: 1px solid #ccc;
    }
</style>

效果：

 

 

这样我们就得到一个适应屏幕宽度的正方形，在实际应用中，我们还可以给这个box设置border-radius以及其他各种属性，得到一个更加酷炫的效果。现在我们来分析一下为什么这个css会实现这个效果，了解它的原理有助于我们能够更加得心应手的去修改它。

 

给wrapper设置height:0;padding-top:80%;会让wapper占据一个宽高比例为10：8的区域。有了这么一个区域是不是就感觉突然有点灵感了。是的，我们在给它的子元素的宽度再取一个百分比，就可以让它的宽高一样了。这里还有一个注意的，warpper的内部其实是没有高度，于是这个子元素就必须使用position:absolute，同时需要给wrapper加上position:relative。

 

 

作为一个前端小菜的我，快快努力学习吧，fitting。

 

posted @ 2019-10-31 23:37  一生舍给一座山  阅读(9250)  评论(0)  编辑  收藏  举报