zoukankan      html  css  js  c++  java
  • css实现自适应正方形的方法 http://www.cnblogs.com/dantis/archive/2017/05/12/6846611.html

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

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

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

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

    可以这么写:

    复制代码
    1 <style>
    2     .box{
    3          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              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>
    复制代码

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

    收工!

  • 相关阅读:
    Reborn
    个人总结
    第十六周个人进度条
    梦断代码阅读笔记03
    第十五周个人进度条
    第十四周个人进度条
    第十三周个人进度条
    冲刺9
    冲刺8
    事后诸葛亮会议
  • 原文地址:https://www.cnblogs.com/shatonghui/p/6848165.html
Copyright © 2011-2022 走看看