这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
1.了解CSS
1.1CSS是什么
CSS是Cascading style Sheets的简称，中文译作“层叠样式表单”。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
1.2在页面中使用CSS
在页面中使用CSS有三种方式:外部样式表(最佳方式)、内部样式表、内联样式；
- 外部样式表:利用link元素引进css样式,link元素的位置在head里,用href属性链接的位置。
- 内部样式表:在head部分输入。
1.3CSS是如何工作的
总的来说，过程分以下几步：
- 处理 HTML 标记并构建 DOM 树。
- 处理 CSS 标记并构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，以计算每个节点的几何信息，将各个节点绘制到屏幕上。
1.4调试CSS
概括地说，调试流程大致可以分为 3 个阶段：
- 评估并快速修复
- 还原和重现
- 定位根源并修复
2.深入CSS（上）
2.1哪条规则生效
- css生效的第一原则是：近者优先，即哪个选择器作用于最里层标签，则这个选择器生效。
- 当选择器作用于同一层时，可以根据优先级权重，进行累加计算： id选择器100>class选择器10>标签选择器*1 注意：并集选择器，相当于多个选择器拆开写，所以，并集选择器优先级不能累加。
- 当选择器作用于同一层，且优先级权重相等时。则，写在最后选择器生效。
2.2选择器的特异度（Specificity）
- 如果有两条或两条以上指向同一元素的冲突 CSS 规则，则浏览器将遵循一些原则来确定哪一条是最具体的，并因此胜出。
- 将特异性（specificity）视为得分/等级，能够确定最终将哪些样式声明应用于元素。通用选择器（*）具有较低的特异性，而 ID 选择器具有较高的特异性！
- 注意：这种特异性是 CSS 规则不适用于某些元素的常见原因，尽管您可能会认为应该适用。
2.3CSS求值过程
- 确定声明值：将没有样式冲突的属性先确定下来；
- 解决层叠冲突：对样式表中有冲突的声明使用层叠规则，确定css属性值（层叠规则!important > 用户样式表 > 浏览器默认样式表）；
- 继承：对仍然没有值的属性，若可以继承，则继承父元素的值；
- 默认值：对仍然没有值的属性，使用默认值。
2.4CSS继承
CSS的某些属性具有继承性(Inherited)
- 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
- 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
2.5布局是什么
CSS布局就是定义网页各个元素的排列方式，把元素按正确的大小，摆放在正确的位置上。 传统PC端布局的三种方式，需要互相配合使用。
2.6布局相关技术
所有CSS布局技术依赖于三个基本概念：定位，浮动和空白边操作。
