＊＊CSS读书笔记＊＊
提测间隙逛掘金时发现有人推’CSS in Depth’这本书，然后我就找来看了一下。没有译本读起来有点点慢，这周看的是第二章，相对单位，看下来的感受是作者梳理的很清楚，举例也很明了，然后我就总结了一点读书笔记～
响应式布局常采用的相对长度单位是em，rem。
em：基准值是当前元素的字号大小，可以应用在padding，margin等距离计算上。在CSS中，1em表示当前元素的字号大小，实际值取决于在哪个元素上应用。可以定义一个元素的字号大小，然后可以通过改变字号大小从而控制整个元素大小缩放。
- 对font-size使用em：在font-size上的em会先从继承到的字号大小衍生出来，即基准值是继承的字号大小；
- 在一个元素内用em同时声明font-size和其他属性：浏览器必须先计算font-size，然后基于这个值再去计算其他值。这些属性声明的时候使用的是相同的em值，但很可能它们会有不同的计算值。
注：所有字体单位都使用em会带来的问题是，在层层嵌套的情景下，子元素的字体大小会一直随父元素字体大小变化，可能一不小心就会造成一连串逐渐缩小／扩大的列表项，或者当需要确切的字体大小时，要根据层层父元素字体大小计算，会比较麻烦。
rem：基准值是根元素（:root）的字号大小。
rem可以和em结合起来用，用rem指定字体大小时不用费力计算，只需考虑根元素的字号大小。再用em控制边距等时，与media query结合使用（不同屏幕指定不同的根元素字号大小），可以达到方便的响应式布局设计的效果。
注：这个方案的缺点是，会有breakpoints（断点），因为 media query 指定的是一个区间。
viewport：浏览器的视窗，下面四个参数也可以是font-size的单位，这时font-size的大小相对于浏览器的宽或高平滑变化。
- vh—1/100th of the viewport height
- vw—1/100th of the viewport width
- vmin—1/100th of the smaller dimension, height or width (IE9 supports vm
instead of vmin) vmax—1/100th of the larger dimension, height or width (not supported in IE
or, at the time of writing, Edge)
（可以和 calc() 结合，实现有基本值的不同大小视窗的平滑过渡，而media query的响应式不是平滑的）:root { font-size: calc(0.5em + 1vw); }
line-height：如果line-height的值是无单位的，父元素设定后，子元素继承时继承的不是一个固定高度，而是一个比例值，具体高度是比例值✖️子元素自身的字体大小（推荐）；
如果line-height的值是有单位的，子元素继承的是固定的行高（不推荐）
custom properties：CSS本身制定的使用变量的规则，变量名称要 – 开头，定义在父容器中，子节点使用时用 var()，第一个参数为变量名，可以设定第二个参数为备选值；
当同样的变量被其他父容器重写时，会对此父容器内的所有子节点都生效，即，变量并非一成不变，可以针对不同的容器的需求制定。