MicroMatrix

什么是包含块？ 包含块（containing block），顾名思义，就是一个包含其他元素的“块”。但它可不只是一个简单的容器哦！它不仅影响子元素的位置，还会影响到**宽度、长度、内外边距（padding、margin）、甚至定位（position）**等各种CSS属性的计算。 例如，像下图一样，很多时候我们看不见它的存在，但它正在幕后默默工作。它的作用，就是决定元素的尺寸和位置，特别是当我们使用...

你是否了解 CSS 的属性计算过程呢？ 有的同学可能会讲，CSS属性我倒是知道，例如： p{   color : red; }  上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。 但是要说 CSS 属性的计算过程，还真的不是很清楚。 没关系，通过此篇文章，能够让你彻底明白什么是 CSS 属性的计算流程。 首先，不知道你有没有考虑过这样的一个问题，假设在 HTML...

浏览器的进程模型 何为进程？ 程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程  每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。 何为线程？ 有了进程后，就可以运行程序的代码了。 运行代码的「人」称之为「线程」。 一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。 如果程序需要同时执行多块代码，主线程就会启动更多...

在开发现代Web应用时，加载提示是一个不可忽视的小细节——它不仅能提升用户体验，还能避免让用户在等待时“焦头烂额”。但说到加载动画，大家往往会想到图片、GIF或者其他需要大量资源的方式。那么，如果我们不用这些沉重的资源，能否创造出既轻量又炫酷的效果呢？答案是肯定的！今天，我们就来聊聊如何用SVG和Vue 3实现一个高效、低耦合的加载提示组件。 1. 组件设计：轻量化与高效性并存 我们先从最基本的L...

日常的项目开发中，有一些文件会随着你的本地环境而改变。例如package-lock.json等文件会在你安装的时候，根据你版本的不同而改变。虽然package.json会指定版本的访问，但是有时候还是会出现一些BUG，使得版本不兼容。为了不影响别人的环境，那么这种文件不想记录他的修改，该如何做呢？

一行代码实现复杂设计和移除图片背景的方法 mix-blend-mode multiply; 17行代码实现骨架屏 *[loading='true'] > divnot([loading='true']) { background-image linear-gradient(90deg,

在日常的前端开发中，经常会遇到文本处理，日期处理，文本转换等需求。通常是将它写到一个utils 文件中。问题来了，每个项目都要处理，那么文件就要重复的复制，我是个懒人。想着用rollup将它打包成一个npm插件，然后直接安装，之后局部引入来。这样就方便了，同时也只需要我需要的插件。这样一来随着工具函

日常开发中，经常会遇到手写板的需求。对于大部分人来说使用canvas画布是最为方便的，而且也能很好的节省性能。这里在可汗学院学习的时候发现他们的答题手写用了svg的实现方法。这十分巧妙。不用考虑题目如何在cavnas画布上渲染了。

在当下这个通信技术高速发展的时代，网站的出现拉近了用户和商家，用户与用户之间的距离。这也滋生了一些黑色产业，对网站进行攻击获取数据，瘫痪网站以获取不法收入。 这篇博客，我们将探讨网站安全的方方面面，从基础的防护措施到应对复杂攻击的策略。帮助开发者构建一个安全性高的网站应用。 跨域攻击 现如今的网站应

在开发涉及多步骤的前端流程时，传统的“硬编码”方式会导致代码耦合度高、流程不易扩展、维护成本大。当我们希望在流程中增加或修改某个步骤时，常常需要在多处改动代码，这不利于项目的长期维护。为了克服这些问题，我考虑使用责任链模式和工厂模式来优化这类需求。责任链模式能够将每个步骤解耦，使每个步骤独立处理，互