关键词语

• 优先级（特殊性）

  • 0 0 0 1： 元素选择、伪元素选择（::before）
  • 0 0 1 0： 类选择器、属性选择、伪类选择（:hover）
  • 0 1 0 0： ID选择器
  • 0 0 0 0： 通配选择器 (*)
  • 意外情况： !important、:not伪类本身不计算
  • 注意点：优先级是基于选择就形式计算 如 #id 和 [id = "foo"]
  • 0特殊性比无特殊性要强 （继承的属性无特殊性）

• 继承和级联

• 盒（框）模型 描述

  • 标准合模型
  • 怪异盒模型
  • box-sizing

• 外边距合并

  • 块级元素上下外边距合并
  • 空的块级元素 demo
  • 相邻元素 demo
  • 父子元素 demo

• 堆叠

  • 场景构成：
    • 根元素 (HTML)
    • z-index 值不为 "auto"的 绝对/相对定位
    • 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex
    • opacity 属性值小于 1 的元素（参考 the specification for opacity）
    • transform 属性值不为 "none"的元素
    • position: fixed

• 块格式化上下文（BFC) 参考

• 弹性盒子

  • flexBox

• 网格布局

  • grid demo

• 媒体查询

  • 常用特性
  • 逻辑操作符 and not only

• 包含块

  • position属性会影响包含块
  • 影响使用百分百设定的属性 demo

• 简写属性

  • 边顺序： 上右下左， 如果是两个值则表示 上下、右左
  • 角顺序： 左上、右上、右下、左下， 如果是两个值： 左上右下、右上左下
  • 边界情况：没有设定的值会被设置为初始值demo

• css值

  • 初始值、计算值、应用值、当前值
  • 计算出CSS属性的最终值有三个步骤。首先，指定值specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值)，或者默认值。然后，按规范算出 计算值computed value (例如， span 指定 position: absolute 后display 变为 block)。最后，计算布局(尺寸比如 auto 或 百分数 换算为像素值 )， 结果即 应用值used value。这些步骤是在内部完成的，脚本只能使用 window.getComputedStyle 获得最终的应用值。

• 用户代理

• BEM命名规范