css中的%

元素的宽度和高度

div {
  width: 50%;  /* 元素宽度为父元素宽度的50% */
  height: 20%; /* 元素高度为父元素高度的20% */
}

最大/最小宽度和高度

div {
  min-width: 50%;  /* 元素最小宽度是父元素宽度的50% */
  max-height: 80%; /* 元素最大高度是父元素高度的80% */
}

padding和margin

相对于父元素的宽度

例如：child 元素设置 padding-top: 75%，也就是父元素宽度的75%，通过 padding-top 撑起高度，从而实现宽高比 4:3

<div class="parent">
  <div class="child">
    <div class="container">这是内容</div>
  </div>
</div>

.parent {
  width: 50%;
  .child {
    position: relative;
    width: 100%;
    padding-top: 75%;
    height: 0;
    .container {
      position: absolute;
      inset: 0;
      background-color: #aaa;
    }
  }
}

absolute(relative) 定位元素

div {
  position: absolute;
  left: 15%; /* 父元素宽度的15% */
  top: 10%; /* 父元素高度的10% */
}

translate 转换

div {
  transform: translate(50%, 100%); /* 元素沿X轴移动自身宽度的50%，沿Y轴移动自身高度的100% */
}

背景图片位置

div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: 50% 50%; /* 水平方向是容器宽度的50%，垂直方向是容器高度的50% */
  /* 这种情况同 center，背景图片在容器内水平垂直居中 */
}

字体大小

div {
  font-size: 200%; /* 相对于父元素（或默认字体）大小的2倍 */
}

line-height

基于当前字体大小的比例

.ele {
    font-size: 20px;
    line-height: 120%; /* 20px * 120% = 24px */
}