对line-height的理解及其赋值方式

line-height 行高

• 行高是指文本行基线间的垂直距离。

• 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定

• 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；

• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；

• line-height 和 height 都能撑开一个高度；

• 当 font-size 等于 line-height 时，行距 = line-height - font-size = 0；

• 而当 font-size 大于 line-height 时，则会出现行距为负值，则两行重叠，

顶线、中线、基线、底线

• 顶线 top ： 位于中文汉字的顶部位置

• 中线 middle ：位于部分英文字母(E、l、h)的中间位置

• 基线 baseline ：位于部分英文字母(E、l、h)的底部位置

• 底线 bottom ：位于中文汉字的底部以及英文字母(g)的底部位置

赋值方式

• 百分比

  <number>%，如 150% ， 根据默认行高(或父元素行高)乘以百分比计算。

• 长度

  <number>px，如 24px。

• 纯数字

  <number>，如 1.5 ，根据默认行高(或父元素行高)乘以数字计算。

• 缩写方式：

  font: 字体粗细 字体大小/行高 字体样式，如：

p {
  /* 设置字体为粗体，字体大小12px，行高18px，字体为 */
  font: bold 12px/18px Arial, Helvetica, sans-serif;
}

CSS font 属性

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"

• font-style ：规定字体样式。参阅：font-style 中可能的值。
• font-variant ：规定字体异体。参阅：font-variant 中可能的值。
• font-weight ：规定字体粗细。参阅：font-weight 中可能的值。
• font-size/line-height ：规定字体尺寸和行高。
• font-family ：规定字体系列。

font 的其他属性：

• caption ：定义被标题控件（比如按钮、下拉列表等）使用的字体。
• icon ：定义被图标标记使用的字体。
• menu ：定义被下拉列表使用的字体。
• message-box ：定义被对话框使用的字体。
• small-caption ：caption 字体的小型版本。
• status-bar ：定义被窗口状态栏使用的字体。