units in CSS
1. length
absolute length
px
relative length
em
- 基于 its own 的font-size计算而来.
- 基于前点, 同样的 1 em, 在不同 element 上可能 calculated value 并不相同, 因为其 relative to 的 font-size 不同.
- font-size 的来源, 或为主动设置(cascadeed value), 或为被动继承/默认值(computed value). Anyway, 每个 element 都会有一个 font-size.
- calculation process:
- 得到 current element 的单位为 px 的 calculated font-size
- 或者主动设置了font-size
- 或 inherited value
- 或 initial value
- current element 的 1 em = current element 的 font-size
- 得到 current element 的单位为 px 的 calculated font-size
- 很少用 em，因为不好控制，尤其是当多层嵌套时，font-size 可能形成指数级别的增长
rem
- 相对 root 的 font-size，即 的 font-size
- 存在2种 rem
<html>或:root里的 rem。它相对于browser的 font-size。此为对rem的 设置(assignment)- 其它元素中的 rem。相对于
root element的 font-size. 此为对rem的引用(reference) -
vh，vw
- v：viewport
- vh：viewport height，屏幕的百分比高
- vw：viewport width，屏幕的百分比宽
2. percentage
-
是独立的一个种类. 与
em/rem, 并不属于同一个种类 -
relative values
-
what dose refer to?
-
对 calc()函数
基于 width of browser
-
对 line-height
基于 its own 的 font-size
-
对 font-size
基于 its own 的 font-size
-
毫无疑问, be relative to的是 its own 的 font-size
-
可能存在赋值(assignment), 如下
- 读取 its own font-size. 默认应该为16px. 来源: inheritance
- 赋值给 its own font-size, 即 font-size = font-size * 200% = 32px;
body {font-size:200%;} /*实质是: font-size = font-size * 200% */ -
-
对 width / height / margin / border / padding
除了以下 2 个exception, 都基于 width of containing blcok, 即便是 vertical property(e.g. margin-top)
height--> height of containing blockborder--> N/A
property refer to height The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto.
A percentage height on the root element is relative to the initial containing block.border NA width width of the containing block padding width of the containing block margin width of the containing block
-
