css 基础回顾
- 盒模型
- 外边距+边框+内边距+内容
- 层叠
- 相对单位
理解浏览器如何解析样式规则？
层叠规则： 1.样式表来源 2.选择器优先级 3.源码顺序
继承：1.文本相关属性 2. 列表属性 3. 表格边框属性
属性简写：font、background、flex、border、padding、margin、
相对单位
px 绝对单位 em 、rem 相对单位
绝对单位是早些年追求像素级完美的体验下的产物，随着技术的发展，更多新的设备涌现出来，像素级完美逐渐被抛弃，随之而来的是响应式开发。
在CSS 中，1em等于当前元素的字号，其准确值取决于作用的元素。
当用em来指定多重嵌套的元素的字号时，就会产生意外的结果。 为了算出每个元素的准确值，就需要知道继承的字号，如果这个 值是在父元素上用em定义的，就需要知道父元素的继承值，以此 类推，就会沿着DOM树一直往上查找。
当使用em给列表元素定义字号并且多级嵌套时，这个问题就显现 出来了。绝大部分Web开发人员曾遇到文字缩小了的问题。
正是这种问题让开发人员惧怕使用em。
rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的 单位。
与em相比，rem降低了复杂性。实际上，rem结合了px和em的优点，既 保留了相对单位的优势，又简单易用。那是不是应该全用rem，抛弃其 他选择呢？答案是否定的。
拿不准的时候，用rem设置字号，用px设置边框，用em设置 其他大部分属性。
响应式 媒体查询
略...
视口相对单位
什么是视口？ 浏览器窗口可见部分的区域。不包括地址栏、工具栏、状态栏。
vh、vw、vmin、vmax
vw可以定义字号。
如果给一个元素加上font-size: 2vw会发生什么？在一个1200px的 桌面显示器上，计算值为24px（1200的2%）。在一个768px宽的平板 上，计算值约为15px（768的2%）。这样做的好处在于元素能够在这 两种大小之间平滑地过渡，这意味着不会在某个断点突然改变。当视 口大小改变时，元素会逐渐过渡。
calc()函数
calc()函数内可以对两个及其以上的值进行基本运算。当要结合不 同单位的值时，calc()特别实用。它支持的运算包括：加（+）、减 （-）、乘（×）、除（÷）。加号和减号两边必须有空白。
自定义属性
2015年，出现css 的自定义属性。你可以声明一个变量，为它赋一个值，然后在样式表的其他 地方引用这个值。这样不仅能减少样式表中的重复，而且还有其他好处。
变量名前面必须有两个连字符（--），用 来跟CSS属性区分，剩下的部分可以随意命名。
调用函数var()就能使用该变量。
动态改变自定义属性
看起来自定义属性只不过为减少重复代码提供了一种便捷方式，但是它真正的意义在于，自定义属性的声明能够层叠和继承： 可以在多个选择器中定义相同的变量，这个变量在网页的不同地方有 不同的值。
JavaScript可以改变自定义变量的值。
盒模型
box-sizing的默认值为content-box，这意味任何指定的宽或高都 只会设置内容盒子的大小。
将box-sizing设置为border-box后， height和width属性会设置内容、内边距以及边框的大小总和。
等高列
- 表格布局
- flex布局
精通布局
- 浮动
- flex布局
- 网格布局
- 定位
- 响应式
flex 和 网格 的不同之处
- Flexbox本质上是一维的，而网格是二维的。
- Flexbox是以内容为切入点由内向外工作的，而网格是以布局为切 入点从外向内工作的。
因为Flexbox是一维的，所以它很适合用在相似的元素组成的行（或 列）上。它支持用flex-wrap换行，但是没法让上一行元素跟下一行 元素对齐。
相反，网格是二维的，旨在解决一个轨道的元素跟另一个 轨道的元素对齐的问题。
定位和层叠
- 固定定位、相对定位、绝对定位
- 模态框和下拉菜单
- 三角形
- 粘性定位
高级
- 背景、阴影
- 渐变
- 混合
- 过渡
- 变换
- 动画、关键帧
