1. 什么是CSS?

CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。

2. css基础

2.1 体系化学习css

2.1.1 怎么学

学一门语言要学什么

1语法 2如何调试 3在哪查资料 4标准制定者是谁

如何学

CRM

2.1.2 css语法

样式语法选择器{ 属性名：属性值； }

at语法。。。。。。。

2.1.3 如何调试CSS

方法

1 W3C验证器
2 VScode看颜色
3 Webstorm看颜色
4 开发者工具看警告

如何使用开发者工具

找到你脑中的标签--看他是否有选择器--看他的样式是否被划掉 --看他的样式是否有警告

==Border调试法==

2.1.4 在哪查资料。。。。。

2.1.5 在哪搜练习素材。。。

2.2 文档流——盒模型

3. 布局

Float Flex Grid

4.定位

一个div的分层 position的五个取值层叠上下文

5.动画

5.1动画原理

5.2浏览器渲染原理

1根据HTML构建HTML树（DOM）
2根据CSS构建CSS树（CSSOM）
3将两颗树合并成一棵渲染树（render tree）
4Layout布局（文档流、盒模型、计算大小和位置）
5Paint绘制（把边框颜色、文字颜色、阴影等画出来）
6Compose合成（根据层叠关系展示画面）

5.3transform

5.4动画的两种做法（transition、animation）

transition

使用两次transform
a--transform--b
b--transform--c
如何知道到了中间点呢？
用setTimeout或者监听transitionend事件示例

animation

声明关键帧添加动画示例

animation语法

标准语法：


 @keyframes slidein {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

 @keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

缩写语法：

animation: 时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名

css总结