一个 HTML 文档在浏览器内将会被解析为一棵文档树，这是众所周知的。 CSS 的盒子模型则描述了文档上的每一个节点所生成的模型，这是 CSS 布局排版的基础。 标准盒型 盒子模型示意图 每一个盒子都一块内容（content）区域，围绕内容从内向外分别是内边距、边框和外边距（padding 、 border 、 margin）。

三栏布局是比较经典的 CSS 布局，特点就是中间内容自适应，首先渲染，其次左右内容大小保持不变分布两旁。结构上打破了一般意义上的左中右的顺序，变成了中左右的顺序，但视觉展示仍然要求是左中右的布局，于是，如何将中间内容放回到中间，并重新分布左右则是此类技术的核心所在。在 flex 之前，前端多用 float 实现，出现了双飞翼和圣杯布局两种实现，现在我们可以用 flex 来很简单的实现。

第二篇 响应系统 第四章 响应系统的作用与实现 设计完善的响应式系统 借助 Proxy ，我们实现一个基本的响应式系统。书中代码我改成可以在 Node 中运行的代码了。 const bucket = new Set(); const data = { text: 'hello world' }; const obj = new Proxy(data, { get(target, key) { bucket.add(effect); return target[key]; }, set(target, key, newVal) { target[key] = newVal; bucket.forEach(fn => fn()); return true; } }); function effect() { console.log(obj.text); } effect(); setTimeout(() => { obj.text = 'Hello Vue'; }, 1000); // Output: // hello world // Hello Vue 这里是写死了 effect ，不过不用太过纠结。

最近在读许立志的诗，他的诗集《新的一天》。他离去的太早了，诗集还很粗糙，来不及打磨，但纵使如此，也有些诗的力量仍力透纸背，字字泣血。我最喜欢他的三首诗，《我谈到血》、《我咽下一枚铁做的月亮》和《夜班》。

看看去年写年终总结的时间，差不多是同一时刻。年末国内终于放开封控了，我也“有幸”感染了新冠，过去差不多一周了，咳嗽鼻塞还没好。现在感觉其实有点像咽喉炎鼻炎发作，真不知道什么时候是个头啊！

大约是在上周三晚上，感觉鼻子喉咙不大对劲儿，然后推测大抵是阳了。第二天硬着头皮去上班，上午还没结束就撑不住了，感觉回家去休息。同时给了我两粒感康，但我到最后也没有吃。

标签模板是个看起来很 Magic 的语法，写起来像是这样。 console.log`Hello, World!`; // Output: ["Hello, World!"] 实际上，这里的模板标签被转换成这样的一句调用。 console.log.call(console, ['Hello, World!']); 如果我们有用变量的话， const name = 'world'; console.log`Hello, ${name}!` // Output: [ 'Hello, ', '!' ] world 就会被转换成这样一句调用。

我们一般会认为 async/await 是 Promise 的语法糖，实际上也没有错。但在 Node 10 的时候，一个 await 会产生三个微任务，导致单个 await 的性能远不如 Promise ，但在 Node 12 时， V8 团队称，其性能已经比一般手动创建处理的 Promise 好了。