zoukankan      html  css  js  c++  java
  • 高度随宽度适应的响应式方案

    概述

    高度随宽度自适应有很多种方案,这里只讨论一种巧妙的方案,就是利用margin/padding。我把代码记录下来供以后开发时参考,相信对其他人也有用。

    知识点

    margin/padding有这么一个很巧妙的知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!

    自适应方案一

    那么可以使用padding-bottom/top来实现自适应方案一,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .div {
       50%;
      background-color: green;
      padding-top: 70%;
    }
    </style>
    </head>
    <body>
      <div class="div"></div>
    </body>
    </html>
    

    然而这个代码有一个缺点,就是无法设置max-height。原因是它的height是0,它是靠padding撑起来的,但是padding不属于height。所以我们有如下方案二。

    自适应方案二

    可以使用margin-bottom/top来实现自适应方案二,代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .div {
       50%;
      background-color: green;
      overflow: hidden; //形成BFC,不影响外面的元素
      max-height: 300px;
    }
    .div:after {
      content: '';
      display: block;
      margin-top: 50%;
    }
    </style>
    </head>
    <body>
      <div class="div"></div>
    </body>
    </html>
    

    可以看到,max-height起了作用。

    填充内容

    由于没有规定高度,那么向其中填充内容势必会占据一定的空间从而影响高度。所以这个时候一般利用绝对定位来向其中填充内容。

  • 相关阅读:
    IfcDirection
    IfcPcurve
    IfcOffsetCurve3D
    IfcOffsetCurve2D
    IfcLine
    IfcEllipse
    IfcCircle
    IfcConic
    IfcTrimmedCurve
    QDockWidget设置为tab切换形式
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/9175651.html
Copyright © 2011-2022 走看看