css正方形盒子 自适应

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  *{
  margin:0;
  padding:0;
  }
  .box{
  display:inline-block;
  margin: 1%;
  width: 30%;
  background: #ff6600;
  padding-top: 30%;
  }
   
  </style>
   
  </head>
  <div class="box"></div>
  <body>
 

 //说明：一个不设置宽高的盒子，如何成为一个正方形：为啥padding-top:30%,width:30%就可以呢

因为padding-left；padding-top:padding-right;padding-bottom:设置的百分比是按照父级元素的宽度定的，所有只要其中任何两个组合就，在再加上相同的百分比，就可以成为一个随父级元素自适应的正方形，当然，如果盒子里有东西，会被撑开。
   
  </body>
  </html>

posted on 2017-03-22 09:59  myYouth  阅读(1622)  评论(0)    收藏  举报

导航