html css 显示数值_【CSS纯技术】20.03.05-CSS渲染的原理
今天学的东西信息量都很大，导致我总是要反复观看。
因为自己还没理解透，所以这一篇也不再追求大家能够看懂，只是用于帮助自己梳理头绪。
一、CSS如何计算数值？
在写CSS的过程中，我们会用px、em、rem、vh、vw、%等各种单位指定长宽。
其中，px是绝对数值，而其他大多是相对数值。
但是，在网页实际渲染的时候，这些相对数值会通过一系列步骤，转换成绝对的px值，这样才能在网页中渲染出来。
我们来一一拆解这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不一样的难，难在复杂，而不是逻辑。
既然如此，那我就有必要搞清楚复杂背后的原理。
现在啃几块硬骨头下来，以后是一定会对自己有好处的。
相关文章：
# Ubuntu 配置自带vnc桌面共享
Ubuntu 配置自带桌面共享 1、在setting>>shareing>>remote 选择on 如果用ubunutu直接远程连接的话已经可以了， 2、在ubuntu下使用系统自带的remmina连接 vnc类型 直接输入ip地址 3、如果在windows下面连接的话需要把加密选项关闭 内容：…
select刷新后保存原先选择的信息
前提是之前选择的信息进了后台。 在页面上放一个<s:hidden name"xxx" id"inputF"/>，用它来存select上次选择的值。由于信息已经存在了后台，这个hidden域不管怎么刷新，都会有值。 // s_list是要恢复取值的select va…
python命令行参数解析OptionParser类用法实例
python命令行参数解析OptionParser类用法实例 本文实例讲述了python命令行参数解析OptionParser类的用法，分享给大家供大家参考。 具体代码如下： from optparse import OptionParser parser OptionParser(usage"usage:%prog [optinos] fil…
Linux下程序崩溃dump时的 core文件的使用方法
Linux下程序崩溃dump时的 core文件的使用方法 1、在启动程序前执行 ulimit -c unlimitedunlimited 表示生成文件的大小限制，也可以修改为自定义的大小，例如： ulimit -c 1024对 core 文件的大小进行限制，单位为 blocks …
div 自动换行_js自动打字--autotypejs
autotypejsuse for typing automatically.介绍使用原生JavaScript（es6）实现的自动打字效果。效果图示例代码(vue)：<用法获取：--yarn-- yarn add autotypejs--git-- git clone https://github.com/1esse/autotypejs.git--npm-- …
int[]到string[]的转换方法 Array.ConvertAll
2019独角兽企业重金招聘Python工程师标准>>> using System; using System.Collections.Generic; //int[]到string[]的转换 public class Example { static void Main() { int[] int_array { 1, 2, 3 }; string[] str_array Array.ConvertAll(int_array, new Conve…
Linux结构目录
linux结构目录 Linux中有一句话叫做：一切皆文件。 下面来了解一下这些文件。 首先看一下Linux根目录下结构：bin：存放二进制可执行文件，一般常用命令都存放在这里。boot：存放系统启动时的一些引导文件。dev：…
# NVIDIA Jetson系列系统镜像备份烧录指南
NVIDIA Jetson系列系统镜像备份烧录指南 我使用的是Jetson AGX Xavier 注意事项: 1、烧录工具版本在4.2之前 是叫做 JetPack,， 4.2以及4.2以后的版本叫做SDKmanager， 对应的Jetson OS的版本在4.2与4.1也是差异比较大的，4.2之前的版本智能…
面向对象编程（OOP）----BLUE大师JS课堂笔记(二)
一，把面向过程的程序改写成面向对象的程序 1.前提 所有的程序都在onload里面 2.改写 不能函数嵌套，可以全局变量 3.onload-------------------->构造函数 全局变量------------------->属性 函数----------------------->方法 需要用到面向…
张仰彪第二排序法_C语言中的最常用的两种排序算法你知道吗？
冒泡法排序核心思想：若有N个数从小到大排序，需进行N-1轮比较，第一轮每相邻的两个数据进行比较N-1次，最终挑选出最大的数，放到这一轮的最后位置；第二轮比较N-1-i次，挑选出这一轮最大的数…
ZOJ3203
为什么80%的码农都做不了架构师？>>> 用一次导数求极值，但是还是犯了错误，要判断边界条件，就是墙上投影值小于0和大于h的时候。 //-------common header--------------- #include <stdio.h> #include <vector…
【校招面试 之 C/C++】第16题 C++ new和delete的实现原理
1、new new操作针对数据类型的处理，分为两种情况：（1）简单数据类型（包括基本数据类型和不需要构造函数的类型）代码实例：int* p new int;汇编码如下： int* p new int; 00E54C44 pus…
C++Primer学习笔记(二)
17.string对象中字符的处理：cctype头文件中定义:isalnum(c) 如果c是字母或数字,则为trueisalpha(c) 如果c是字符,则为trueiscntrl(c) 如果c是控制字符,则为trueisdigit(c) 如果c是数字,则为trueisgraph(c) 如果c不是空格,但可打印,则为trueisprint(c…
Windows下Qt程序打包
Windows下Qt程序打包 将windeployqt.exe 目录添加到系统环境变量 windeployqt.exe目录如下： 命令行打包 1、打开命令行 2、执行打包命令 windeployqt helloworld.exe -dirdeploy -release注意，应用程序使用绝对路径，如果是d盘&#x…
c语言栈的实现以及操作_数据结构之链栈基本操作的实现详解（C语言描述）
迎新过后，来带领你好好学习的小软准时归来，快带着上次学习链表操作的记忆和我开启新的旅程吧:链栈：就是栈的链式存储结构，简称链栈。首先我们要考虑的就是链栈的存储结构，由于栈只是在栈顶进行插入和删除操作ÿ…
float向u8和s8的转换
为什么80%的码农都做不了架构师？>>> 关于float向u8，s8这种类型转换，比较内藏玄机，还是小心为妙，这种级别的优化做了不如不做。 直接float向char类型的做法是用__ftol2_sse命令完成，具体怎么做的…
SQL Server DB Link相关
若想通过DBlink 清空表或执行存储过程，可以通过这种方式Insert into table select * from table时，Pull 方式比Push方式快很多转载于:https://www.cnblogs.com/luhe/p/9341413.html
windows下安装程序制作
引用链接: https://blog.csdn.net/signjing/article/details/7855855 工具: 1、脚本编辑工具 hmnisedit_downcc.zip 百度云盘链接：https://pan.baidu.com/s/1LZ-KFqMocM30UU8eMudAnA 提取码：6kgf 2、编译工具 nsis3.0.4cvs.zip 百度云盘链接&#…
实测 Mysql UUID 性能(转)
网上普遍认为Mysql 使用 UUID 主键性能低下，甚至建议用 自增ID 作为主键并用 UUID作唯一索引的方案。但没有提供具体的数据证明使用 UUID 作为主键时性能究竟低下到何种程度。为此我专门做了测试。 测试环境：WindowsXP ，内存 4G …
date类型_06076.1.0如何将ORC格式且使用了DATE类型的Hive表转为Parquet表
温馨提示：如果使用电脑查看图片不清晰，可以使用手机打开文章单击文中的图片放大查看高清原图。Fayson的github：https://github.com/fayson/cdhproject提示：代码块部分可以左右滑动查看噢1文档编写目的在CDH中使用Hive时࿰…
SetGet and MACRO
为什么80%的码农都做不了架构师？>>> Set&Get 配合private是c class里面常用的。 这样很大程度上可以对数据的存取进行控制。 最近接触了大量的struct，然后直接存取其中变量的代码，在debug 跟踪的时候颇感不便。 Set&Get直…
spark之scala快速入门
scala和java都是在jvm之上的语言，相对来讲，scala热度比较低，其实并不是一个特别好的语言选择。 原因倒不是因为scala本身的缺点，而是使用人群不够多，论坛和社区不够活跃。这就跟社交软件一样，大家都用微信&…
python 归一化_只需 45 秒，Python 给故宫画一组手绘图！
作者 | 丁彦军责编 | 伍杏玲13日早晨，当北京市民拉开窗帘时发现，窗外雪花纷纷扬扬在空中飘落，而且越下越大，树上、草地、屋顶、道路上，都落满雪花。京城银装素裹，这是今冬以来北京迎来的第二场降雪。一下雪…
Windows平台下程序打包流程
Windows平台下程序打包流程 1、所有测试完成之后、程序release编译完成 2、依赖库打包 执行deploy.bat 脚本打包最新的程序以及依赖库 3、可执行程序打包 打开打包工程文件.evb， 使用 enigma virtual Box 打包可执行程序 点击“执行封包”，开始打包 …
一个apk多个ICON执行入口
一个工程对应一个AndroidManifest.xml文件，这个文件中包含有该项目的一些设置，如权限、SDk版Activity、Service信息等。一般而言，这个文件中会有且仅有一个application节点，这个节点表示这是一个应用程序，不管它下面还…
vbs之CurrentDirectory
为什么80%的码农都做不了架构师？>>> 最近要用一下Oracle instantclient的ODBC，由于配置有点繁琐，于是打算用vbs写一脚本来自动化一下，刚开始是这样的： Set ws CreateObject("WScript.Shell") w…
详解javascript: void(0);
原文 简书原文：https://www.jianshu.com/p/08ae8cbeb3be 什么是javascript: void(0); 我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？ javascript:void(0) 中最关键的是 v…
读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记：编写高质量代码--web前端开发修炼之道 这本书看得断断续续，不连贯，笔记也是有些马虎了，想了解这本书内容的童鞋可以借鉴我的这篇笔记，希望对大家有帮助。 笔记有点长，所以分为一，二两个…
# Qt程序版本号使用
Qt程序版本号使用 在pro文件中添加（版本号可以3段或者4段） VERSION1.0.1.2DEFINES APP_VERSION\\\"$${VERSION}\\\"实际代码中使用 QString version APP_VERSION;qInfo()<<"版本信息:"<< version;
python traceback安装_Python错误：Traceback (most recent call last):感觉是软件出了问题
安装了pytest后，运行了一下，看不懂了，不过你前面的说对了 Testing started at 10:15 ... C:\Users\Administrator\PycharmProjects\untitled4\venv\Scripts\python.exe "D:\Program Files (x86)\PyCharm Community Edition 2018.2.4\hel…