文本

px vs em

px 是绝对值，和它一起的还有 in, pt, cm

em 是相对值，它是相对当前 font-size 的倍数

示例： header的font-size等于 24px

body {
    font-size: 12px;
}

header {
    font-size: 2em; /* 等于 2 * fontSize = 24px */
}

text-indent

含义：对象段落首行缩进

示例: 缩进两个字体大小

p { text-indent: 2em; }

ellipsis

含义： 文本溢出时的显示样式

示例： 溢出时显示...

.ellipsis {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

height

定义： 元素高度

示例： 让文字纵向居中，让 height = line-height

ul > li {
    height: 30px;
    line-height: 30px;
}

::after

定义： 在元素的最后插入内容

示例： 在box的最后插入一条直线

.box {
      &:after {
      border-top: 1px solid #232323;
      border-top: 1px solid hsla(0, 0%, 100%, .06);
      border-bottom: 1px solid #000;
      border-bottom: 1px solid rgba(0, 0, 0, .4);
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
  }
}