银安

历史背景：从“一维流”到“二维网格” Flex 的出现（2009 年左右，W3C 最终定稿于 2017）彻底改变了布局方式，它解决了“盒子之间的空间分配”这一长期痛点——能...

CSS 的“空间分配模型”：理想与现实的冲突 在传统 BFC（块级格式化上下文）布局中，浏览器是这样理解一个盒子的： 举例： 浏览器布局逻辑： 浏览器先为 .box 分配好...

为什么会出现 Flex？（问题的起点） 旧时代的布局困境 在 Flex 出现之前，开发者依赖以下方式进行布局： 布局方式 核心思路 问题 普通文档流 块级元素垂直排列，行内...

前端框架之前：静态页面与 jQuery 时代（1990s ~ 2010前后） 遭遇的问题 网页内容简单：最初网页是纯 HTML，静态排版，交互几乎没有。 交互需求增加：随着...

XSS（跨站脚本攻击，Cross-Site Scripting） 原理：攻击者把恶意 脚本代码 注入到网页里。 当其他用户访问该网页时，脚本会在他们的浏览器里执行。 因为脚...

1. 环境变量与配置 目标：区分开发环境 / 生产环境。 例子： 开发：调试用的 API 地址 http://localhost:3000。 生产：线上 API 地址 ht...

1. 代码转换（Transpile） 目标：让现代语法能在所有浏览器运行。 问题：浏览器兼容性不一致，ES6+/TS/JSX 等新语法不能直接跑。 解决：用工具转译成 ES...

为什么会有「自动化构建」？ 在 模块化刚普及（AMD、CommonJS、ESM）的时候，前端项目遇到几个新问题： 文件数量激增 模块化让代码更清晰，但意味着一个项目可能有上...

我们之前讲的： 文档流 → 格式化上下文 → 包含块 → 层叠上下文 这几层都是“逻辑层面的排版规则”，属于 Layout（布局阶段）。 而在前面我们在讲fixed和tra...

浮动（float）与定位（position）都是“对文档流的干预机制”，它们的出现正是因为早期 Web 页面仅靠文档流无法完成复杂的布局需求。 问题背景：文档流的局限 起点...

理解 文档流（Document Flow） 是 CSS 排版的“血液循环系统”， 而 盒模型（Box Model），则是这个体系中每一个“细胞”的基本结构单位。 ——CSS...

现在进入 CSS 的核心底层——“文档流（Normal Flow）”。 如果我们把 CSS 比喻为“排版的语言”， 那么“文档流”就是它的语法基石、世界物理法则。 理解它，...

这部分内容，是整个 CSS 的灵魂所在，因为所有“视觉、动画、响应式”等后续能力，都建立在“排版布局”这个空间规则之上。 排版，就是“空间秩序”的科学。 起点：HTML 诞...

初学CSS的同学，容易被其大量的属性与规则所左右，难以记忆的同时，还要去理解各种奇异效果的原理，如响应式与复杂动画等等，属实让人困惑。 其实，这正是很多人学习 CSS 时的...

经过前面的学习， 我们已经把 Git 的“本地模型”理得非常清楚了（工作区 → 暂存区 → 仓库 → HEAD/branch/ref），接下来进入最后一块大拼图 —— 远程...

Git 在检测差异时，不是像 Word 那样按“字节对比”，也不是按“行号硬比对”，而是用 最长公共子序列（LCS, Longest Common Subsequence）...

经过前面的学习，我们已初步理解了 Git 的“底层三层模型（blob/tree/commit + HEAD/branch/ref）”，接下来看分支操作才会觉得 “哦，原来都...

下面我们走到 Git 的“灵魂概念”——HEAD 指针。理解 HEAD，等于理解 Git 的行为逻辑。 为什么 Git 要有 HEAD？ Git 是一个内容寻址文件系统，核...

前面我们已经把 对象模型 (blob / tree / commit / tag) 打好了地基，现在进入 分支 (branch) ，就会非常自然了。 分支的本质 在 Git...

为什么需要“提交”？commit的本质是什么？我们每一次commit，Git究竟干了什么？这些问题，涉及到Git高效的关键——快照、哈希与指针的思想......