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

2018-06-24 01:19:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

很简单,我们可以利用元素的padding或margin的百分比值是参照父元素的宽度这一特性来实现,

即如果元素的padding或margin值是百分比值,那么,它的值是根据父元素的宽度来计算的。

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

可以这么写:

 

1 <style>
2     .box{
3         width: 50%;
4         padding-top: 50%;
5         background-color: black;
6     }
7 </style>
8 <div class="box"></div>

 

也可以这么写:

 1 <style>
 2         .box{
 3             overflow: hidden;
 4             width: 50%;
 5             background-color: black;
 6         }
 7         .margin{
 8             margin-top: 100%;
 9         }
10     </style>
11     <div class="box">
12         <div class="margin"></div>
13     </div>

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

收工!

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css盒子模型

下一篇:css清除浮动