这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。
1. CSS 代码构成
一张图解析
2. CSS 使用方法
一 外链，link标签引入，常用
二 嵌入，组件化开发使用
三 内联，不推荐，使用场景很少，例如使用第三方组件库，但是数量不宜过多
3. CSS 流程之选择器组、文本渲染
Css如何工作的？
继续图解~
Html、css单独解析，将解析出来的css样式添加到dom树上进行渲染，最终形成展示出来的页面。
选择器的使用方法
-
按照标签名、类（同一类型的，用class）、id（唯一的）
-
按照属性（下面例子中的[ ]）
伪类选择器 加： 常用的:first-child/:last child→元素在父级节点中的相对位置
通配选择器 * 匹配所有的元素
组合方法
- 按照DOM树中的位置
4. 一些简单的CSS
颜色的css：
RGB表示方法（#11ff22或 rgb（0，0，0））
HSL表示方法：h色相 s饱和度 l亮度 hsl（18，91%，84%）
直接指定颜色的值
字体的css：
font-family（字体） font-size（大小）line-height（行高）text-align（居中/左/右）
5. CSS 选择器的特异度
多个选择器如何生效？ → 选择器的优先级（特异度）
越特殊优先级越高：id标签名>.伪类>标签
6. CSS 继承
-
某些属性会自动继承父元素的计算值。
-
一般来说文字相关属性都可以继承，和模型相关属性不可继承。
-
添加inherit使不可继承的属性转变为可继承属性。
-
一个元素是未继承到值，同时未设置值，它便会使用初始值。可以使用initial为元素重置初始值。
7. CSS 求值过程解析
图片流
8. CSS 布局方式及相关技术
什么是布局？
-
确定内容的大小和位置的算法
-
依据元素、容器、兄弟节点和内容等信息来计算
三种主要布局
常规流
所谓盒模型
CSS 盒模型 - 行级与块级
一般来讲，块级元素生成块级盒子，行级元素生成行级元素
浮动
-
一个浮动元素会向左或向右移动，直到它的外边缘碰到边框或另一个浮动框的边框为止。
-
浮动元素之后的元素将围绕它。
-
浮动元素之前的元素将不会受到影响。
-
例如：图像向右浮动，下面的文本将环绕在它左边
绝对定位
绝对定位使元素的位置与文档无关，因此不占据空间。通过index设置优先级
