跳到主要内容

line-height 学习笔记

基础​

  1. 字体由 顶线、中线、基线、底线组成；
  2. 顶线到底线的距离，是内容区域；
  3. 内容区域 + 内容区域上下对称的空白区域，是行高；
  4. 上一行的底线，到下一行的顶线，之间的距离，是行距；
  5. 行内框：行高指定的高度；
  6. 行框：本行内若有元素行内框最大的值；

vertical-align​

  1. 设置元素内部的子元素，在垂直方向的对齐方式，设置在子元素身上，且不会继承；
  2. 语法：baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分比 | 长度 | inherit
  3. 参数：
    • baseline： 基线对齐；
    • sub： 下标显示；
    • super： 上标显示；
    • top： 顶端对齐；
    • text-top： 文本的顶端对齐；
    • middle： 中部对齐；  _//_没有研究透的属性
    • bottom： 底端对齐；
    • text-bottom：   文本的底端对齐；
    • 百分比和长度： CSS2，可为负数。
    • 初始值： baseline
  4. 基线对齐（ vertical-align : baseline ）
    • 基线对齐（vertical-align : baseline）使元素的基线同基准元素（取行高最高的作为基准）的基线对齐
  5. 顶端对齐（ vertical-align : top ）
    • 顶端对齐（vertical-align : top）是将元素的行内框的顶端与行框的顶端对齐
  6. 文本顶端对齐（ vertical-align : text-top ）
    • 文本顶端对齐（vertical-align : text-top）是将元素行内框的顶端同父元素文本的顶线对齐（可能会把行框撑高）
  7. 底端对齐（ vertical-align : bottom ）
    • 底端对齐（vertical-align : bottom）是将元素的行内框的底端与行框的底端对齐
  8. 文本底端对齐（ vertical-align : text-bottom ）
    • 文本底端对齐（vertical-align : text-top）是将元素行内框的底端端同父元素文本的底线对齐（可能会把行框撑高）
  9. 中间对齐（ vertical-align : middle ）
    • 中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐。（对于文字的处理有些偏差）
  10. 上标和下标
0%