07-理解CSS ｜ 青训营笔记

qinghe
65 阅读9分钟

42_Salvation_4k.jpg

理解CSS

课程介绍

  1. CSS发展简史

image-20230425202238458.png

  1. 课程范围

image-20230425202300229.png

  1. 课程目录

image-20230425202320060.png

01 基础知识

层叠 优先级

  • 样层叠概念

    • 样式表是规则声明的集合

    • 集合产生冲突

    • 为了解决冲突，引入层叠概念

  • 层叠的三大规则 优先度递减

    • 样式表来源
    • 选择器优先级
    • 源码位置

  • 样式表来源 重要性递增

    • 用户代理样式 浏览器默认样式
    • 用户样式表 很少有
    • 作者样式表 开发者写的
    • 作者样式表中的 !important
    • 用户样式表中的 !important
    • 用户代理样式表中的 !important

选择器

  • 选择器列举与优先级
    • image-20230425203124156.png
    • image-20230425203129859.png
    • image-20230425203137962.png
      • 如果元素的两个样式计算出的优先级大小相同，则谁在后谁优先，需要注意，这个顺序是声明的顺序，而不是调用的顺序。
    • 右层叠概念引出的CSS代码的 good practice
      • 选择器少用 id，id级别过高，不利于后续覆盖
      • 计量不要用 ！important ，不利于覆盖与扩展
      • 自己的样式加载在引用样式库样式的后面，使得自己的样式生效

继承

  • 大部分具有继承特性的属性与文本相关，不是所有的属性都有继承属性 image-20230425211059572.png

  • 继承方向同意都是从父元素到子元素

  • 可以使用inherit关键字显式地指定一个属性值从父元素继承

  • 例子：在父元素div中制定了 font-size ，在子元素中使用inherit关键字显式指定子元素的字体大小是继承父元素的

CSS的值和单位

image-20230425211334751.png

  • 单位部分在响应式设计中详细展开
  • 具体建议查看手册

盒模型

image-20230425211855382.png

  • 例子

image-20230425212145813.png

盒模型-负margin

  • 在盒模型各个参数中，padding border margin 中，只有margin可以设置为负值

image-20230425212428902.png

  • 上面例子中，左侧会导致当前元素联通后面的元素一起上移，右边的例子改变 margin-bottom，会导致后面的元素上移50

02 布局

概述

image-20230425212611248.png

常规流布局

  • 常规流包含 块级格式化上下文与内联格式化上下文 image-20230425212822653.png

    • BFC默认占满一行
    • IFC占据自身长度需要的空间

  • 任意盒子都有外部显示类型与内部显示类型 image-20230425212910247.png

    • 常规流中的盒子外部显示类型只有 BFC与IFC

  • 下图中的文本内容，如果外部没有显式的BFC包裹，是否参与到BFC布局中？ image-20230425213107291.png

    • CSS 会强制生成一个盒子，包裹这段文本（IFC），匿名盒子内部采用IFC，外部采用BFC

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

image-20230425213249432.png

  • 平时说的BFC，指的是 BFC root ，内部屏蔽外部，这个BFC元素是内部元素的root

外边距塌陷

  • 外边距塌陷情况与解决方法

image-20230425213633139.png

内联格式化上下文

image-20230425214052372.png

  • 相比于 BFC 更加复杂，主要介绍 Line box
  • 最关键的内容在于 line box的高度为 位置最高元素的顶部与位置最低元素的底部之间的距离
  • vertical-align 决定是的是内部元素的位置而不是高度
  • 右侧示例中，上面，x下部为baseline，整个line-box的顶部是粉色的顶部，底部是青色的底部；下面使用 vertical-align：middle之后，line-box的baseline上移了半个x的高度，注意上移之后，line-box内部元素的最低位置发生了变化，因而line-box的高度发生了变化
  • 关于vertical-align:middle的理解_vertical-align: middle;_流唸的博客-CSDN博客 这个文章中说清楚了
    • 1.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 2.vertical-align:middle是将元素盒子的垂直中点和父盒子的baseline加上父盒子的x-height的一半对齐。(注意字母x的关键作用)
  • 一些例子
    • image-20230425215134550.png
    • 上图左侧：直接设置line-height，一般来说无需设置height，内部元素会将外部的元素撑开。line-height本身垂直居中
    • 上图右侧：演示如何将icon与内容文本垂直对中，设置 icon与文本内容的 vertical-align:middle ，若不行，将父元素的 font-size:0，使得父元素的中线与基线对齐

弹性盒子布局

image-20230425215624611.png

  • 弹性盒子 布局 属于一维布局方式

  • 作用父元素时，父元素内部所有元素的排列规则；作用在子元素时，只针对当前的子元素

  • 一些例子

    • image-20230425215902489.png
    • 左侧：省略过长文件名但是展示文件后缀，将文件名与后缀分离开来，然后将文件名设置弹性布局，溢出隐藏
    • 右侧，展示骰子，其中关键的点右：注意flex属于一维布局方式，当二维布局时，使用分层的div包含，另外注意一些特有的属性。

grid 属性

