这是我参与「第五届青训营 」伴学笔记创作活动的第三天

课堂笔记

课堂重点

1. 了解选择器的特异度

特异度

有多个选择器的时候，优先渲染的选择器特异度高，则选择器出现的次数最多。 一般选择器的优先级如下：

！important优先级最高（最主要的用来提高元素的优先权）
其次是内联选择器>ID选择器>类别选择器>属性选择器>伪类>元素选择器>通配符选择器
最后是继承选择器。

继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值，就是说某些属性设置一种样式，其子类没有设置，则子类中的样式与父类相同。注意————和盒模型相关的是不可继承的。

初始值

当CSS中继承父类时没有继承到，或者某一个元素有这个样式时，我们可以设置一个初始值。

css中，每一个属性都有一个初始值
    background—color的初始值为transparent
可以使用initial关键字显式重置为初始值
    background—color：initial

CSS的求值过程

过程：

1. 对DOM树和样式收集样式的规则
2. 对页面中的元素和属性进行筛选，筛选方法有以下条件：选择器匹配、属性有效等
3. 按着元素和属性的来源、选择器的特异度、书写的先后顺序等找到优先级最高的属性值。
4. 选择优先级最高的属性值时会得到一个层叠值，当层叠值为空的时候，使用初始值或者继承父类。
5. 将一些相对值或者关键字转化成绝对值。通过计算进一步转换
6. 得到一个使用值，比如像素为400.2
7. 得到实际值，不能使用小数，转化为400

布局

布局确定了内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算。 相关知识：

1. 常规流：行级、块级、表格布局等
2. 浮动
3. 绝对定位

盒模型

把元素理解为一个一个的盒子，有内外边距、宽高等。

width/height：宽度/高度
    1. 取值为长度（px、em）、百分数、auto（由内容计算出）
    2. 百分数是相对于盒子的高度而言，盒子有指定高度是生效（宽度不用）
padding：内边距
    1.  10px：四个边内边距都为10px；
        10px 20px：上下内边距为10px，左右内边距为20px；
        10px 20px 30px 40px:上内边距为10px，右内边距为20px，下、左内边距依次为30px、40px。
    2.  可以用百分数，相对于盒子的宽度
border：边框
    指定容器边框样式、粗细、颜色
    三个属性：粗细（border：1px/2px）、样式（solid/dotted）、颜色（red/green）
    四个方向：上（border—top）、下（border—bottom）、左（border—left）、右（border—right）
margin：外边框
    1. 取值：长度、百分数、auto（水平居中）
    2. 百分数相对于盒子宽度

块级、行级

块级：不和其他盒子并列摆放，适用于所有盒模型属性。 行级：和其他盒子一起放在一行或拆成多行，盒模型中的高度宽度不适用 块级元素：生成块级盒子； 行级元素：生成行级盒子，内容分散在多个盒子中

display属性：
    block：块级盒子
    inline：行级盒子
    inline—block：本身是行级，可以放到行盒中；不会拆成多行
    none：完全被忽略

常规流

1. 根元素、浮动和绝对定位的元素会脱离常规流
2. 其他元素都在常规流内
3. 常规流中的盒子，在某种排版上下文中参与布局