Origin of Ray

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。关于Flex布局可以看我的上一篇博客：https://sunra.top/posts/40806/

这篇博客我们继续介绍下一种新的布局：grid布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

当然还有一种布局解决方案是grid布局，但本文先就flex进行梳理。

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。

我们说 flexbox 是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

今天无意间点开了MDN中关于性能优化的系列文章，学到了很多新的东西，也把很多旧的东西重新梳理了一下。

比如HTML不同的类型资源的加载顺序，是否会互相阻塞等问题，又比如学到了一些新的优化方式，如14K优化，dns-prefetch等

这个是入口地址：https://developer.mozilla.org/zh-CN/docs/Web/Performance

给定一个数组，包含从 1 到 N 所有的整数，但其中缺了两个数字。你能在 O(N) 时间内只用 O(1) 的空间找到它们吗？

题目链接：https://leetcode.cn/problems/missing-two-lcci/

这道题严格来说并不是一道算法题，我感觉它的解法中，一种像是计算机组成中二进制的知识，一种是数学知识

CSS用了很久，但是对于其中的一些用法总是有些模糊，没有一个系统的，有逻辑的认知。这次就先理清楚一下CSS中的BFC与盒子模型，以及相关的一些定位和布局属性。

今天在Github上看到一个很好的开源项目，是根据react的原理实现一个简单的react demo。这里只是对它的代码做自己的注释，加深自己的理解。这里是项目链接

这次一定要搞明白万向锁是个什么东西。本文会按照以下顺序慢慢展开：

• 通过一个简单的可以实际操作的例子告诉大家，万向锁在我们生活中的表现
• 什么是万向锁
• 分别从矩阵和几何的角度讲一下万向锁存在的原理
• 万向锁到底有什么问题
• 为什么四元数可以解决万向锁的问题

我们之前用到的纹理，比如法线纹理，渐变纹理，遮罩纹理等，都是一维或者二维的，这次我们来介绍一下立方体纹理，并看一下如何使用立方体纹理实现环境映射。

我们继续看一下Unity光照的最后一部分，衰减

这周在工作的时候，看到了项目中使用了做物理材质，这才反应过来，自己从来没有用过，也不太清楚他和刚体等其他物理组件的关系，所以就重新阅读一下官方文档，进行一定的实践和总结。