前端三剑客作用
HTML用来控制布局；为web界面设计提供结构
CSS主要用来添加样式
JavaScript用来增加网页交互体验
浏览器如何运转
浏览器一般包含两种引擎：渲染引擎和Javascript引擎
渲染引擎主要负责加载页面，根据HTML生成DOM树的结果，获取CSS资源，构建 CSSOM 树。随后结合DOM树和CSSOM树，构建最终的排版
Javascript引擎【例如V8引擎】将Javascript源码经过词法语法解析转化为AST树，随后通过Ignition解释器转为字节码。随后字节码可以通过Turbofan编译器转换为机器码
CSS选择器优先级
选择器优先级
对于CSS 可以设计多个选择器，这时可能会出现同一元素被很多样式选中，这时就会出现选择器优先级的问题
优先级由特异度来决定
特异度层次依次是
行内样式 > ID选择器 > 类、属性、伪类 > 元素、伪元素、标签选择器
所以我们以一个 0 0 0 0 四位数为权重总和
从最低的元素、伪元素、标签选择器 在个位+1 就是 0 0 0 1
类、属性、伪类 在十位数+1 就是 0 0 1 0
ID选择器 在百位数+1 就是 0 1 0 0
行内样式 在千位数+1 就是 1 0 0 0
比较权重总和，大的优先
可以参看下面代码验证：
<html>
<head>
<title>深夜食堂</title>
<link rel="stylesheet" href="text1.css"></link>
</head>
<body>
<div id="id1" class="class1" style="background: blue;">行内样式</div>
<div id="id1" class="class1">id选择器</div>
<div class="class1">类、属性、伪类选择器</div>
<div>标签选择器</div>
</body>
<style>
/* id选择器 */
#id1{
background-color: red;
}
/* 类选择器 */
.class1{
background: orange;
}
/* 标签选择器*/
div{
width: 100px;
height: 100px;
background-color: palegreen;
display: inline-block;
}
</style>
</html>
CSS求值过程
HTML被解析成一个DOM树的同时，拿到样式规则。
随后开始对该页面的规则进行筛选，拿到元素的所有声明值。按照来源、limportant、选择器特异性、书写顺序等规则选出优先级最高的一个属性值【层叠值】。当层叠值为空时，继承或者初始值。这样就会得到一个唯一且不为空的指定值
随后，继续对该指定值做一些转换，比如相对路径转换为绝对路径，得到计算值，这个是浏览器在不结合实际布局的情况下得到的最准确的值
将计算值进一步转换，根据渲染环境，将关键字、百分比等都转换为绝对值，此时变为使用值。此时数值为实际布局时候的数值
再将小数像素值转为整数像素值，或者不满足属性限制，比如宽度大于最大宽度，这些都需要constraining，最终拿到实际值
