7-理解CSS

一、概述

0. 解决排版和装饰问题
1. CSS2：分离。CSS做表现；HTML做内容
2. CSS2.1：修正、扩展
3. CSS3：规范模块化

二、基础知识

0. CSS（Cascady [层叠] Style Slects [样式表] ）

   0. Cascady [层叠]
   1. Style Slects [样式表]
   2. Cascady [层叠] ——>解决冲突<——Style Slects [样式表]

1. 层叠规则（优先级从高到低）

   0. 样式表束缚

      0. 用户代理样式表 !important
      1. 用户样式表 !important
      2. 作者样式表!important
      3. 作者样式表 developer
      4. 用户样式表 很少
      5. 用户代理样式 浏览器默认样式

   1. 选择器优先级

      0. 内联>id>class=attribute=pseudo-class>type=pseudo-element

   2. 源码位置

   3. 注意

      0. 少用id
      1. 尽量不用pseudo（应该）
      2. 自己定义的样式放在样式库之后

2. 继承 inherit

   0. CSS的值

      0. 文字类（string）
      1. 数值
      2. 函数生成

   1. 单位

      0. 长度

         0. 绝对长度
         1. 相对长度

      1. 角度

      2. 时间

      3. 分辨率

3. 盒模型：视觉格式化模型

   0. display 控制盒子模型

   1. boxsizing；width，height：控制盒子大小、计算方式

   2. overflow：控制盒中内容六

   3. position：控制定位

   4. visibility：是否可见

   5. 任意盒子

      0. 外部显示类型
      1. 内部显示类型

4. 模型实例 （自己取的标题）

   0. 三角形：border
   1. 固定比例矩形3:4：padding-bottom 75%
   2. 某种矩形：margin auto
   3. 渐变边框： （没来得及记，看不懂嘞）
   4. 负外边框

三、布局

（一）杂七杂八

0. 常规流

   0. 外...类型block——块级盒子
   1. 外...类型inline（PPT上确实是“外”）——内联级盒子

1. 块级格式上下文

   BFC

2. 0. 弹性盒子

   一维布局

   0. grid

   网络布局

3. Flex——一维；Grid——二维

4. position 定位

（二）、层叠上下文

0. render layer

1. index用变量去合理（去“定位”？ ）

2. 变形、过度、动画

   0. 2D
   1. 3D：transform、preserve、perspective
   2. transition过渡；animation动画

3. 布局——绘制——合成

（三）、响应式设计

0. 媒体查调（尽量减少断点）

（四）、设备像素、参考像素、移动端设备配置（好像是移动什么配置）

0. 设备像素（物理像素）

1. 像素密度

   0. dpi：每英寸多少点
   1. ppi：每英寸多少像素数

2. CSS像素

3. PPR=设备像素/CSS像素

4. 移动端viewpoint

（五）相对长度的使用

0. em（某种情况下会8无限放大（* 1.5* 1.5...）或缩小(* 0.5 * 0.5)，不常用）

1. rem

   0. vm 视图宽度（1%）
   1. vh 视图高度

四、CSS生态**

（一） 语言**——CSS预处理器

0. 自定义变量
1. 嵌套、作用域
2. mixins、继承
3. 操作符

（二） CSS后处理器

0. postcs

（三）CSS模块化

0. BEM
1. vue-loader
2. scoped

（四）工程架构

0. css-in-js

1. -styled component 机制浅析

2. pos &cons

   0. 一定的学习成本
   1. 代码风格和传统相差较大，可读性降低

3. 原子化CSS

   0. 0. 实用工具库优先
      1. 按需生成
      2. 支持配置样式规则&自定义机制

   1. 优点

      0. 减少CSS体积
      1. 原子类命名
      2. 复用率高

   2. 缺点

      0. 增加原子化类名长度
      1. 初始使用有学习、记忆成本

总结

我去讲得太快了，记得太草了。第一遍听，完全听不懂呀。

一下子接触新的知识新的领域，难度“飚”升。