CSS | 青训营笔记

50 阅读1分钟

CSS发展历程

image.png

01 基础知识

层叠、优先级

image.png

image.png

image.png

image.png

image.png

注意事项:

  • 选择器尽量少用id
  • 尽量不要用!important
  • 自己的样式加载在引用库样式的后面
  • 继承

    image.png

    CSS的值和单位

    image.png

    盒模型

    image.png

    image.png

    image.png

    02 布局和定位

    概述

    image.png

    image.png

    块级格式化上下文

    image.png

    外边距塌陷

    image.png

    内联级格式化上下文

    image.png

    image.png

    image.png

    image.png

    网格布局

    image.png

    使用Grid布局示例

    image.png

    Grid和Flex布局实用策略

    image.png

    定位Position

    image.png

    image.png

    03 层叠上下文(The Stacking Context)

    image.png

    image.png

    stacking order

    image.png

    image.png

    image.png

    04 变形、过渡、动画

    transform 2D

    image.png

    transform 3D

    image.png

    image.png

    过度

    image.png

    动画

    image.png

    性能相关

    image.png

    05 响应式设计

    媒体查询

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    rem

    image.png

    vw和vh

    image.png

    06 CSS生态相关

    CSS预处理器

    image.png

    image.png

    image.png

    CSS后处理器

    image.png

    postcss机制分析

    image.png

    CSS模块化

    image.png

    image.png

    image.png

    image.png