理解CSS | 青训营笔记

小马xiaoma
78 阅读6分钟

基础知识

  • CSS: Cascading Style Sheets, 层叠样式表

image.png

层叠规则 & 优先级

image.png

image.png

image.png

推荐阅读：

juejin.cn/post/722555…

juejin.cn/post/722563…

image.png

  • 最后声明的优先
  • 由层叠概念引申出的CSS代码good practice:
    • 选择器尽量少用id
    • 尽量不要用!important
    • 自己的样式加载在引用库样式的后面

继承

image.png

  • 上图中，.card h1的font size本会是28px，由于指定了inherit，变成从父元素（card）处继承，即24px

单位

image.png

长度单位

  • 绝对长度：

    • px（像素）：最常见的单位，通常用于屏幕显示。一个像素对应于屏幕上的一个点。
    • cm（厘米）、mm（毫米）、in（英寸）、pt（磅，1/72 英寸）、pc（点，1/6 英寸）：这些单位主要用于打印媒体，它们基于物理尺寸。

  • 相对长度：

    • em：相对于当前元素的字体大小。例如，如果当前字体大小是 16px，那么 2em 等于 32px。
    • rem：相对于根元素（通常是 <html>）的字体大小。与 em 类似，但始终基于根元素的字体大小。
    • vw（视窗宽度）、vh（视窗高度）：相对于视口（浏览器可见区域）的宽度和高度。1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
    • vmin、vmax：分别等于视口宽度和高度中的较小值和较大值。

来源：juejin.cn/post/722563…

盒模型

image.png

  • 内边距（padding）： 不可为负

  • 外边距（margin）： 可为负或auto

    • 提供4个数据：将依次作用于上，右，下，左。（顺时针）
    • 提供3个数据：将依次作用于上，左右，下
    • 提供2个数据：将依次作用于上下，左右
    • 提供1个数据：将作用于上下左右

image.png

来源：juejin.cn/post/722555…

  • 一些展现形式

image.png

居中

  • 水平居中
    • 行内元素： 给父元素设置 text-align:center
    • 定宽块级元素：margin: 0 auto （块状元素一定要有width值）
    • 不定宽块级元素：
      1. display: table + margin: 0 auto
      2. 子元素设置display: inline-block，同时父元素设置text-align: center
      3. 父元素设置display:flex + justify-content: center
      4. position + 负margin
      5. position + margin：auto
      6. position + transform
        • 方法4, 5, 6同下面垂直居中2, 3, 4一样，只需把top/bottom改为left/right
  • 垂直居中
    • 单行文本：
      1. paddingtop = paddingbottom
      2. line-height = height
    • 多行文本：父元素display: table，子元素display: table-cell + vertical-align: middle
    • 块级元素:
      1. 父元素设置display:flex和align-items：center (父元素必须设置height值)
      2. 利用position和top和负margin（需知height）
        • 设置position: absolute/relative/fixed
        • top = 50%
        • margin = 负一半height
      3. 利用position和top/bottom和margin:auto（注意不是margin:0 auto）
        • position：absolute/relative/fixed
        • top & bottom：0
        • margin：auto
      4. 利用position和top和transform（可用于未知元素大小）
        • position: absolute/relative/fixed
        • top = 50%
        • transform: translate(0, -50%)
  • 水平垂直居中
    1. position + margin：auto
      • position: absolute;
      • left & right & top & bottom: 0;
      • margin: auto;
    2. position + 负margin （须知高宽）
      • position: absolute;
      • left: 50%;
      • top: 50%;
      • margin-left: 负一半width;
      • margin-top: 负一半height;
    3. position + transform
      • position: absolute;
      • left: 50%; /*父元素的50% */
      • top: 50%;
      • transform: translate(-50%,-50%); /*自己的50% */
    4. flex布局
      • display:flex;
      • justify-content: center; //子元素水平居中
      • align-items:center; //子元素垂直居中
    5. table-cell
      • display: table-cell;
      • text-align: center;
      • vertical-align: middle;

来源/推荐阅读：

CSS-水平居中、垂直居中、水平垂直居中

前端面试经典问题：CSS 中居中的几种方式

布局和定位

image.png

常规流

image.png

块级格式化上下文（BFC, block formatting context）

image.png

  • 外边距塌陷

mage.png

内联级格式化上下文（IFC, inline formatting context）

  • 看不见的Line Box

    • 高度由 line-height 决定

    • vertical-align 确定位置

  • 使用以上特性，实现单行元素居中/对齐：

    1. 单行文字垂直居中: 将line-height和height设置为相同的高度

    2. 文字和icon垂直对齐: vertial-align: middle, 垂直对齐，但不是完全垂直居中;

      • 如果设置 父元素 font-size: 0, 基线和中线重叠，则居中对齐

