🏗️掘金前端初阶训练营笔记

发表于 分类于 阅读次数： 阅读次数： Valine： 本文字数： 3.7k
语言部分

HTML

  • 组成分类:

    • 元素 (Element):

    • 文本: Text & <![CDATA[text]]>

    • 注释

    • DTD (Document Type Defination): <!Doctype html>

    • 处理信息: <?a 1?>

  • 值得看的 HTML 功能

    • <head> 中的 <base> 定义 URL 前缀, 目前不建议使用了

    • ARIA: 用于设计语义化系统

    • AMP: 谷歌的一套标准, 用于提升页面曝光度

    • Audio Context: 新的音频 API 接口, 使用增幅, 频率等相对科学的定义音频

    • 二进制处理: 包括 Blob, File, ArrayBuffer, Buffer 等对象

CSS

层叠优先级判断

先判断样式表来源, 无法判定则判定选择器优先级, 最后判断样式表在源码中的位置

  • 通过样式表来源判断, 优先顺序从低到高是

    1. 用户代理样式: 浏览器 (也就是用户代理) 定义的默认样式
    2. 用户样式表: 由使用浏览器的用户定义的, 例如视障用户可能需要高对比度样式
    3. 作者样式表: 开发者写的
    4. 作者样式表中的 !important
    5. 用户样式表中的 !important
    6. 用户代理样式表中的 !important

    加 !important 之后优先级会反过来, 例如: 如果浏览器给 <a> 设置了 color: red !important, 那么谁都无法修改 color

  • 通过选择器优先级判断, 优先级从高到低是

    内联 > Id选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 类型选择器 = 伪元素选择器

    优先级一共有四个等级, 可以用四元组标出选择器出现的次数 (例如非内联的 #btn:hover 就是 (0,1,1,0)), 在比较时从高优先级对比, 同一优先级相同比较下一优先级.

    逻辑选择器 :is(), :not(), :has() 本身没有优先级, 以参数中优先级最高者为准, :where() 优先级为 0

  • 通过在源码中的顺序判断

    最后声明的生效, 通过 link 与 style 引入的根据标签相对位置决定, 通过 @important 引入相当于在 @important 处做了文本替换

样式的继承

默认可以继承的属性:

  • 文本相关的属性: color, font, font-family, font-size, font-weight, font-variant, font-style, line-height, letter-spacing, text-align, text-indent, text-transform, white-space, word-spacing
  • 少部分列表, 表格相关属性

也可以通过显式指定 inherit 关键字指定

值与单位

  • 单位:

    • 长度单位:
      • 绝对长度: px, pt, cm, in...
      • 相对长度: em, rem, ex (字符 'x' 的高度), ch (数字 0 的宽度), lh(行高), rlh(根元素行高), vw, vh...
    • 角度: deg, grad, turn, rad
    • 时间: s, ms
    • 分辨率: dpi, dpcm, dppx (一般用于媒体查询 min-resolution 等)

    参考: MDN

  • 值

    • 文字类: 关键字, 颜色,位置
    • 数字类
    • 函数生成: calc, min, max ...

布局

  • 常见布局有: 常规流 (Normal Flow), 浮动流 (Float), 定位流 (Position) Flex 布局, Grid 布局, Multicol 布局

  • BFC & IFC

    • 块格式化上下文 (BFC)

      BFC 是 Web 页面的可视 CSS 渲染的一部分, 它是块级盒子布局中与其他元素的交互的界限. BFC 既定义了元素内部的排序规则, 又定义了元素间的表现

      以下情况的元素会生成 BFC

      • 根元素

      • 浮动元素 (元素的 float 不是 none)

      • 绝对定位元素 (元素的 position 为 absolute 或 fixed)

      • display 值为 inline-block, table-cells, table-caption 的元素

      • overflow 值不是 visible 的元素

      • flex 或 grid 元素（display: flex 或 display: grid）

      在 BFC 中:

      • BFC 内部的盒子会在垂直方向上一个接一个地排列
      • BFC 的垂直方向的距离由 margin 决定. 属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠
      • BFC 的区域不会与 float 元素的盒子重叠
      • BFC 是一个独立的容器, 外面的元素不会影响 BFC 内的元素, BFC 内的元素也不会影响外部的元素
      • BFC 的宽度为包含块的宽度, 除非该 BFC 是一个浮动元素, 其宽度将为内容区的宽度

    • 内联格式化上下文 (IFC)

      IFC 是 CSS 渲染的一部分, 它的区域包含了生成环境的内联元素, 也就是说，IFC 中的元素会水平排列, 直到容器宽度不够, 然后会移到新的一行. 在 IFC 中，盒子的左右都有可能接触到其它盒子, 除非当然, 他们之间存在着空白或者垂直的分隔条. 盒子垂直方向的起点是当前行盒子的顶端, 垂直方向的终点是当前行盒子的底部.

      在 IFC 中:

      • IFC 的行框高度由其内部最高的元素决定, 但是并不受到顶部和底部 padding, border 的影响

      • IFC 中的每个元素的 margin, border, padding 在水平方向上是互相影响的, 但在垂直方向上不影响其他元素

      • IFC 中的元素不会有垂直方向的 margin 重叠问题

      • 线条框模型:

        “在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。” - 9.4.2

        ==这里应该有张图==

        在线条框 (line-box) 中, line-box 高度所在 box 最高最低元素的编剧, 其值是 line-height, line-height - 内容区域的高度是 leading, leading 默认会均匀的分布在内容区域的上下两部分.

      • 基线与垂直对齐

        基线是一种看不见的线, 它是用来决定行内元素如何垂直对齐.

        • 对于文本, 基线通常是指字符的底部线条. 比如, 在拉丁字母中, 基线是大部分字母 (例如 a, b, c, d 等) 的底部, 有些字母 (如 p, q) 等会部分延伸到基线以下, 这部分被称为下行部分 (descender)
        • 对于一个行内元素或一个行内块元素, 它的基线默认是其内部最后一行文本的基线. 如果行内元素或行内块元素没有文本或者由于其他原因没有基线, 则其底边界就被认为是其基线.
        • 对于一个块级元素, 基线的计算则更复杂一些. 块级元素的基线是其最后一行盒子的基线, 除非它有 overflow 且不是 visible, 那么这个块级元素的基线就不存在。

        vertical-align 决定了 IFC 中元素的位置, 默认是 base-line,

        • baseline (默认值): 元素的基线与父元素的基线对齐.
        • top: 元素的顶部与行中最高元素的顶部对齐.
        • middle: 元素的中心线与父元素基线上方约 0.5ex 的位置对齐. 注意: 文字的中心线是基线向上半个小写 x 的位置
        • bottom: 元素的底部与行中最低元素的底部对齐.

        应用:

        • 单行文本垂直对齐 (设置line-height)
        • 文字与 icon 对齐. (设置图标文本的对齐均为 middle, 此时图片的垂直几何中心与文本的中心线(基线向上半个x)与父元素中心(基线向上半个x)对齐, 图文仍不对齐, 再设置父元素 font-size: 0 即可让半个 x 消失, 完成彻底对齐)

  • 常规流布局

    • 盒子的 display 属性可以分为外部显示的 display-outside 与内部显示的 display-inside. 外部显示类型约定了盒子如何与其他相同格式的上下文一起显示, 内部显示类型约定了盒子内部的布局方式. 例如: display: inline-flex 的外部为 inline 参与 IFC, 内部参与 flex 布局

    • 常规流中的盒子的外部显示类型可以是 block 参与 BFC, 也可以是 inline 参与 IFC.

    • 常规流的 BFC 会通过如下方法处理其一级子 IFC 混排问题: 当 IFC 的父元素是 BFC, 且父元素中有非 IFC. 浏览器会自动为连续的 IFC 外部生成一个 BFC 包裹, BFC 内部要么都是 BFC 要么都是 IFC 的目的

      ==这里应该有一张图==

  • 弹性盒子布局

    • 作用于父元素的属性: display, flex-direction, flex-wrap, justify-content, align-items, align-content, gap. 这些属性作用于所有内部元素
    • 作用于子元素的属性: flex-basis, flex-grow, flex-shrink, order, align-self, 这些属性用于控制单个元素

  • 网格布局

    • 作用于父元素的属性: display, grid-template-colums/rows, grid-auto-flow, grid-tempate-areas
    • 作用于子元素的属性: grid-colum/row, grid-area
    • flex 与 grid 如何选择?: 整体布局建议 grid, 小面积, 小组件用 flex 灵活一点

层叠上下文

这里的层叠与 CSS 层叠样式表中的层叠不同, 这是指当元素具有层叠属性时, 它们在三维空间中的层叠顺序. 一个层叠上下文对应了浏览器渲染的一个 render layer (渲染层).

32:41

变形与动画

响应式设计

CSS 生态

JavaScript