内联元素

基线

基线是字母 "x" 的下边缘

x-height: 小写字母 x 的高度，等于基线与等分线(中线) 的间距

line-height 指两条基线的间距

vertial-align 默认值为 baseline

vertial-align: middle 使元素的中部与父元素的基线加上父元素 x-height 的一半对齐。

ex

css 早期支持的相对尺寸单位，小写字母 'x' 的高度

给 icon 设置 1ex 可以实现 vertial-align: middle 的效果

行高

对于非替换元素的纯内联元素，其可视高度完全由行高决定(不受 height padding border 影响)

设置内联元素行高与父元素高度相同可以实现近似垂直居中

line-height 默认值为 normal，其具体值与 font-family 有关

line-height: <number> | <percent> | <number><unit>

使用数字时，子元素集成父元素行高数字
使用百分比或具体数值时，子元素集成父元素行高计算后的值

css

/* 全局初始化 */
body {
  line-height: 1.5;
}
input,
button {
  line-height: inherit;
}

vertical-align

作用在内联元素和 display: table-cell 元素

取值

基于线对齐
- baseline: 对于空的 inline-block 元素为其底部，对于内联元素为小写字母 x 的底部
- top/bottom: 对于内联元素为当前行框盒子(注意：非块状容器)的顶/底部，对于 table-cell 元素为元素底 Padding 边缘和行顶部
- middle: 元素中心基于小写 x 的中心对齐
基于文本对齐
- text-top: 盒子顶部与父级内容区域顶部对齐
- text-bottom: 盒子底部与父级内容区域底部对齐
上下角标
数值百分比
- 数值：支持正负值，相对于基线正直向上偏移，负值向下偏移
- 百分比：相对于 line-height 计算

html

<!-- 下面示例中 .box 的高度为 35px  -->
<!-- 原因在于默认的幽灵空白节点，字体大小与 .text 不等 -->
<!-- 从而导致 .text 基线上移与幽灵空白节点基线对其 -->
<!-- 设置 .box 与 .text 字体大小相同可以解决 -->
<style>
  .box {
    border: 1px solid black;
    line-height: 32px;
  }
  .text {
    font-size: 24px;
  }
  .img {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>
<div class="box"><span class="text">x</span></div>
<!-- 这里显现一个 x 作为幽灵空白节点 -->
<div class="box">x<span class="text">x</span></div>
<!-- 常见的 img 底部留白问题 -->
<!-- 解决方式(任选其一): .line{line-height: 0}; .line{font-size: 0}; .img{display: block}; .img{vertical-align: top}; -->
<div class="line">x<img src="" class="img" /></div>

html

<style>
  .wrap {
    /* line-height: 0; */
  }
  .box {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid;
  }
  .box-2 {
    margin-left: -50px;
  }
</style>
<div class="wrap">
  <div class="box"></div>
  <div class="box box-2">x</div>
</div>

文本修饰

描述字体: font：[font-style] [font-variant] [font-weight] <font-size>/[line-height] <font-family>

说明
- font 是一个复合属性，在使用时略显复杂，很少使用
- font 必须包含 font-size 和 font-family 属性，且需要遵守一定的顺序，font-size 与 line-height 中间要加入 '/' 。
- font 会重置 font-stretch、font-size-adjust、font-kerning 属性，虽然无法通过 font 设置
- 加载字体 @font-face{ font-family:字体名称; src:url(字体地址) format（""）; }, format 中 ttf 字体为truetype，otf 字体为opentype
- 引用字体 src:local("")
子属性
- font-family: 字体，可指定多个，若无当前字体则按从左到右选择，详见文档
- font-style: 文本样式，取值 normal-默认、italic-斜体、oblique-倾斜体
- font-variant: 文本变体，该属性为复合属性，由于在中文网站中并不常见，具体查看文档
- font-weight: 字体粗细，取值 1-1000(整百) 或关键字 normal-等值 400、bold-等值 700、lighter/bolder-依继承值计算
- font-size: 字体大小，取值 <length> 或相对单位 em、rem 等
- line-height: 行高、取值 <length> 或相对单位 em、rem 或数字(表示与当前元素字体大小相乘)，默认 normal(大部分字体约 1.2)

修饰字体

color: 字体颜色
text-shadow: 文本阴影 (距左 px 据上 px 清晰度 px 背景颜色),用逗号隔开可以加多层阴影
text-decoration: 文本修饰（line-through/underline/overline/none）
text-transform: 文本转换，取值 capitalize、capitalize、lowercase 等
font-size-adjust: 小写字母字体大小，该属性的值应该被定义为 font-size 的值所要乘的系数
-webkit-text-stroke: 文字描边(需要前缀)

陈列方式

text-indent: 首行缩进
text-align: 文本对齐
letter-spacing: 字符间距
word-spacing: 单词间距
white-space: 空白符处理，常用 normal(默认) 和 nowrap(不换行)
word-break: 单词换行，取值 normal(默认)、break-all(超出换行)、keep-all(中日韩不换行、其他语言同 normal)
direction: 文本方向，取值 ltr(默认，从左到右)、rtl(从右到左)
unicode-bidi: 文本方向，该属性为文档类型定义的设计者专用

css

/* 超出隐藏展示省略号 */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

补充说明：

文本不换行通常使用 white-space: nowrap 而非 word-break: keep-all，word-break 对于英文字母处理时会转为 normal
word-wrap: break-word 该属性在 MDN 中未能搜索但确实存在，表现效果与 word-break: break-all 类似

内联元素 ​

基线 ​

ex ​

行高 ​

vertical-align ​

文本修饰 ​

内联元素

基线

ex

行高

vertical-align

文本修饰