Mr.储

CSS Grid 布局学习手册 从零到进阶的系统性学习指南，覆盖核心概念、常用属性、实战模式与排错技巧。适合：有一定 CSS 基础、希望掌握二维布局的前端开发者。 目录 为什么学 Grid 核心概念速览 创建网格容器 定义轨道：列与行 间距 gap 放置网格项 命名网格线与区域 对齐与分布 隐式网格与自动放置 响应式 Grid 模式 Subgrid 子网格 常用布局模板 Grid vs Flexbox 调试与浏览器兼容 速查表 练习题 学习路径建议 1. 为什么学 Grid1.1 Grid 解决什么问题CSS Grid 是二维布局系统：同时控制行和列。 布局方式 维度 典型场景 普通流 / float 近似一维 图文环绕（历史方案） Flexbox 一维（主轴） 导航栏、工具条、组件内部排列 Grid 二维 整页骨架、卡片墙、仪表盘、杂志式排版 一句话： Flex：沿着一条线排东西 Grid：在一张表里摆东西 1.2 你将获得的能力 用少量代码搭出页头 / 侧栏 / 主内容 / 页脚的整页骨架 写自适应 ...

JavaScript数据结构和算法(一) 邂逅数据结构与算法1. 编程尽头、数据结构1.1 为什么需要学习数据结构与算法？ 1.2 编程的真相 – 数据的处理 在前面的课程中我不断的强调一个编程的真相：对数据的操作和处理 编程的最终目的只有一个：对数据进行操作和处理 评判编程能力、水平的高低，要看你是否可以更好的操作和处理数据 在之前的很多课程中，我经常和同学们强调一个事实：所以的编程（无论是前端、后端、算法、人工智能、区块链，也不论是什么语言JavaScript、Java、C++等等）最终的目的都是为了处理数据 当你拿到这些数据时，以什么样的方式存储和处理会更加方便、高效，也是评判一个开发人员能力的重要指标（甚至是唯一的指标） 虽然目前很多的系统、框架已经给我们提供了足够多好用的API，对于大多数时候我们只需要调用这些API即可 但是如何更好的组织数据和代码，以及当数据变得复杂时，以什么方式处理这些数据依然非常重要 只有可以更好的处理数据，你才是一个真正的开发工程师，而不只是一个API调用程序员 以前端、后端为例： 前端从后端获取数据，对数据进行处理、展示 和用户进行交互产生 ...

数据可视化（英语：Data visualization），主要旨在借助于图形化手段，清晰有效地传达与沟通信息。 为了清晰有效地传递信息，数据可视化通常使用柱状图、折线图、饼图、玫瑰图、散点图等图形来传递信息。 也可以使用点、线、面、地图来对数字数据进行编码展示，以便在视觉上快速传达关键信息。 可视化可以帮助用户分析和推理数据，让复杂的数据更容易理解和使用，有利于做出决策。 前端可视化-CSS3transform - 2d CSS3 transform属性允许你旋转，缩放，倾斜或平移给定元素。 Transform是形变的意思（通常也叫变换），transformer就是变形金刚 常见的函数transform function有： 平移：translate(x, y) 缩放：scale(x, y) 旋转：rotate(deg) 倾斜：skew(deg, deg) 坐标系 CSS3 transform属性允许你在二维或三维空间中直观地变换元素。 transform属性会转换元素的坐标系，使元素在空间中转换。 用transform属性变换的元素会受transfor ...

快速开发工具vite认识vite什么是vite呢？ 官方的定位： 官方的定位：下一代前端开发与构建工具； 如何定义下一代开发和构建工具呢？ 我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等等； 所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel； 但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多； 构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来； 所以也有这样的说法：天下苦webpack久矣； vite的构造 它主要由两部分组成： 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速； 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源； 在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。 这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们 ...

什么是 Electron Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架，它的本质是结合了 Chromium 和 Node.js，是⼀个跨平台桌⾯应⽤开发框架，，让开发者能够使用 Web 技术构建原生桌面应用 核心架构 Chromium：负责渲染用户界面（HTML/CSS/JavaScript） Node.js：提供文件系统访问、网络操作等底层能力 主进程与渲染进程： 主进程：应用入口点，管理应用生命周期、原生窗口 渲染进程：每个窗口的独立进程，渲染网页内容 Electron 的优势 🚀可跨平台：同⼀套代码可以构建出能在：Windows、macOS、Linux 上运⾏的应⽤程序。 💻 上⼿容易：使⽤ Web 技术就可以轻松完成开发桌⾯应⽤程序。 🔌底层权限：允许应⽤程序访问⽂件系统、操作系统等底层功能，从⽽实现复杂的系统交互。 📦社区⽀持：拥有⼀个庞⼤且活跃的社区，开发者可以轻松找到⽂档、教程和开源库。 知名 Electron 应用 Visual Studio Code GitHubDeskto ...