image-20230425220317239.png

  • fr 表示 fraction 剩余

  • 父元素用于定义行列

  • 子元素用于定义当前子元素占据的位置

  • 例子

    • image-20230425220453600.png
    • 上述左边代码：grid在使用之前需要先定义好布局，使用repeat快速布局，使用 areas 为占据的位置进行命名
    • 左下代码展示如何规定元素所占据的areas
    • 在右侧展示如何使用绑定的命名设置元素的样式

Grid 与 Flex 布局策略对比

image-20230425220732348.png

定位 position

image-20230425220942001.png

  • 上面的内容很详细，不再补充
  • 例子- 页面对话框
    • image-20230425221147566.png

03 层叠上下文 The stacking context

  • 层叠上下文时对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的z轴排开
  • 一个新的层叠上下文渲染时对应一个浏览器渲染时的render layer
    • image-20230425221512227.png
  • 形成层叠上下文的条件 任一
    • image-20230425221651873.png
  • 层叠顺序
    • image-20230425221943735.png
    • 子元素zindex不能超越父元素的zindex显示顺序
      • image-20230425222042505.png
      • 上述 100的元素还是在10之下
      • 注意：position:relative|absolute;后使用 z-index:0与使用 z-index:auto是不一样的，前者会导致内部的子元素zindex不能超过父元素
    • zindex编写建议
      • image-20230425222822856.png

04 变形、过渡、动画

transform 2D

image-20230425223151503.png

transform 3D

image-20230425223222037.png

  • 可与用于制作骰子
    • image-20230425223240542.png

transition

例子

  • image-20230425223312719.png
  • 使用贝塞尔曲线可以使动画效果更加真实
  • 使用阶跃可以做出来 定格动画 打字效果之类的动画

animation

image-20230425223402894.png

上述三者性能

image-20230425223821707.png

05 响应式设计

  • 响应式设计原则
  • 媒体查询
  • 相对长度
  • 绝对长度与视口

响应式设计的原则

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

媒体查询

image-20230425224444069.png

  • 媒体查询：作为流式布局实在没有办法解决问题时的最后一种手段使用
  • 上述tips解释
    • min- max-选择一个，依次排列，方便插入断点

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

设备像素

image-20230425225212168.png

  • 物理像素，硬件固定的

DPI PPI

image-20230425225253526.png

  • 在描述设备的时候，这两个是同一个概念
  • 简而言之，就是设备像素/物理像素的一个度量单位

CSS像素

image-20230425225350652.png

  • CSS像素的定义在规范中定义比较模糊，本质上是为了让人眼在一定距离下的感受是一样的
  • 但是由于硬件不断升级，存在给同一个设备类型写的CSS，由于硬件的ppi/dpi不断升级，结果图片之类的显示的越来越小的问题，这个问题的解决，需要 DPR 设备像素比

DPR 设备像素比

image-20230425225553941.png

  • 设备会给出DPR，在渲染时会直接乘上（应该是这个意思

移动端的 viewport

image-20230425230828870.png

image-20230425231033211.png

相对长度的使用

em

  • 一般不在 font-size 使用，因为多重嵌套很难计算

image-20230425231202586.png

rem

  • 相对根元素字体大小，不存在嵌套问题，所以适合于响应式设计

image-20230425231344023.png

vw vh

  • 天生 1% ，原理于rem一致

image-20230425231418544.png

06 CSS生态相关

  • 由于CSS可编程性比较差，所以衍生出了一堆用于辅助设计与提高效率的工具

语言增强

  • 预处理器
  • 后处理器

预处理器

image-20230425231652564.png

  • 发展领域特定语言，然后采用预处理器将领域特定语言编写的代码解析为CSS

  • 预处理器的基本内容

    • image-20230425231851875.png

  • 常见预处理器对比

    • image-20230425231906105.png

后处理器

  • 编写CSS中，真实使用的CSS代码之前可用的代码处理都可以称为广义的与处理器

    • image-20230425231953721.png

  • 目前比较常用的后处理器

    • image-20230425232013634.png

  • postcss 机制浅析

    • image-20230425232127520.png
    • 上述是一个后处理流程

工程架构

CSS 模块化

  • 一般有三种方案，本质相同：保证样式集合对应的点是唯一的，本质上没有改变CSS的传统写法，只是使用了类似于加哈希值的方式保证了命名隔离

image-20230425232429992.png

CSS-in-js

image-20230425232541895.png

  • 颠覆了传统的CSS代码编写方式，使用JS动态生成CSS代码
  • inline-style 已经被抛弃了
  • 主流的使用 "唯一类名" 这种方式，使用 styled-components 这个工具
    • 上述右侧示例代码中，第一个红框中的main类似于一个形参，实参可以是任何一个标签，最终JS代码生成右侧dev模式中的CSS代码，可以看到是在class name处生成了一个唯一的类名
  • styled-component 机制浅析
    • image-20230425233018968.png
  • 好处与坏处
    • image-20230425233126498.png

Atomic CSS

  • 通过设计最小化CSS类的样式来进设计，有点类似于LINUX小而美的哲学，但是直接进行原子化了，粒度更细。
    • image-20230425233304750.png
  • 实现机制
    • image-20230425233346438.png
    • 工具库优先：优先使用工具库中定义好的
    • 按需生成：不引入多余的内容，减小打包
    • 支持自定义
  • 好坏
    • image-20230425233501614.png

课程总结

image-20230425233522336.png

avatar
文章
阅读
粉丝