CSS 中的 Line-Height 行高学习笔记

本文是从SlideShare找到的文档《Line-Height 行高中文版》的学习笔记,原演示稿的内容质量和设计编排都属上乘,不过觉得99张幻灯片的篇幅有点过多了,因此总结一下。

行高的基本知识

在CSS中设定line-height的值,共有五种定义方式:

  • line-height:normal 普通行高,此值据浏览器不同在1.2倍文字大小左右
  • line-height:inherit 继承父级行高
  • line-height:120% 百分比率,此时按照font-size求得数值
  • line-height:20px 绝对长度
  • line-height:1.2 纯数字比率

line-height可以缩写到font属性中,紧跟在font-size属性后面,用斜杠分割

p { font: 12pt/18pt 宋体; }

line-height减去font-size即为行间距,实质是文字上下各分配等大的半行间距。如line-height:20px,font-size:16px时:

行高的继承

在父级元素(如body)中设置行高想传递给子级时,建议使用纯数字,即上述的第五种定义方法。

原因是:若在父级设置绝对长度的行高,则子级元素继承此固定数值,不随子级不同文字大小做自适应。父级设置百分比行高道理相同,会以父级font-size乘以百分比求出行高,仍以固定数值继承给子级。若在父级设置行高为normal,可以适应子级元素的不同文字大小,但normal的值在浏览器中解释有些许区别。

推荐方案:正文行高1.5,标题行高1.2(WCAG2.0规定段落行高至少1.5倍)。

行高的相关盒模型

与行高相关的四种盒模型是

  • containing box
  • line box
  • inline box
  • content area

以一个带有多个换行的段落为例:

1,段落整体构成一个containing box

2,containing box中,每一行文字是一个line box

3,回到整个段落中,依据元素标签划分为一系列inline box

inline box有可能跨行,且分为有标签的inline box(如上图中的emphasis)和匿名inline box(如普通文字)

4,每个inline box中含有一个content area

不同盒子的高度细节

1,content area的高度对应font-size

2,inline box的高度对应line-height,若font-size > line-height时,inline box的高度仍使用行高(而非文字高)

3,line box高度取决其内部最高的inline box或替代元素(图片之类)

4,多个line box无缝堆叠,构成整个containing box的高度

实际运用中的特殊情况

上标下标可能导致行高异常,可将该元素的行高归零解决

sup, sub {line-height:0; }

文字中的图片也会造成行高异常

之前在博客里为外站链接加了Google缓存的Favicon,结果在几个主流浏览器中一番折腾,仍旧是各种对不齐,所以研究一下行高的事,准备继续鼓捣,嗯嗯。

Advertisements

,

  1. 留下评论

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: