理解css
00课程概述
亚马逊网站对比：呈现更多交互和信息量
Css1第一个有层叠概念的语言（casading)
css2表现和内容分离 css2.1 对2的修正扩展
css3规范模块化发展 样式丰富 提高网站可维护性与性能
部分css知识模块，布局、层叠上下文 css生态
01 基础知识
Css- cascading style sheets层叠样式表
(一）层叠三大规则：1。样式来源表9优先程度递减）
2。选择器优先级
3.源码位置
1.样式表来源重要排序：用户代理表（浏览器默认样式）—用户样式表（很少有）—作者样式表（developer写的 99%都是这个）—作者样式表中的！Important—用户样式表中的！Important—用户代理样式表中的！Important
2.选择器：基础 组合 属性 伪类 伪元素
选择器优先级：内联（不是选择器）>id>class=attribute=pseudo-class>type=pseudo-element
(0,1,2)<(1,1,0)
3.源码顺序 the last declaration in document order wins.
对于 @import的样式，根据它的顺序
对于link和style标签的样式，根据在document中的顺序决定
4.由层叠概念引出的css代码的good practice
选择尽量少用id（不利于css复用和覆盖
尽量不要用！Important（级别太高 扩展和灵活性会被压缩
自己的样式加载在引用库样式的后面
5.继承
样式生效：默认继承文本属性
可以使用inherit 关键字显式指定一个属性值从其父继承
6.css的值和单位
7.盒模型 视觉格式化模型
内外边距 边界 宽高
由盒模型的特性能实现一些展现形式？
盒模型-负外边距
Padding，border，margin中，只有margin可以设置为负值
外界可以感知的，局部调整因为会使代码难以维护
02 概述
把文本脱离文本流-常规流布局 更多布局
1.常规流布局 只会参与一种盒子的上下文
BFC:root元素内部会形成新的格式化上下文 沙盒特性
外边距折叠：会产生合并计算导致外边距塌陷
消除：上下边距之间加上border padding
在父子元素重叠时，设置父元素为BFC 使得父子在不同bfc
2.内联级格式化上下文
Line box高度计算（line height)：最高元素的顶和最低元素的底的差值 天然垂直居中
实际case：单行元素居中 文字icon垂直对齐
3.弹性盒子布局 一维布局但两个控制方向
展示灵活文件长度 展示筛子上六个面
4.网格布局：grid 行和列的二维布局
作用父元素：网格怎么划分
作用子元素：占用位置
Grid flex对比以及实用策略：大面积或整体布局推荐grid，小面积及组件 或grid item可以使用flex
5.定位position
为了可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性取值非static的时候，可以使用top,right,bottom,left
03 层叠上下文（the stacking context)
对于html元素的三位构想 将元素沿着垂直屏幕的虚构z轴排开
一个层叠上下文对应一个渲染层的render layer
形成新的上下文的条件（任一
层叠上下文—stacking order
层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序
css会优先解释内容index元素优先级比较高
层叠顺序不仅指不同层叠的上下文顺序，同一个层叠上下文元素间也有顺序
Z-index=0新的上下文 子元素无法超过父（和auto不同
编写格式：
04 变形 过渡 对话
Transform 变形 筛子立体
Transition 过渡 timing-function：线性 贝塞尔曲线 阶跃
Animation 动画 关键帧可以定义多个 在元素上进行添加
布局：计算布局 宽高位置改变
绘制：文本、着色、背景边框改变触发 某些渲染层形成合成层
合成：收集所有绘制完成的图层，按照顺序合成显示
提高动画性能的：尽量不触发reflow属性 遇到性能问题可以出发硬件加速 尽量使用transform和 opacity去写动画
05 响应式设计
1.原则：优先选用流式布局，比例
2.媒体查询：允许某些样式在满足特定条件时才生效
遵循cascading层叠覆盖的原则 min max选择一个
断点尽量根据内容选择
尽量减少断点 因为会增加维护成本
3.设备像素和参考像素移动端矢口配置：
设备像素：物理，只跟设备有关Dpi 和ppi 每英寸多少像素数
以对角线来称呼设备大小（6.1英寸）
css像素：参考像素 人在阅读体验过程中，使css在不同设备眼睛看起来差不多
dpr设备像素比 =设备像素/css像素
4.移动端的viewport
iPhone12dpr=3 但默认出厂980px 产生缩放条
5.相对长度
em
rem根元素字体大小
不同屏幕的等比放缩
Vw 天生是视口宽和 vh 不需要js动态配置
06 css生态相关
语言增强：预处理器 后处理器 较难维护
Scss less 通过预处理器解释成css 编程能力更强
scSS,less,stylus对比
