34、CSS进阶——行高的取值以及常见的长度单位

行高的取值以及常见的尺寸单位

1. 行高的取值

line-height

1. px像素值，固定单位。

2. 无单位的数字，相对单位。行高为字体大小的x倍。

先继承再计算。子元素继承后，行高为子元素自身字体大小的x倍。

3. em单位，相对单位。行高为字体大小的x倍。

浏览器的基准字号为16px。
em的计算过程是，先计算再继承。这样就不够灵活，例如父元素的行高设为2em，则其行高就固定为32px，子元素继承的行高也为32px。

4. 百分比，相对单位。

效果同em。先计算再继承。

2. 关于尺寸单位

• 像素px是相对于显示器屏幕分辨率而言的；
• em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）；
• rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位；
• vw、vh、vmax、vmin这四个单位都是基于视口；
  • vw是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100；
  • vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100；
  • vmin和vmax是相对于视口的高度和宽度两者之间的最小值或最大值。
• vm同vmin，CSS3新增单位。