0327面试题——自适应正方形、0.3px的线段

1. 实现宽高自适应的正方形

• 第一种方案，使用vw(vh)宽高都以视口的宽度(高度)为基准

    .square {
        width: 30vw;
        height: 30vw;
        background-color: black;
    }

• 利用元素的margin/padding百分比是相对父元素width的性质

    .square {
      width: 20%;
      height: 0;
      padding-top: 20%;
      background: orange;
    }

• 利用子元素的margin-top来实现

    .square {
      width: 30%;
      overflow: hidden;
      background: yellow;
    }
    .square::after {
      content: '';
      display: block;
      margin-top: 100%;
    }

2. 画0.3px高的线段

    <style>
        .line {
            width: 100px;
            height: 1px;
            transform: scaleY(0.3);    /* 通过scale将高度缩小0.3倍 */
            background-color: black;
        }
    </style>
    <div class="line">

    </div>