核心知识点

CSS 选择器

CSS选择器的解析是从上到下，从右向左解析，为了避免对所有元素进行解析

• 可继承的样式：font-size, font-family, color, ul, li, dl, dt, dd
• 不可继承的样式：border, padding, margin, width, height

种类

• ID 选择器
• 类选择器（class）
• 标签选择器（h1）
• 相邻选择器
  • 直接相邻元素选择器（h1+p）
  • 普通相邻元素选择器（h2 ~ h2）
• 子选择器（ul>li）
• 后代选择器（li a）
• 通配符选择器（*）
• 属性选择器（a[rel = "XXX"]）
• 伪类选择器（:hover, :first-child ···）
• 伪元素选择器（:before, :after ···）
• 分组选择器

优先级

• 优先级由高到低：!important > 内联style > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器>继承
• 优先级算法（权重）
  • 元素选择符的权值
    • 元素标签（派生选择器）：1
    • class选择符：10
    • id选择符：100
    • 内联样式最大：1000
  • 继承得到的样式的优先级最低
  • 比较多个权重相同的CSS选择器优先级，定义的位置决定一切。从位置上由高到低分为六级：

      1. 位于<head/>标签里的<style/>中所定义的CSS拥有最高级的优先权。
      2. 位于 <style/>标签中的 @import 引入样式表所定义。
      3. 由<link/>标签所引入的样式表定义。
      4. 由<link/>标签所引入的样式表内的 @import 导入样式表定义。
      5. 用户设定。
      6. 浏览器默认。
• 同位置情况下样式定义最近者为准（优先级相同，选择最后出现的样式）

CSS 盒模型

分类

• IE 盒模型
• W3C 盒模型（标准盒模型）

转换

CSS 中默认的盒模型是 W3C 盒模型，两者之间的转换可以通过设置 box-sizing 属性来转换：

box-sizing: content-box; // W3C盒模型标准 
box-sizing: border-box; // IE盒模型标准

display 布局

值	描述
none	元素会被隐藏，不显示
inline	元素会被设置为内联元素，内部按行从左向右排列（元素前后没有换行符）
block	元素会被设置为块级元素，内部按列从上到下排列（元素前后带有换行符）
inline-block	元素会被设置为行内块级元素，不会独占一行的块级元素
list-item	元素会作为列表显示
table	元素会作为块级表格来显示（类似 table），表格前后带有换行符
flex	元素会进入 flex 布局模式

flex 布局

flex 布局提供了一种更高效的方法对容器中的项目进行布局、对齐和分配空间，他没有方向上的限制，可以由开发人员自由操作（子元素的 vertical-align、float、clear 属性会失效）。

属性	值	说明
flex-direction	row | row-reverse | column | column-reverse	决定主轴方向（容器排列方向）
flex-wrap	nowrap | wrap | wrap-reverse	如果一条轴线排不下，定义换行规则
flex-flow	flex-direction || flex-wrap	flex-direction 和 flex-wrap 的简写形式
justify-content	flex-start | flex-end | center | space-between | space-around	定义容器在主轴上的对齐方式
align-items	flex-start | flex-end | center | baseline | stretch	定义容器在交叉轴上的对齐方式
align-content	flex-start | flex-end | center | space-between | space-around	定义多根轴线的对齐方式，如果容器只有一根轴线，该属性不起作用

BFC 块级格式上下文

BFC（Block Formatting Context）块级格式上下文是 CSS 中的一个重要概念，它对于页面布局和元素的排列有着重要影响。BFC 是一个独立的渲染区域，内部的元素按照一定的规则进行布局和渲染。

Style-Components

彻底抛弃 CSS，用 JavaScript 写 CSS 规则

CSS Modules

使用 JS 编译原生的 CSS 文件，使其具备模块化的能力