理解CSS

一，基础知识

层叠（Casading）规则、选择器、继承、值和单位、盒模型

层叠三大规则：

由层叠概念引申出的 css 代码 good pracitce

尽量少用id
尽量不要用 !important
自己的样式加载在引用库样式的后面

继承

大部分具有继承特性的属性和文本相关
可以使用inherit关键字显式指定一个属性值从其父元素继承

值和单位

下面这张图显示的非常清楚

盒模型

盒子模型有俩个：标准盒子模型，IE盒子模型

IE的盒子模型与标准浏览器的盒子模型不同之处在于：

IE：

标准：

通过盒模型可以实现一些展现形式：

实现三角形
实现固定比例矩形
实现水平居中
实现渐变边框

二，布局和定位

常规流、弹性盒子、Grid、定位

BFC(block formatting context):块级格式化上下文

如何触发一个盒子的BFC特性?以下条件满足任何一个即可

display: flow-root；
inline-block；
position: absolute fixed；
float: 不为none;
overflow:不为 visible

使用flex和grid的小tips

1.大面积或整体布局推荐使用Grid布局

2.小面积或组件中，或Grid ltem中可以使用Flex做灵活布局

定位Position

三，层叠上下文(The Stacking Context)

层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开

四，变形，过渡，动画

变形（transform）：

2D相关属性：

transform：translate（移动)
transform：rotate(旋转)
transform：scale(放缩)
transform：matrix(变形矩阵)
transform-origin：right-top , center等

3D相关属性:

transform: translate3d 、rotate3d，scale3d、matrix3d等
transform-origin: right top、50px 30px 等表示变形时依据的原点
transform-style:flat 或 preserve-3d 看子元素的3d表现
perspective:观看点距离Z0这个平面的距离可以在transform中用perspective()使用作用为当前元素也可以直接使用，给后代元素一个统一值
perspective-origin: 观看者的位置，如 top、 bottom等
backface-visibility: 元素正面只有朝向观察者的时候可见

过渡(transition):

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态

动画(animation)：

@keyframes 关键用来定义动画过程中出现的关键样式

animation-*相关属性用来为元素添加动画

animation-name: 定义好的关键帧的名字

animation-duration: 动画时长

animation-timing-function: 动画节奏

animation-delay: 延时开始的时间

animation-iteration-count: 执行次数

animation-direction: 是否反向或交替

animation-fill-mode :动画执行前后的样式采用

animation-play-state: 动画运行状态

五，响应式设计

响应式设计原则

媒体查询

相对长度

绝对长度和视口

六，CSS生态相关

语言增强: 预处理器、后处理器 工程架构:CSS 模块化、 CSS-In-Js、 Atomic CSS

预处理器

scss,less,stylus简单对比

CSS 模块化

CSS Module 就是为了解决全局污染问题出现的方案，解决CSS全局污染，本质上是保证样式集合对应的选择器是唯一的,从这个角度看，主流的单纯针对于防止全局污染的方案大概有:

BEM命名规范
vue-loader 的scoped 方案
CSS Modules

css-in-js

css-in-js:将应用的CSS样式写在JavaScript文件里面，利用js动态生成css

原子化CSS

原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并以视觉效果进行命名。

现有的库or框架：Tailwind、Windicss、Tachyons , unocss ······

七，总结

这堂课内容还是很干的，展现了关于css的历史，还有具体css的知识点比如布局定位等，比较全面。对我而言是对css整体有了一个更好的把握，从而能够更好的落实到具体的知识点。当然还是要做几个小demo来更深刻的理解内容。

理解CSS | 青训营笔记