把 CSS 布局讲成人话
从盒模型讲到 Grid 与 Flex 的分工：什么时候该用二维网格，什么时候一行流式就够。 配了十几个能直接改参数的对照案例，看完基本能自己判断该选哪种布局。
前端 · 布局
01
关于这里
我叫 江然，白天写业务代码，晚上折腾自己感兴趣的东西。 前端、脚本、一点点系统层面的东西，什么都想摸一遍，摸完就记下来。 这个站点是我给自己留的一块空地：不追热点，不带节奏，只把学过的东西写清楚。
我习惯把知识拆成三层：能复述的原理、能跑通的代码、能复用的结论。 写笔记的时候，我会尽量把这三层分开写——原理用大白话，代码贴可运行的完整片段， 结论压缩成一两句话放在开头，方便下次直接翻到。
所以这里的文章普遍比较啰嗦，也会经常更新。 如果哪天发现半年前写的结论已经不对了，我会保留旧版本，在旁边补一段「后来的修正」， 让思考的轨迹留着，而不是把它擦掉。
02
学习笔记
按主题整理的长期笔记，每条都会持续修订。
JavaScript 里的那些边界
事件循环、微任务顺序、闭包里的变量捕获、this 的四种绑定。
全部用「先猜输出、再跑验证」的方式写，猜错的地方就是真正要补的地方。
一次请求到底走了多少步
从输入网址到页面渲染完成：DNS、TCP、TLS、HTTP 缓存、解析、绘制。 每一步都配了对应的观察手段，能亲眼看到它在做什么，而不是只背流程图。
网络 · 原理脚本化处理重复劳动
批量改文件名、整理图片尺寸、把散落的表格合成一份。 这些事写一次脚本就够用一年，笔记里留的都是可以直接复制的模板。
工具 · 自动化
03
网页实验
一些做出来自己会用的页面，代码都放在同一个目录里。
01
已上线
纯手写的阅读排版页
不用任何框架，只靠行高、字距和留白，把长文排到能一口气读完。
02
已上线
颜色对比度检查器
输入两个色值，实时给出对比度数值和是否达标的判断，调主题时很省事。
03
已上线
本地待办与计时
数据只存在浏览器里，关掉再打开还在。用它记录每天真正投入的时间。
04
在打磨
表格数据小转换
把粘贴进来的杂乱文本整理成规整表格，支持自定义分隔符和列顺序。
04
折腾记录
按时间倒序，记下这段时间真正花过力气的事。
2025 · 11
把整站重写成单文件
样式和脚本全部内联，去掉所有外部依赖。首屏不再等待任何资源， 打开就能读，这套写法后来成了我做小页面的默认起点。
2025 · 09
给笔记加上了全文检索
没有引入任何库，用倒排表加前缀匹配自己写了一版。 检索速度比想象中快，代价是第一次加载时多花了一点时间建索引。
2025 · 06
踩了一次响应式布局的坑
手机上看着正常，横屏就错位。原因是一个固定宽度把容器撑破了， 改成弹性单位之后问题消失。顺手把整站的尺寸单位统一了一遍。
2025 · 03
开始坚持每天写一段
不追求成篇，只要求把当天学到的一句话写清楚。 到现在回头看，这些零碎的句子反而是最有用的部分。
联系方向
如果你也在做类似的记录，或者对某篇笔记有更简洁的写法， 欢迎写信来聊。我比较喜欢具体的讨论：一个具体的场景、一段具体的代码、 一个具体的报错，比泛泛的寒暄更容易聊出东西。
- 电子邮箱
- jiangran@example.net
- 内容方向
- 前端实践 · 学习笔记 · 小工具
- 回信习惯
- 三日内，能答的一定答