脚本巴巴 www.jiaoben88.com

css实现自适应正方形的方法

发布时间:2017-05-12 21:09:41编辑:脚本巴巴

页面布局中我们经常需要用百分比来实现宽度自适应,但是如果这时候高度要跟宽度呈固定比例变化,该怎么办呢?

很简单我们可以利用元素的padding或margin的百分比值是参照宽度的这一特性来实现,即如果元素的padding或margin值是百分比值,那么,它的值是根据父元素的宽度来计算的。

所以实现一个自适应的正方形,可以有两种写法:

可以这么写:

<style>
    .box{
        width: 50%;
        padding-top: 50%;
        background-color: black;
    }
</style>
<div class="box"></div>

也可以这么写:

<style>
        .box{
            overflow: hidden;
            width: 50%;
            background-color: black;
        }
        .margin{
            margin-top: 100%;
        }
    </style>
    <div class="box">
        <div class="margin"></div>
    </div>

两种方法略有不同,大家可以自行比较,也可以脑洞一些其他方法。

上一篇:使用CSS3的 @font-face 显示自定义字体
下一篇:CSS3圆环动态弹出菜单示例代码

相关文章