层叠、优先级
层叠三大规则：
- 样式表来源
- 选择器优先级‘
- 源码位置
优先级程度递减
样式表来源重要排序
- 用户代理样式（浏览器默认样式）
- 用户样式表（很少有）
- 作者样式表（开发人员）
- 作者样式表中 !important
- 用户样式表中!important
- 用户代理样式中!important
重要程度递增
注：
- 选择器尽量少用id
- 尽量不要用!important
- 自己的样式加载在引用库样式后面
继承
可以使用inherit关键字显示指定一个属性值从其父元素继承
布局
任意盒子的display：
- 外部显示类型：规定了该合资如何与同一格式上下文中的其他元素一起显示
- 内部显示类型：规定了该盒子内部的布局方式，例：display：flex；外部显示block参与bfc，display“inline-flex，外部显示inline，参与ifc。他们的内部的盒子都参与弹性和布局
网格布局
元素可以只占其中的一个单元格，也可以站多个单元格
定位Position
sticky：
元素相对他的最近滚动祖先（祖先的overflow是scroll/hidden/auto）的视口(scrollport)定位
层叠上下文
形成新的层叠上下文的条件（任一即可）：
- position：reletive或absolute；并且z-index不是auto
- position：fixed或sticky
- flex或grid的子元素；并且z-index不是auto
- opacity的值小于1
- transform的值不为none
- will-change的值不为通用值
stacking order：
- z-index只在同一个层叠上下文内比较
- 子元素的z-index无法超越父元素的z-index显示顺序
编写z-index的建议：
- 使用css变量或者预处理语言的变量，管理z-index的值
- 将预设间隔设置10或100，方便后续插入
响应式设计
遵循的原则：
- 优先使用流式布局，如百分比，flex，grid等
- 使用响应式图片，匹配尺寸，节省带宽
- 使用媒体查询为不同设备类型做适配
- 给移动端设置简单、统一的视口
- 使用相对长度，em，rem，vm作为长度度量
媒体查询
允许某些样式只在页面满足特定条件时才生效，我们可以将媒体类型（如screen、print）以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）作为约束条件
DPI&&PPI
dpi：每英寸多少点
ppi：每英寸多少像素
当用于描述显示器设备时ppi和dpi是同一个概念，说的是每英寸多少物理像素及显示器设备的点距
css像素
参考像素，其实是一个视角单位，规范给出的定义是，1css像素是从一臂之遥看解析度为96DPI（即一英寸96点）的设备输出时，1点（即1/96英寸）的视角
DPR设备像素比
未放缩状态下，设备像素和css像素的初识比例关系
DPR=设备像素/CSS像素
移动端的viewport
常见的移动端viewport的设置：
- 保持scale为1：meta标签中，content:"width=device-width,initial-scale=1"
好处：在所有设备是不管横屏还是竖屏，让布局视口的宽度和设备屏幕的宽度保持一致，且参考像素不放缩
缺：若设备的dpr>1，那么想要画出一个设备像素粗细的线，需要其他方法实现
- 保持scale放缩参数是1/dpr：meta标签中，content:"maximum-scale=1/window.devicePixelRation,minimum-scale=1/window.devicePixelRation,initial-scale=1/window.devicePixelRation,user-scalable=no"
好处：1个csspx等于一个设备像素，全局层面解决“真实1像素”问题
缺：不同设备想达到1个csspx严格等于一个设备像素，需要处理兼容性才能达到。而且全局等比放缩，多某些固定尺寸需要特殊处理。
