跳到主要内容

核心知识点

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-directionrow | row-reverse | column | column-reverse决定主轴方向（容器排列方向）
flex-wrapnowrap | wrap | wrap-reverse如果一条轴线排不下，定义换行规则
flex-flowflex-direction || flex-wrapflex-direction 和 flex-wrap 的简写形式
justify-contentflex-start | flex-end | center | space-between | space-around定义容器在主轴上的对齐方式
align-itemsflex-start | flex-end | center | baseline | stretch定义容器在交叉轴上的对齐方式
align-contentflex-start | flex-end | center | space-between | space-around定义多根轴线的对齐方式，如果容器只有一根轴线，该属性不起作用

BFC 块级格式上下文​

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

Style-Components​

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

CSS Modules​

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

成为赞助商