这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天，今天学习的内容主要是CSS，以下是本次课程的重点内容：
- CSS代码构成
- CSS使用方法
- CSS流程之选择器组、文本渲染
- 调试CSS
- CSS选择器的特异度
- CSS继承
- CSS求值过程解析
- CSS布局方式及相关技术
- CSS盒模型-行级
- CSS盒模型-块级
CSS代码构成
CSS的中文名是层叠样式表，它不仅仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
以上是CSS最基本的代码构成，即CSS实际上是由一个个选择器构成的，选择器中是具体的属性，对选择的标签进行修饰。
CSS使用方法
CSS一共有三种使用的方法，分别是：- 外链
- 嵌入
- 内联
以下是CSS的工作模式：
CSS流程之选择器组、文本渲染
选择器是CSS中一个非常重要的概念，可以说是选择器构成了CSS，它能够帮助找出页面中的元素，以便给他们设置样式。选择器的种类也有很多，我们可以按照标签名、类名或者id来选择元素，也可以按照属性选择元素，更可以按照DOM树中的位置进行选择。一个比较重要的选择器————伪类选择器，它不基于标签和属性定位元素，有两种（状态伪类、结构性伪类）。
组合
- 直接组合
- 后代组合
- 亲子组合
- 兄弟选择器
- 相邻选择器
调试CSS
颜色的表示方法：rgb（包括alpha不透明度）、hsl、命名法（white、black）。通用字体族：Serif（衬线体）、Sans-Serif（无衬线体）、Cursive（手写体）、Fantasy、Monospace（等宽字体）
font-size：
- 关键字：small、medium、large
- 长度：px、em
- 百分数：相对于父元素字体大小
CSS选择器的特异度
CSS代码实际部署的过程CSS继承
CSS求值过程解析
CSS布局方式及相关技术
布局：确定内容大小和位置的算法，依据元素、容器、兄弟节点和内容等信息进行计算。
最基本的一个盒模型示意图：
content-box中设置的width和height实际上只是content的一个高度和宽度。如果不进行box-sizing的设置，那么默认就是content-box。
注意：padding如果四个都设置了那么从前往后四个值依次修饰上右下左，如果只设置了两个值则分别修饰上下和左右。
border:指定容器边框的粗细样式和颜色。
当页面中同时存在两个元素（例如div），其中上面的设置了margin-bottom:100px,而上面的设置了margin-top:100px，那么实际上这两个元素上下的间隔并不是200px，而是100px，CSS当中对着一种情况的考虑方法是，取这两个值当中较大的那个值作为这两个元素之间的实际间隔，如下图：
border-box中设置的width和height实际上是包括border、padding以及content在内的一个高度和宽度。
margin:auto能够实现水平居中。
当盒模型中已经确定了宽高，而其中的内容可能会超出这个盒模型的范围，这个时候我们可以设置overflow属性来确定是否展示。
overflow四种属性值：
- visible：直接强制超出盒模型显示出来
- hidden：将超出部分截取掉不显示
- scroll：对于超出的部分可以设置滚动条滚动显示
- auto：如果超出了就是scroll，没超出就是visible
CSS盒模型-行级
对于块级盒模型来说，他不能和其他盒子并列摆放，也就是不能够多个盒模型放同一行，但是所有盒模型该有的属性他都有，而行级盒模型，他能够和其他行级盒子一起放在同一行或者是拆开成多行，而对他来说其中的width和height属性都是不适用的。
行级/块级盒子是CSS中的概念，而行级/块级元素则是HTML当中的概念，
