一、CSS选择器的特异度 Specificity
CSS 中的选择器有不同的优先级，称为“特异度”。特异度越高的选择器，其对应的样式就会优先应用。
特异度的值由四部分组成：
- 行内样式, （!important），1,0,0,0
- 每一个 ID 选择器，#id，0,1,0,0
- 每个类选择器, 属性选择器, 伪类选择器, .title, input[type="text"], :hover，0,0,1,0
- 每个元素选择器, 伪元素选择器,div, ::before，0,0,0,1
(0, 0, 0, 0)(行内样式，ID选择器，class/属性/伪类选择器/，类型/伪元素)，当存在多个选择器样式同时适用于同一元素时，会应用特异度最高的样式，如果特异度相同，则应用最后出现的样式。
p {
color: blue;
}
.class {
color: green;
}
#id {
color: red;
}
<p id="id" class="class">是什么颜色？</p>
因为 id 选择器的特异度最高，所以这段文本的颜色是红色的。若改为以下代码：
p{
color: blue !important;
}
.class {
color: green;
}
#id {
color: red;
}
!important 是一个特殊的关键字; 它需要加在属性值的最后; 会让这个属性的权重变成最大值。这段代码强制字体颜色设置为蓝色，其他样式特异度都被覆盖。
二、CSS继承 Inheritance
当你为HTML中的某个元素赋予CSS样式时，这些样式不仅仅会影响当前元素，有的样式还会影响该元素的子元素。这些下层子元素继承上层祖先元素样式属性的特点，就称为css继承。
inherit继承；如果元素的某css值设置为inherit，则说明该元素的该css值与其父元素的该css属性值一致，适用于所有css属性。如果一个属性不可继承，我们可以使用 inherit 这个关键字让它能从父级继承。
三、CSS求值过程解析
- 确定声明值。
- 层叠冲突。对样式表中有冲突的声明使用层叠规则，确定css属性值
- 使用继承。对仍然没有值的属性，若可以继承，则继承父元素的属性值
- 使用默认值。对仍然没有值的属性，使用默认值
四、CSS布局方式及相关技术
- float浮动布局
我们可以通过设置float属性让元素向左浮动或者向右浮动，以便让周围的元素或文本环绕着这个元素。float属性值只有两个：left / right。如果出现子元素全部浮动，导致了父视图高度为0，导致了页面紊乱，可以通过给父视图添加固定高度解决。
.right {
float: right;
width: 10px;
height: 20px;
background: red;
}
- position定位布局
position定位灵活且简单。可以相对元素框的常规位置定义元素的具体位置，可以相对父元素或另一个元素定位元素的位置，甚至可以相对可视区（例如浏览器窗口）定位元素的位置。position定位布局分为三种类型：相对定位relative，绝对定位absolute， 固定定位fiexd
- flex弹性盒子布局
flex容器：任何一个容器都可以指定为flex布局(display:flex)，其包含flex项。
flex项：(也称flex子元素)，需要布局的元素 排列方向(direction)：决定了flex项的布局方向。
弹性盒布局的常用属性有7个：display，flex-flow，justify-content，align-items，order，flex，align-self。
