没有css的亚马逊网页真的很丑
样式表————>规则声明的集合————>产生冲突————>解决冲突（用层叠）
下面的代码就展示和样式的冲突：定义了两个颜色哪个生效呢？
第一部分
被覆盖的样式会用横线划掉
内联 > id > class = attribute = pseudo-class（伪类）> type = pseudo-element（伪元素）
内联样式不属于选择器，为了方便记忆放在这里做对比；
*：is（） ：not（） ：has（）本身不计入优先级，以参数中最高的优先级为准， ：where（）优先级为0；
三点需要注意
可以使用inherit来覆盖继承
值可以简单分成三类：文字类/数值类/函数生成类
单位可以分为：长度/角度/时间/分辨率
盒模型用来
控制盒子类型：display：block,inline,inline-block,flex...
控制盒子大小&计算方式:width,height.. box-sizing:content-box,border-box
控制盒中内容流:overfliw:auto,scroll,hidder...
控制定位:position:static,relative,absolute,fixed,sticky
是否可见:visible,hidden...
-margin不提倡高度使用
第二部分
块级盒子默认占一行，内联盒子在一行里依次排列
常规流只会参与一种布局
如果说一个盒子具有bfc特性那就表示盒子内部形成了新的块级古格式化上下文
由四种方式触发一个盒子的bfc
将父元素设置成bfc可以防止塌陷（
内联元素的高度是由线条框的高度和位置决定的
flex
grid
grid是先划分出区域来，然后把内容分配到区域内
flex和grid搭配使用更好
相对定位/绝对定位/固定定位/粘性定位
相对于原来位置移动（保留原来位置）
绝对就是移除文档流，不保留原来位置
固定就是不随页面移动
粘性就是粘在最近的滚动视屏上
有定位就有元素覆盖的问题，那么就要靠层叠 上下文来解决
层叠上下文是HTML元素的三维构想，将元素沿着垂直屏幕的虚构的z轴排开
层叠上下文和浏览器渲染过程中的render layer对应的
使用以下元素会形成层叠上下文
层叠上下文的层叠顺序
使用z-index的时候起名要讲究，设置值的时候最好是固定的间隔
transform来控制静态的变形
transform2d
transform3d
transiition是动态过度
如何提升动画性能
1，尽量不去出发reflow
2，在遇到性能问题时可以触发硬件加速，比如设置will-change属性，设置transform3d等
3，尽量用transform和opacity写动画，能激发gpu加速
响应式设计
能根据屏幕尺寸的变化获得不一样的效果
响应式设计遵循的原则
优先选用流式布局，比如百分比、flex、grid等
使用响应式图片，匹配尺寸节省带宽
使用媒体查询为不同的设备类型做适配
给移动端设备设置简单统一的视口
使用相对长度，em、rem、vw作为长度度量
第一个例子就是检测屏幕宽度和屏幕横向的时候作为判定条件；
媒体查询应该是作为灵活布局不好用的时候的最后手段
css为了满足用户在不同设备上观看的内容观感上相同，会动态放大或缩小显示的内容
根据dpr来判断一个css像素占多少个设备像素
百分比宽度和固定宽度的区别
第一种是设置设备宽度，第二种是根据前面的公式让scale保持1/dpr
em可以让展示区域根据展示字号的不同做出放缩调整
rem是root em ，不用考虑嵌套问题
吧
vw和vh和rem作用差不多，它的视口宽度天然的就是1%，不用像rem那样重新设置
因为css代码的可编程性不高所以催生出来了一系列工具优化
语言增强
scss可编程能力强，逻辑处理能力丰富，less和css代码很像，上手快
样式隔离放置污染的三种方式
小巧的css样式，用于简单的样式，由样式库，可定义原子类，方便快捷
