当你在浏览网页的时候，您可能经常会遇到这样一种类型的布局。它被称为便当网格布局，这种布局的灵感来源于日本的传统便当盒子 🍱。英文名为 Bento ，所以又叫 Bento Grid。
Bento 网格用途广泛，非常适合显示图像、文本、混合媒体等各种内容。它们以紧凑且有组织的方式展示大量内容，使您的网页或应用程序界面看起来干净清爽且能快速抓住人的眼球。
这种设计的趋势被认为可能最早来源于 Windows 8 和 Metro Design 设计风格。
box-shadow 和 drop-shadow 都是用于给元素创建阴影的 CSS 属性，但它们之间存在一些区别。
box-shadow 用于在元素的边界框（包括内容、内边距和边框）周围创建阴影效果。可以设置阴影的颜色、模糊半径、水平和垂直偏移量等参数。阴影受到元素的边界框限制，
即使元素的内容或边框超出边界框，阴影也不会超出。以下是一个示例：
box-shadow: 2px 2px 5px #888888;
现在我的网站代码发布的流程是这样的：
从持续集成的自动化角度看，目前还远远不是最优方案，但是经过慢慢探索，尽量减少开发到发布过程中人为参与的部分，就很满意了。
今天突然想把手动执行 shell 脚本这一步也干掉，我采用的是通过定时任务每隔半小时执行一次脚本，虽然还不能做到精准的推送代码到远程分支就立马触发线上发布，但对于自己的 个人网站项目目前自动化程度也还是可以接受的，没必要搞一大堆高大上的工具来辅助。
前端的技术框架层出不穷，各种生态衍生的库更是多到让人眼花缭乱，光是看着这些名字就一时让人分不清谁是干什么的。
这与 JavaScript 这门语言的广泛的应用有关，由它衍生出的运行时环境就有 Node.js 和各种浏览器的内核例如：Chrome V8，然后随着各种运行时环境中发展出来的应用场景 衍生出来的技术框架。有专门应用于服务端的和客户端的技术，同时也有支持 服务端渲染的。
基本上前端框架就是围绕着 Vue 和 React 两大生态，它们两者互相借鉴，又各具特色和优势。
这不最近我就错把 Nest 当做 Next ，被两者的学习资料搞混淆了。
我的站点从搭建之日就接入了统计工具，为什么我一直很在意网站数据的统计📊？因为我确确实实把自己的网站当产品在做，我需要关注网站每天的受访情况和当前访问用户的在网页上的一些 行为来作为反馈，来验证自己的文章和作品在网上产生的关注度和影响力。
有人可能会说，你写个博客为什么要那么功利心？我觉得做凡事都要有个目的性，不达目的不罢休，这样你才能获得长久的动力。有功利心也没什么不好，至少在你成功之前，你需要通过一些手段 来证明你的能力。不要一开始就那么佛系，觉得我写了就好了，给了自己心理安慰，发布出去然后扔在那里不管了。
赶在中秋国庆假期前，终于将我的网站（https://spacexcode.com/）结构定好了，如之前所说，这个网站的定位就是作为自己的前端知识沉淀。内容大致从：前端涉及的基础知识分类汇总（知识库）， 实战类的代码演练（代码片段），特定技术的深度使用总结（专题），零散知识点的领悟总结（博客）这四个方面展开。还有最重要的一点就是这个网站不仅仅是给自己看的，我希望它像一个产品， 面向的是整个互联网受众，在学习上给大家一点点灵感。
是不是在日常开发中经常遇到实现网格的需求，网格通常对网页中展示的元素能起到很好的定位和对齐作用。
这里介绍如何只通过 CSS 来实现这个需求？
这里我们的背景图使用 SVG 来创建，首先，创建绘出一个正方形，填充白色；然后通过矩形实现垂直和水平的线条，进而分别对它们进行定位居中。
<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>
<rect width='40' height='40' fill='#fff'></rect>
<rect x='50%' width='1' height='100%' fill='rgb(203 213 225)'></rect>
<rect y='50%' width='100%' height='1' fill='rgb(203 213 225)'></rect>
</svg>