深入理解CSS
HTML提出
CSS1解决网页排版布局和装饰问题，第一个有“层叠（casading）”概念的语言
CSS2表现和内容分离
CSS2.1对CSS2的修正，扩展代替CSS2
CSS3规范模块化发展，样式丰富，酷炫，提高网站的可维护性以及性能速度
基础知识
Casading规则，选择器，集成，值和单位，盒模型
层叠（Cascading）、优先级
CSS-Cascading Style Sheets 层叠（解决冲突） 样式表（规则声明的集合 ，产生冲突）
层叠三大规则
选择器尽量少用id，尽量不要用！ important，自己的样式加载在引用库样式的后面
继承
大部分具有继承特性的属性跟文本相关（从父到子去继承）
inherit关键字显示指定一个属性值从其父元素继承
CSS的质和单位
选择器{属性：值；}
值分类：文字类，数值类，函数生成
单位（长度，角度，时间，分辨率）
盒模型
浏览器根据视觉格式化模型，将所有元素表示为盒子模型，CSS通过盒模型做layout
控制盒子类型，大小&计算方式，内容流，定位，是否可见
三角形 boeder
实现固定比例矩形padding
实现水平居中Margin auto
实现渐变边框background-clip，background-origin
margin负值最终减少的是外界可感知的宽高
布局和定位
概述
CSS3之前的常用布局
Normal Flow：默认的布局方式，有块级格式化上下文和内联，格式化上下文
Float 浮动流 ：用Float属性控制脱流，做横向布局
Positioning 定位流：用position属性控制flexible和absolute脱离文档流可以自由定位，覆盖等
CSS3之后的新布局
Flex弹性盒子布局 一维空间布局
Grid网格布局 二维空间布局
Multicol多列布局 文本、内容的多列布局
常规布局
块级格式化上下文（BFC）
内联格式化上下文（IFC）linebox
BFC外边距塌陷
弹性盒子布局
网格布局
对比
定位Position
Relative ；absolute； fixed；sticky
层叠上下文（The Stacking Context）
对HTML元素的三位构想，将元素沿着垂直屏幕虚构的Z轴排开
层叠水平
编写z-index的建议
1.使用css变量或者预处理语言的变量，管理z-index的值
2.将预设间隔设置10或100，方便后续的插入
变形、过度、动画
变形transform静态
transform2D（transform相关属性：移动，旋转，放缩，变形矩阵；transform-origin：right top 、center变形原点；）
transform3D：增加了transform preserve-3D看字元素的3d表现；perspective，perspective-origin观测点的位置和距离
过度transition动态
从起始到终止发生一次动画的变化
timing-function：线性，贝塞尔曲线，阶跃
animation动画
@keyframes关键帧 用来定义动画过程中出现的关键样式
在关键帧和关键帧之间浏览器将插入补充的帧图像形成动画
animation-*相关属性 用来为元素添加动画
animation-name
Animation-duration
Animation-timing-function
性能相关（浏览器渲染过程中的三个阶段）
布局（计算布局，宽、高、位置等改变都会重新布局reflow）-------绘制-（填充像素，文本、着色。背景边框等改变会触发reflow，某些渲染层形成合成层，拥有单独的图层（GraphicLayer）有GPU绘制，即所谓硬件加速）------合成（收集所有绘制完成的图层按照顺序合成显示）
如何写动画性能更好
1.尽量不用触发reflow
2.在遇到性能问题时可以触发硬件加速，比如设置will-change属性,设置transform3d等
3.尽量使用transform和opacity去写动画
响应式设计
响应式设计推荐遵循的原则
- 优先选用流式布局，如百分比、flex、grid等
- 使用响应式图片，匹配尺寸，节省宽带
- 使用媒体查询为不同的设备类型做适配
- 给移动端设备设置简单，统一的视口
- 使用相对长度，em、rem、vw做为长度度量
媒体查询
媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如screen，print）以及媒体特性（如视口宽度，屏幕比例，设备方向，横向或纵向）做为约束条件
减少断点
设备像素，参考像素和移动设备视口
设备像素（物理像素，仅硬件相关）像素密度：dpi 每英寸多少点；ppi每英寸多少像素
css像素（参考像素）
DPR设备像素比：设备像素/CSS像素（未放缩）
移动端的viewpoint的设置
相对长度 em 不在font-size有继承的弊端不适用 rem根元素的字体大小
vw和vh
CSS生态相关
可编程性较差，样式表集合
语言增强---CSS预处理器（SCSS，Less，stylus--预处理器---CSS）
自定义变量，提高可复用；嵌套，作用域，避免迁居污染，结构层次清晰，减少复杂组合选择器；mixins、继承，提高可复用，可维护性；操作符，条件/循环语句，自定义函数，提高可编程能力，增加灵活性
| SCSS | less | stylus | |
|---|---|---|---|
| CSS语法兼容 | 兼容 | 兼容 | 常规兼容 |
| 可编程能力 | 较强 | 较弱 | 较强 |
| 省去活跃，使用人数 | 最多 | 较多 | 相对少 |
后处理器postcss
工程架构
css模块
css-in-js：将应用的CSS样式写在JavaScript文件里面，利用JS动态生成CSS
Inline-style（抛弃）
Unique classname（styled-component）
styled-component机制浅析
1.生成第一个classname作为componentID
2.生成第二个classname作为唯一类名（hash值），使用stylis，生成和唯一类名关联的css字符串
3.唯一类名对应的css样式insert到的中
4.将两个类名写到目标节点的class中
优：
有效避免样式全局污染
复杂交互样式可以更灵活的编写
首屏渲染无多余cSS阻塞
缺：
有一定的学习成本
存在运行时的消耗
css-in-js的库导致打包体积增大
代码的可读性降低
原子化css（小巧，以视觉效果命名）
1.实用工具库优先(Utilities-First)
2.按需生成
3.支持配置样式规则&自定义插件
优：减少css体积
原子类复用率高
移动和删除html节点变得容易
减少classname的命名复杂度
缺：
增加html类名长度
初始使用时有学习和记忆成本
样式库的定义成本（不完全是缺点）
总结
CSS 是一种用于描述网页样式的语言，它可以控制网页的布局、字体、颜色、背景等方面的样式。深入理解 CSS 对前端开发非常重要，因为它是构建网页界面的基础之一。
具体来说，深入理解 CSS 可以帮助前端开发者实现以下功能：
- 布局：使用 CSS 可以定义网页中元素的位置、大小和排列方式，从而实现不同的布局效果。
- 样式设计：CSS 可以定义网页中元素的字体、颜色、背景等样式属性，使网页具有更好的视觉效果。
- 响应式设计：CSS 可以实现响应式设计，根据设备尺寸和屏幕分辨率自动调整网页布局和样式。
- 动画特效：CSS 可以实现各种动画特效，如渐变、旋转、缩放、移动等，增强用户体验。
总之，深入理解 CSS 对前端开发者来说是非常重要的，它能够提高开发效率、优化用户体验和提高网站的可访问性。
