html css 显示数值_【CSS纯技术】20.03.05-CSS渲染的原理

今天学的东西信息量都很大，导致我总是要反复观看。

因为自己还没理解透，所以这一篇也不再追求大家能够看懂，只是用于帮助自己梳理头绪。

一、CSS如何计算数值？

在写CSS的过程中，我们会用px、em、rem、vh、vw、%等各种单位指定长宽。

其中，px是绝对数值，而其他大多是相对数值。

但是，在网页实际渲染的时候，这些相对数值会通过一系列步骤，转换成绝对的px值，这样才能在网页中渲染出来。

这张图表示了计算数值的6个步骤

我们来一一拆解这6个步骤，以某一个元素为例：

1、Declared value：收集所有的值（最终这些值要进行决斗，只能剩下一个）；

2、Cascaded value：决斗之后，最后剩下的值；

3、Specified value：如果前2步没有指定某个值，并且也没有inherit，那么就在这一步指定系统默认分配的值；

4、Computed value：如果是相对的单位（比如em、rem），那么就需要转换为绝对的px值；

5、Used value：如果有对parent元素、视窗等的引用（比如%、vh、vw），那么在这里转换为绝对的px值；

6、Actual value：如果px值有小数点，那么四舍五入。

以上就是在数字方面，CSS渲染的全过程。

二、相对单位的参考系是什么？

既然是相对，那么肯定有一个东西用于参考。

所以，在这一篇里面，主要讲了各单位是以什么为参考的：

*注：以下的参考都是Computed value，就是已经全部转化为px值了。

1、%（针对字体，比如font-size等）：以parent元素的font-size为参考；

2、%（针对长度，比如padding等）：以parent元素的width为参考（非常重要！只以宽度为参考，很特殊，如果自己摸索的话，怕是要吃不少亏）；

3、em（针对字体）：以parent元素的font-size为参考，这个和%一样；

4、em（针对长度）：以current element（目前元素）为参考！

5、rem（root em）：以root元素的font-size为参考；

6、vh、vw：以浏览器视窗大小为参考，100vh能填满整个窗口。

三、现代CSS中，rem的用法

这里有一个很巧妙的用法：

html 

先把整个html元素都定义为10px。

因为10px是死的，万一有人修改了浏览器的默认字体大小，网站字体就不会随着浏览器的设置而变，所以我们可以改成这样：

html 

因为一般默认的font-size都是16px，那么16*62.5%=10px，效果是一样的，但它有个额外的好处，就是会随着浏览器的设置而变化，如果浏览器默认字体是20px，那它也会相应变大，很智能。

为什么要设置这个呢？

这是为了把CSS中所有的绝对值改为相对值，也就是把px改为rem。

这样一来，万一我们要修改网页的尺寸，只需要修改html中的font-size，整个网站的字号都会一起变，而不用一个个修改。

万一我们的CSS代码有上百行，一个个改是很累的，所以这个技巧能提升幸福感。

四、还没有完全理解的部分

只要学过CSS的，基本都会被float、position等复杂的原理弄晕过。

但是实际上，只要掌握了他们渲染的原理，也就不会那么神秘了。

但是毕竟定位是CSS种很重要的事情，所以肯定会比较复杂，今天我学完了这一课，但是一时半会儿没有弄得太清楚。

好好睡一觉，明天再重新学一遍，应该就能掌握得更深了。

五、为什么要学枯燥的原理

这要关系到我学CSS的动机，因为不像Javascript，CSS的很多语句是「不可预期」的，所以CSS的难，是和Javascript不一样的难，难在复杂，而不是逻辑。

既然如此，那我就有必要搞清楚复杂背后的原理。

现在啃几块硬骨头下来，以后是一定会对自己有好处的。