字体中的单位
| unit | explain |
|---|---|
| px | 绝对单位，像素px是相对于显示器屏幕分辨率而言的。 |
| em | em是相对长度单位。参考物是父元素的font-size，具有继承的特点。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 |
| rem | 是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。 |
| 百分比 | 百分比单位更像“em”单位,除了一些根本性的差异。首先,当前的字体大小等于100%(比如12 pt = 100%)。当使用百分比单位,你的文字在移动设备上仍然保持完全的可伸缩性和可访问性。 |
注意
- 【em】如果在** font-size **上使用em这个单位，应该乘以父元素的字体大小，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)。用在 font-size 之外的属性上，则应该乘以元素自身的字体大小
- 【%】如果某个元素设置了百分比的属性，则后代元素继承的是计算后的值 ，而不是原百分比 。
乘以包含块的宽度 margin, padding, left, right, text-indent, width, max-width, min-width eg：padding-top:20%; 20%指的是父元素宽度的20%
乘以包含块的高度 top, bottom, height, max-height, min-height
乘以元素的字体大小 line-height
乘以元素的行高 vertical-align - 【包含块】
包含块类型：
- 对于普通定位元素就是我们理解的父元素
- 对于position: absolute;的元素是相对于已定位的父元素（offset parent）
- 对于position: fixed;的元素是相对于 ViewPort
网友评论