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

CSS 学习笔记

css细碎知识点

1. 三种嵌入方式

• 外链：文件的形式
• 嵌入：例如vue等在一个文件中嵌入
• 内联：在标签内

2. 几种选择器再复习一下

• 通配
• id
• class
• 属性 []
  • a[href^="#"]: 链接的 href以#开头
  • a[href$=".jpg"]: 链接的 href以.jpg结尾
• 伪类
  • 状态
  • 结构伪类 first-child, last-child等
• 组合

3.通用字体组

• Serif: 衬线体
• Sans-Serif： 无衬线体
• Cursive：手写体
• Fantasy：夸张
• Monospace：等宽字体

font-family: 英文写前面，中文写后面，因为它是字符匹配

4. white-space来控制空白符

5. 选择器的特异度

id 伪类 标签

6. CSS求值过程

读取文件得到DOM树和样式规则后对每一个DOM节点进行处理

filtering: 过滤，对所有的样式规则进行过滤，主要包括选择器是否匹配，属性是否有效，是否符合当前的媒体查询条件

申明值: 通过filtering得到申明值，形如p{font.size: 16px}, p.text{font-size: 1.2em}

cascading: 层叠，对同一个属性，按照来源，!important, 选择器特异性，书写顺序等选出一个优先级最高的属性值

层叠值: 在cascading中获胜的那个值

defaulting: 继承或采用默认

指定值：经过上述处理，使它的每一个必要属性值都不为空

resolving: 计算，将一些相对值或者绝对路径值进行转换

计算值: 经过resolving后得到的值，就是浏览器在渲染实际的界面前得到的最具体的值

formating: 将计算值进一步转换，比如关键字，百分比都转换为绝对值

使用值: 经过转换后得到的进行实际布局的值，不会再有相对值和关键字

constraining: 进行一些限制，例如浮点数转换为整数，max-width的限制等

实际值：最终的值，你在调试时看到的值

7.布局相关技术

• 常规流
  • 行级
  • 块级
  • 表格布局
  • Flexbox: 主轴与测轴，弹性伸缩
  • Grid
• 浮动模型
• 绝对模型

8.flex的弹性（flexibility）

flex的弹性是指将原来的宽度分派后，剩余的空间再进行分派，不是就单纯的按比例分配 可以看作是一维的

• flex-grow:
• flex-shrink:
• flex-basis：

9.Grid布局

主要涉及如何划分区块，以及利用grid-line来确定区块

10.绝对定位（position属性）

• staic: 默认的文档流定位
• relative: 相对
• absolute: 绝对 相对的是最近的非staic元素
• fixed: 绝对 但相对的是浏览器窗口