目录
1，基础知识
2，布局和定位
3，层叠上下文（The Stcaking Context）
4，变形、过渡、动画
5，响应式设计
6，css生态
基础知识
层叠优先级
1，样式表来源 优先级：
!imortant 浏览器默认样式>!imortant 作者样式表> 浏览器默认样式>作者样式表
选择器优先级：
内联 (o)>id (a) >class=attribute=pseudo-class (b) >type=pseudo-element (c)
源码位置：
谁最后声明谁生效
PS:!imotant会限制灵活性
继承
大部分继承与文本相关的属性；div继承content，span继承menu
----例子
CS值和单位
盒模型
margin auto更多表现
：blog.csdn.net/linshizhan/…
负margin不提倡经常使用
布局
CSS 3 之前常用：常规流（默认布局），浮动流（float控制），定位流（position控制）
常规流布局
<从上到下，从左到右;只参与一种形式上下文>
块级格式化上下文
外边距塌陷
内联级格式化上下文
弹性盒子布局
例子出处：css-tricks.com/using-flexb…
GRID:ishadeed.com/article/gri…
定位流布局：
层叠上下文
浏览器渲染过程：www.chromium.org/developers/…
详见：developer.mozilla.org/zh-CN/docs/…
层叠上下文不仅是层叠上下文的顺序，上下文内的元素也有顺序
变形，过渡，动画
MDN about animation:developer.mozilla.org/zh-CN/docs/…
动画性能优化：fed.taobao.org/blog/taofed…
响应式设计
响应式设计原则：
√优先选用流失布局，如百分比,flex,grid
√使用响应式图片，匹配尺寸，节省带宽
√使用媒体查询为不同的设备类型做匹配
√给移动端设备设置简单、统一的视口
√使用相对长度，em，rem，vw作为长度度量
媒体查询使用
设备像素、参考像素和移动设备视口
DPI&PPI
CSS像素*(作为了解)
移动端viewpoint
相对长度的使用
各种方案：
详情：www.w3cplus.com/css/vw-for-…
CSS生态相关
语言增强--预处理器 例子：
语言增强--后处理器
postCSS 插件：postcss.org/docs/postcs…
工程架构: CSS 模块化、 CSS-In-Js、 Atomic CSS
postcss-modules：github.com/madyankin/p…
css-loader:github.com/webpack-con…
CSS Modules:github.com/css-modules…
CSS IN JS:www.cssinjsplayground.com/?activeModu…
其他组件：styled-components.com/docs/advanc…
Tailwind:tailwindui.com/
Windicss:cn.windicss.org/
Tachyons:tachyons.io/
unocss:github.com/unocss/unoc…
atomic-css-in-js:sebastienlorber.com/atomic-css-…
The pros and cons of something are its advantages and disadvantages
