关于我伪元素设置 height:百分之100 不生效之闹

发表于 更新于
本文字数： 2.2k 阅读时长 ≈ 2 分钟

最近写个静态页练练 CSS，有些规则就是想不通。

比如下面这个关于模态框的 CSS，我打算给 dd 添加伪元素修饰一下

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
48
49
50
51
52
53
54
55
56
57
58
59
.second_class {
    display: none;
    position: absolute;
    z-index: 999;
    left: 100%;
    top: 0%;
    min-height: 100%;
    width: 800px;
    background-color: #f7f7f7;
    border-right: 1px solid #e6e6e6;
    border: 1px solid #e6e6e6;
    padding: 10px 12.5px 0 12.5px;
    dl {
      display: flex;
      align-items: stretch;
      flex-flow: row wrap;
      padding-bottom: 10px;
      // padding: 0 12.5px 0 12.5px;
      dt,
      dd {
        // position: relative;
        // padding: 2px 8px;
        // margin: 0;
        margin: 2px 0;
      }

      dt {
        font-weight: 700;
      }

      dd:nth-of-type(n + 2)::before {
        content: '';
        display: inline-block;
        margin: 0 10px;
        width: 1px;
        height: 70%;
        align-items: flex-start;
        vertical-align: middle;
        background-color: red;
      }

      dd:first-of-type::before {
        content: '';
        margin: 0 1px 0 5px;
        display: inline-block;
        // width: 10px;
        // height: 10px;
        border-top: 5px solid transparent;
        border-left: 7px solid dodgerblue;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
        // vertical-align: middle;
      }

      a:hover {
        color: red;
      }
    }
  }
1
2
3
4
5
6
7
8
<div class="second_class">
  <dl v-for="second in firstClass.secondClassList">
    <dt>{{ second.dt }}</dt>
    <dd v-for="item in second.dd">
      <a href="#">{{ item }}</a>
    </dd>
  </dl>
</div>

这里用伪元素给 dd 一个 CSS 的三角形前缀，还有竖线前缀。然后第一个问题出现了。

1
2
3
4
dl {
  display: flex;
  align-items: stretch;
}

dl 是 flex 布局，默认下 align-items:stretch，竖线伪元素能显示。一旦设置 align-items:center 就不显示了。

竖线伪元素，高度用的百分比。也就是说此时父元素 dd 高度为 0 !!

1
2
3
4
5
6
7
8
9
10
dd:nth-of-type(n + 2)::before {
  content: '';
  display: inline-block;
  margin: 0 10px;
  width: 1px;
  height: 70%;
  align-items: flex-start;
  vertical-align: middle;
  background-color: red;
}

按下 F12 一看，dd 高度是 19px，WTF!

我自己解释吧，height 写百分比只看 BFC 的高度，也就是显式给 dd 指定 height 属性的高度，而这个 19px 是 FFC 的高度。所以竖线伪元素拿不到 dd 高呗。

接下来第二个问题，用 border 写的三角形前缀，显式模式 display:inline-block

众所周知，行内块元素默认是基线对齐的，也就是和我们的文字并不能居中。可是这里再次刷新我的认知，当我自信地添加 vertical-align:middle 后，三角形往下跑了，呵呵。

然后我写成 vertical-align:baseline，三角形居中了 ！！

CSS 我学不会了，救命 ！！

总结

flex 和 grid 的项目，其伪元素的 height 设置百分比可能要翻车，因为 height 看父元素高度时，只看 BFC 的高

行内块元素的 vertical-align 绝对不是省油的灯，有时设置 middle 会翻车哦（可能因为我没玩明白）