# 理解CSS | 青训营笔记

Donal_ga
130 阅读3分钟

理解CSS | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

CSS解析相关

解析html文档时会将遇到的style和link标签进行资源下载并加载，遍历所有元素以及这些元素对应的属性值在寻找这些特定的属性时都需要这么一个遍历过程

  1. 拿到规则后进行条件筛选，包括选择器匹配，属性有效，符合当前media等，查看选择器是否匹配
  2. 规则筛选完后会去声明值declared Values，即一个元素的某属性可能有0到多个声明值，通过计算层叠值Cascaded Value（!important, 选择器特异性，书写顺序等选出优先级最高的一个属性值），当层叠值为空时，使用继承或初始值
  3. 最终得到Computed Value（浏览器拿到CSS之后能立马转化出来的），浏览器会在不进行实际布局的情况，所能得到的最具体的值
  4. Used Value，进行实际布局时使用的值，此时不会再有相对值或关键字

比如CSS属性计算

  1. 每个属性有一个初始值，background-color的初始值是transparent，margin-left：0
  2. 可以用initial关键字显示重置为初始值，background-color：initial

布局相关

元素相关

  1. 标准盒子：content box——width = content width
  2. 怪异盒子：border box——width = content width + padding + border
  3. 块级
  4. IFC（行级排版上下文）
  5. BFC：专门触发BFC的属性，display：flow-root或者在块级生成overflow：非visible PS: height的百分数值只有当容器有指定高度时才会生效

grid

  1. 通过display：grid生成一个块级的Grid容器
  2. 使用grid-template相关属性将容器划分为网格
  3. 设置每个子项占据哪些行/列 相关属性：grid-template(等同于grid-template-rows, grid-template-columns，'/'分开), grid-area(等同于grid-row-start, grid-column-start, grid-row-end, grid-column-end，用/分开)

Flex

新的排版上下文，可以控制子级盒子的

  1. 摆放流向(row, column)，摆放顺序(row-reverse)
  2. 盒子宽度和高度，水平和垂直方向的对齐（align-items和justify-content）
  3. 是否允许折行（flex-wrap），顺序（order）
  4. Flexibility：即flex属性，实际上分为flex-grow（有剩余空间时的伸展能力）；flex-shrink（容器空间不足时收缩的能力）；flex-basic（没有伸缩或收缩时的基础长度）

float

目前只用于图片文字环绕的效果，一般清楚浮动这些以已经不用考虑,但为了应付面试的恶心问题可以稍微提一下

  1. 设置伪类清楚浮动或后面元素，clear:both
  2. 触发BFC的方法都可以，如flow-root和overflow设置非visible等

position

  1. absolute：脱离常规文档流；相对于最近的非static祖先定位；不会对流内元素布局造成影响
  2. fixed：脱离常规文档流；
  3. sticky
  4. relative:
    • 遵循文档流；
    • 相对于自己本应该在的位置进行偏移（即其他元素不受它偏移所影响）；
    • 使用top,left,bottom,right设置偏移长度；
avatar
文章
阅读
粉丝