CSS

宽高等比布局

Posted by YuHo Wang on 2018-07-23

实际开发中有时候会需要用到一种布局方式，即 DOM 元素的宽高始终为一特定比例。而这种布局的实现主要依赖于一个基础的 CSS 知识点：当 margin/padding 取形式为百分比的值时，无论是 left/right，还是 top/bottom，都是以父元素的width为参照物的，比如 padding: 100% 就等于父元素的宽度。

W3C 规范

Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).
Note that percentages on ‘padding-top’ and ‘padding-bottom’ are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative to the height).

大意便是，水平流中，margin、padding 的 top/bottom 百分比都是以父元素宽度为参照的；而在垂直流中，margin 的 left/right 以及 padding 的 top/bottom 的百分比则是以父元素高度为参照。

实例分析

实现如下布局

  • A 元素左右距离10px
  • A 元素在窗口水平垂直居中
  • A 元素中的文字A水平垂直居中
  • A 的高度始终为A宽度的50%

效果图

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽高等比布局</title>
    <style>
      .parent{
        overflow: hidden;
        position: absolute;
        left: 10px;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background-color: #c52121;
      }

      .child{
        width: 100%;
        padding-top: 50%;
        background-color: #988f8f;
      }
      span{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        color: #D8D8D8;
      }

      img{
        float: left;
        margin-right: 10px;
        border: 2px solid #fdf6e3;
      }
    </style>
</head>
<body>
  <section class="parent">
      <div class="child">
        <span>
          <img src="https://tuimeizi.cn/sexy?w=300&h=300&o=2" alt="" width="200px">测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例测试案例
        </span>
      </div>
  </section>
</body>
</html>

参考文章

FEATURED TAGS
CSS