css实现正方形（js待补充）

最新推荐文章于 2022-11-26 14:56:53 发布

原创最新推荐文章于 2022-11-26 14:56:53 发布 · 728 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

88 篇文章

订阅专栏

本文介绍了如何使用CSS实现一个子div，使其边长等于父div宽度的一半。方法包括利用vw单位和通过设置padding-bottom比例来实现。当父div为window时，可以使用1vw等于1%视口宽度的特性；当父div尺寸未知时，可以通过设定宽度和padding-bottom来创造一个正方形效果。

实现一个子div，要求边长等于父div宽度的一半
一、若父div是window的话，可以用vm单位（1vw = 1% viewport width）

<style>
	
        .box{
            width: 50vw;
            height: 50vw;
            background-color: red;
        }
      
</style>

<body>
	<div class="box">
        <!-- <div class="margin"></div> -->
    </div>
<script>

在这里插入图片描述
二、父div是一个不知道长款的div（这里为了方便，我还是把长宽写出来了，其实是未知的）

<style>
	
        .box{
            width: 500px;
            height: 700px;
            background-color: red;
        }
        .margin{
            width: 50%;
            padding-bottom: 50%;/* padding百分比相对父元素宽度计算 */
            background-color: skyblue;
        }
    
</style>

<body>
	<div class="box">
        <div class="margin"></div>
    </div>
</body>

在这里插入图片描述
此时子div的宽度为250px，高度为0，这个蓝色的长度是他的padding-bottom撑起来的。