image.png

image.png

Flex Box 弹性盒子

flex布局学习参考地址：www.ruanyifeng.com/blog/2015/0…

flex布局实例地址：www.ruanyifeng.com/blog/2015/0…

推荐阅读：juejin.cn/post/722555…

  • 两类属性
    • 作用于父元素：所有子元素的排列属性
    • 作用于子元素：当前单个子元素的属性 image.png

image.png

Grid 网格

  • fr: fraction， 划分剩余部分
  • repeat(3, 1fr): 均分三等份

image.png

image.png

Grid和Flex布局的使用策略

  • Flex

    1. 一维布局
    2. 基于内容
    3. 浏览器兼容性更好

  • Grid

    1. 二维布局
    2. 基于布局
    3. 2017年后浏览器的版本普遍支持

  • Grid for lavout, Flexbox for components

    1. 大面积或整体布局推荐使用Grid布局
    2. 小面积或组件中，或Grid ltem中可以使用Flex做灵活布局

定位

image.png

image.png

层叠上下文(The Stacking Context)

image.png

  • 条件：

image.png

  • 注意：
    • z-index只在同一个层叠上下文内比较
    • 子元素的z-index无法超越父元素的z-index 显示顺序

image.png

image.png

image.png

image.png

变形、过渡、动画

变形 Transform

  • 2D相关属性
    • transform: translate(移动) 、rotate(旋转)、scale(放缩)、matrix(变形矩阵)等
    • transform-origin: right top、center等表示变形时依据的原点
  • 3D 变形 image.png

image.png

过渡 Transition

image.png

动画 Animation

image.png

性能相关

image.png

响应式设计

响应式设计原则

  • 优先选用流式布局，如百分比、flex、grid等
  • 使用响应式图片，匹配尺寸，节省带宽
  • 使用媒体查询为不同的设备类型做适配
  • 给移动端设备设置简单、统一的视口
  • 使用相对长度，em、rem 、vw 做为长度度量

媒体查询

image.png

设备像素、参考像素和移动设备视口

  • 设备像素(物理像素): 显示器上绘制的最小单位显示屏通过控制每个像素点的颜色，使屏幕显示出不同的图像。设备像素和设备相关，屏幕从工厂出来那天起它上面的物理像素点就固定不变了。

  • DPI&PPI：

    • dpi (dots per inch): 每英寸多少点
    • ppi (pixels per inch): 每英寸多少像素数
    • 当用于描述显示器设备时，ppi与dpi是同一个概念。说的是每英寸多少物理像素及显示器设备的点距

image.png

  • CSS像素

image.png

  • DPR设备像素比

image.png

  • 移动端Viewport

image.png

image.png

  • 常见移动端viewport设置方式
    • 保持scale为1: width = device-width, initial-scale = 1;
    • 保持scale为1/DPR -> 1个css px等于一个设备像素

相对长度

em

  • 一般不用于字体大小，可以用于宽高属性（相对自己字体大小） image.png

rem

  • 相对根元素字体大小 image.png

vw&vh

image.png

CSS生态相关

语言增强

CSS预处理器

image.png

image.png

  • Examples:

image.pngimage.png

image.pngimage.png

  • scss less stylus 简单对比：

image.png

  • 常见样式处理流程： image.png

后处理器

image.png

  • postcss机制 image.png

工程架构

CSS 模块化

  • CSSModule 就是为了解决全局污染问题出现的方案，
  • 解决CSS全局污染，本质上是保证样式集合对应的选择器是唯一的 image.png

CSS-In-Js

  • JS 动态生成CSS
    • 行内样式（已弃用）
    • 唯一类名

image.png

  • styled.main: styled函数接受一个main标签（可以是任何标签），生成react component，唯一类名

image.png

  • CSS-in-JS pros & cons
    • Pros
      • 有效避免样式全局污染
      • 复杂交互样式可以更灵活的编写
      • 首屏渲染无多余css阻塞
    • Cons
      • 有一定的学习成本
      • 存在运行时的消耗
      • css-in-js的库导致打包体积增大
      • 代码的可读性降低

原子化 CSS (Atomic CSS)

  • 小巧 用途单一的class image.png

  • Tailwind

image.png

  • 原子化 CSS Pros & Cons
    • Pros
      • 减少css体积
      • 原子类复用率高
      • 移动和删除html节点变得容易
      • 减少classname的命名复杂度
    • Cons
      • 增加html类名长度
      • 初始使用时有学习和记忆成本
      • 样式库的定义成本(不完全是缺点)

推荐阅读

理解CSS | 青训营笔记

juejin.cn/post/722555…

理解CSS 两万字笔记 | 青训营笔记 juejin.cn/post/722563…

avatar
文章
阅读
粉丝