行高的取值以及常见的尺寸单位
1. 行高的取值
line-height
-
px像素值,固定单位。
-
无单位的数字,相对单位。行高为字体大小的x倍。
先继承再计算。子元素继承后,行高为子元素自身字体大小的x倍。
- em单位,相对单位。行高为字体大小的x倍。
浏览器的基准字号为16px。
em的计算过程是,先计算再继承。这样就不够灵活,例如父元素的行高设为2em,则其行高就固定为32px,子元素继承的行高也为32px。
- 百分比,相对单位。
效果同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新增单位。