理解CSS | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 2 天学习内容： 1、走进前端技术栈CSS

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

二、走进前端技术栈CSS

Cascading Style Sheets，层叠样式表，用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

h1{	//选择器Selector
    color:white;	//选择器Property：属性值Value，加起来叫声明
    font-size:14px;
}

页面中使用CSS

外链

#在html中导入
<link rel="stylesheet" href="/style.css">

嵌入

#在html代码中添加一块
<style>
    li{margin:0;list-style:none;}
    p{margin:lem 0;}
</style>

内联
```
<p style="margin:lem 0">xxx</p>
```

CSS工作流程
CSS的元素组成
1. 选择器Selector
  - 找出页面中的元素，以便给他们设置样式
  - 使用多种方式选择元素
    - 按照标签名、类名或id
    - 按照属性
    - 按照DOM树中的位置
  - ```
  #id选择器
  <p id="xxx"></p>
  #xxx{
  	color:gray;
  }
  #类名选择器
  <p class="xxx"></p>
  .xxx{
  	color:red;
  }
  #属性选择器
  <input value="xxx" disabled />	#disabled表示不可输入
  [disabled]{
  	color:#bfa;
  }
  <input type="password" />
  input[type="password"]{
  	color:#bfa;
  }
```
- 伪类来选
  - 不基于标签和属性定位元素
  - 几种伪类
    - 状态伪类：这个元素处于某种特定状态才会被选中，比如访问过的链接等等
    - 结构性伪类：根据元素在DOM树中出现的位置来选择
- 通过组合的方式来选择
2. 样式内容
  1. 颜色
    - 使用RGB or RGBA
    - 使用HSL：色相（0~360）＋饱和度（百分比）＋亮度（百分比）
  2. 字体
    - font-family
      - 可以用逗号分隔开多个，以便不同设备都能适配
      - 可以用通用字体族
      - 设置了font-family之后，应该再用通用字体族再设置一次font-family，如果设备找不到自己选择的字体，会从通用字体族中找一个，这样差异不大
      - 一般来说要英文字体显示在中文字体前面，因为很多中文字体会包含26个字母
      - 使用web-font从网络导入字体，性能下降
        
        @font-face{ font-family:f1; src: url("xxx.woff2") format("woff2"); }
    - font-size
      - 关键字
        
        small、medium、large
      - 长度
        
        px、em：em为相对父元素字体大小的倍数
      - 百分数
        
        相对于父元素字体大小
    - font-style
      - 设置斜体
      - normal、italic
    - font-weight
      - 字的粗细，从100到900的数字
      - normal：400
      - bold：700
    - *line-height
      - 行高，两行文字baseline之间的距离
      - 如果用没有单位的数字表示，即行高为字体大小的多少倍
  3. white-space
    - 处理空格和换行，html默认是多个空格当一个来渲染，用white-space实现自己控制
    - normal、nowrap、pre、pre-wrap、pre-line：

三、深入CSS

CSS选择器的特异度：选择哪项规则进行匹配，优先级
- 根据选择器中出现的东西决定优先级
- 如果一个元素对应存在多个选择器，则优先级高的样式会覆盖优先级低，优先级低的样式也可以有一部分样式存在这个元素中，实现复用
CSS的继承
- 某些属性可以自动继承父元素属性值，除非显式指定一个值
- 文字属性大部分都可以继承，跟盒模型相关的属性不可以继承
- 不能默认继承的属性，可以使用设置Value为inherit来继承（显式继承）
- 每个属性都有一个初始值，如果继承找不到就用这个初始值，如果想把属性值重新初始化，将Value设置为initial重置（显式继承）
CSS求值过程
- CSS和HTML怎么发生关系，即一个元素的样式是怎么被计算出来的
- filtering 过程对每个元素都找选择出自己的样式，是一个集合，即声明值
- cascading 过程对声明值进行选择，得到层叠值
- constraining 过程结束之后就得到了渲染时实际生效的值（实际值）
- 继承实际是继承父元素的计算值
CSS的布局、
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
- 盒模型：在布局时将元素理解成盒子
- margin：auto 实现水平居中。margin在水平距离中存在折叠，相连的两个容器的水平方向上的margin会选一个大的（margin collapse）
- 默认下的content-box模式，这个时候设置宽高是content的宽高，如果加了padding和border，盒子会变大。可以用box-sizing：border-box改成border-box模式，此时设置的宽高是content＋padding＋border的总宽高，此时content的大小会自动计算的
- 如果content内容超出了盒子的范围，使用overflow设置，默认为visible，超出的部分也显示，也可以改成hidden（截掉）和scroll（出现滚动条）
- 三种布局方式
  1. 常规流、文档流
    1. 行级
      - 和其他行级盒子一起放在一行或拆开成多行，行级元素中的width和height不适用
    2. 块级
      - 不和其他盒子并列摆放，适用于所有的盒模型模型
      - BFC内的排版规则
        
        盒子从上到下排放
        
        垂直margin合并
        
        BFC内盒子的margin不会与外面的合并
        
        BFC不会和浮动元素重叠
    3. 表格布局
    4. FlexBox
    5. Grid布局
      - 最强大的布局方式
  2. 浮动
    - 实现文字环绕效果
  3. 绝对定位
    - position属性
      - static：默认值，非定位元素
      - relative：在常规流内，相对于自己原来的位置进行偏移，不影响其他元素位置
      - absolute：脱离常规流，相对于最近的非static祖先定位，不会对流内元素布局造成影响，就当absolute这个元素不存在一样
      - fixed：脱离常规流，总是相对于窗口（视口）进行定位，可以实现固定导航栏
- 块级元素和行级元素
  - 块级元素产生块级盒子
    - body、article、div、main、section、h1-6、p、ul、li等
  - 行级元素生成行级盒子，内容分散在多个行盒中
    - span、em、strong、cite、code等
  - 可以通过指定display属性改变盒子属性：block和inline