懒羊羊我小弟-优快云博客

原创 CSS-BFC（块级格式化上下文）

BFC 即块级格式化上下文，可类比快递仓库，是独立渲染区域。它通过根元素、浮动、绝对定位等 7 种条件触发。核心特点为内部布局独立、元素垂直排列等。能解决外边距合并、清除浮动、阻止元素被覆盖、实现自适应布局及隔离布局环境等问题，广泛用于防止父元素高度塌陷、解决垂直外边距合并等场景。使用时要注意避免滥用、关注性能等，与 IFC、FFC、GFC 等格式化上下文各有特点与用途。

2025-03-28 18:00:03 730

原创 CSS回顾-Flex弹性盒布局

Flex 弹性盒布局是 CSS3 中实现复杂网页布局的便捷方案。将其比作玩具收纳箱，可通过主轴与交叉轴排列 Flex 项目。容器属性涵盖声明容器、设置主轴方向、控制换行及多种对齐方式；项目属性可操控单个元素排序、缩放等。借助它能实现水平垂直居中、等宽三栏等经典布局，使用时记好口诀，注意旧版浏览器前缀，优先用于移动端，避免滥用，能有效提升网页布局效率与适配性。

2025-03-28 16:04:09 1110

原创前端本地储存的方式汇总

本文汇总前端本地储存方式。Web 浏览器端有 Cookie、Web Storage（localStorage、sessionStorage）、IndexedDB、Cache API 等，介绍各自存储方式、特点、区别及应用场景，强调安全性注意事项。APP 分原生（iOS、Android）与跨平台，小程序以微信、支付宝为例，阐述其存储方式、区别和应用场景，为开发者按需选择合适存储提供参考。

2025-03-04 12:12:37 958

本文介绍前端水印实现方式。前端水印用于标识内容归属等，有信息防盗、数据溯源和品牌标识等价值。实现方案包括 DOM 元素覆盖、Canvas 动态绘制、SVG 矢量方案及常用插件。还讲述安全增强、性能优化策略，如 DOM 监控、多重防御、离屏 Canvas 等。最后给出技术选型建议，普通业务用 DOM 方案，安全敏感场景选 Canvas，高清显示用 SVG，移动端用 CSS 重复背景，完整水印系统需结合服务端加密存储。

2025-03-03 20:09:40 1065

原创 Git操作指南：分支合并、回退及其他重要操作

本文是 Git 操作指南，涵盖多种关键操作。介绍分支合并的普通、变基、压合方式，附推荐流程与注意点；讲解取消本地修改、强制拉取远程代码的方法；阐述分支合并回退、特定版本回退及取消变基的操作。为开发者提供 Git 使用技巧，便于在软件开发中高效管理代码版本

2025-02-28 10:01:08 1468

原创从零搭建企业级React项目全攻略

本文是从零搭建企业级 React 项目全攻略。先介绍项目初始化，创建文件夹、初始化 package.json 并安装核心依赖。接着设计项目结构，强调模块化优势。详细讲解 Webpack 和 TypeScript 配置，给出路由与 Redux 状态管理示例。还说明了项目启动与构建命令，以及部署方法。最后给出最佳实践建议，涵盖性能优化、代码规范、可维护性等方面，包含懒加载、代码规范检查、单元测试等内容，可按需扩展功能

2025-02-20 15:09:27 918

原创常用 Webpack Plugin 汇总

本文详细汇总了 18 种常用 Webpack 插件，并根据重要程度和使用次数标注星级（满星 5 星）。涵盖生成 HTML 并注入资源的 HtmlWebpackPlugin（⭐⭐⭐⭐⭐）、提取 CSS 的 MiniCssExtractPlugin（⭐⭐⭐⭐）、压缩 JS 的 TerserWebpackPlugin（⭐⭐⭐⭐）等。介绍了各插件作用、使用场景及语法示例，包括开发环境提升效率的 HotModuleReplacementPlugin，生产环境优化性能的 CompressionWebpackPlugin

2025-02-19 15:06:11 683

原创常用Webpack Loader汇总介绍

本文详细介绍了 Webpack 常用 Loader 及相关插件。涵盖处理 JS 的 Babel Loader、CSS 相关的 CSS Loader 与 Style Loader 等基础 Loader，还有处理特定文件类型的 HTML Loader、Markdown Loader 等。也提及保障代码规范的 ESLint Loader、Stylelint Webpack Plugin，以及优化资源的 Image Webpack Loader 等。此外，介绍了提取 CSS 的 Mini CSS Extract P

2025-02-18 08:24:54 879

原创 package.json的全面详解

本文为 package.json 入门指南，适合小白学习。详细介绍了创建方法，解释常见属性如 name、version 等用途及配置示例。阐述依赖管理，区分 dependencies 和 devDependencies，说明依赖版本升级标识规则。还强调 package - lock.json 对版本控制的作用。最后，讲解将项目通过 npm 发布到 npm 平台的全流程，包括注册账号、检查文件、编写 .npmignore、测试及发布等步骤。

2025-02-17 21:34:10 1178

原创 Webpack 基础入门

文章围绕 Webpack 基础入门展开，先介绍 Webpack 是静态模块打包工具，阐述使用它的原因，如代码拆分、模块加载等。接着讲解基础入门步骤，包括安装、创建项目结构、编写及配置代码、执行打包。然后介绍核心功能，如加载器、插件的使用，以及代码拆分与按需加载配置。旨在帮助小白快速了解 Webpack，开启 Web 开发之旅。

2025-02-17 16:46:12 1032

原创 Vite入门指南

本文是 Vite 入门指南。Vite 是新型前端构建工具，有极速启动、闪电热更新等优势。文章介绍了环境准备、创建项目、核心功能实践、配置详解、插件系统、生产构建、环境变量等内容，对比了 Vite 与 Webpack 的差异，还给出完整示例代码与最佳实践。掌握 Vite 能让开发者在现代化前端开发中占先机，文末还给出了进一步探索学习的方向

2025-02-13 17:23:18 762

原创包管理工具npm、yarn、pnpm、cnpm详解

本文对 npm、yarn、pnpm、cnpm 等包管理工具进行了详解，涵盖基本用法、特点、对比、适用场景等内容。介绍了浏览器包管理工具及模块打包工具，给出不同类型项目选择包管理工具的建议，还包括项目初始化、依赖管理、性能优化、安全考虑等方面的使用建议，强调团队统一、更新依赖与遵循最佳实践的重要性。

2024-12-26 16:52:39 919

原创 CSS回顾-CSS样式优先级规则详解

本文深入探讨 CSS 样式优先级规则。先由对 h1 标签样式设定的思考引入，阐述优先级核心意义在于解决样式冲突。接着详细介绍基础优先级规则，包括!important、内联样式、ID 选择器、类等选择器的优先级顺序及其特点。同时讲解优先级计算规则，涵盖选择器间计算值、样式表顺序以及样式继承（如文本、列表、表格等相关样式的继承情况）。最后提出样式优先级冲突的最佳实践，如合理规划选择器、模块化设计、利用计算权重技巧和遵循样式表组织规范等，强调理解相关规则对创建高质量 CSS 样式表以实现完美网页视觉效果的重要性。

2024-11-21 17:33:56 1345

原创 CSS回顾-CSS选择器详解

介绍了 CSS 选择器，包括基本选择器（元素、类、ID、通配符选择器）、组合选择器（后代、子元素、相邻兄弟、通用兄弟选择器）、属性选择器（简单属性、属性值完全匹配、部分属性值匹配、多个属性选择器）、伪类选择器（链接、用户操作、目标、语言、CSS3 新增结构、否定、表单相关伪类）和伪元素选择器（::before、::after、::first - letter、::first - line、CSS3 新增::selection），阐述了其用法、示例和特点，强调了 CSS3 新增选择器的作用以及在开发中使用

2024-11-19 17:44:37 1424

原创 CSS回顾-长度单位汇总详解

本文详细介绍了 CSS 中的长度单位。包括绝对长度单位（px、cm、mm、in、pt、pc）和相对长度单位（em、rem、%、vw、vh、vmin、vmax）。阐述了它们的定义、应用场景、优缺点，并对比了绝对长度单位与相对长度单位，指出绝对长度单位有固定参照，相对长度单位基于其他元素属性计算，在响应式设计中各有特点。

2024-11-14 17:40:35 1331 1

原创 CSS回顾-颜色单位详解

本文介绍了 CSS 中的颜色单位相关知识。包括颜色名称、十六进制颜色值、RGB、RGBA、HSL、HSLA 等颜色单位的表示方式、特点及使用场景。还阐述了颜色单位之间（颜色名称与十六进制、十六进制与 RGB、RGB 与 HSL）的转换方法，最后对各种颜色单位在使用场景、优缺点方面进行总结。

2024-11-12 17:53:35 616

原创 CSS回顾-基础知识详解

本文对 CSS 基础知识进行回顾。首先介绍 CSS 是用于描述文档呈现方式的样式表语言，阐述其基础语法（选择器和样式信息）和注释语法。接着讲解 CSS 样式的三种引用方式，包括外部样式表（外联样式）、内部样式表（style 标签）、行内样式表（内联样式）及其优缺点，指出外部样式表在网页开发中最常用。还详细介绍了 CSS 盒模型，包括内容区、内边距、边框、外边距，以及标准盒模型和怪异盒模型的区别。

2024-11-12 17:01:07 1159

原创 HTML5新增标签与属性

本文介绍 HTML5 新增标签与属性。包括语义化结构标签，使网页结构清晰且利于 SEO；多媒体支持的和标签；图形与绘图的、SVG 和 WebGL；表单属性增强，有新输入类型、验证及新属性；本地存储的localStorage和sessionStorage。HTML5 新特性提升开发效率、用户体验和性能，涵盖语义性、多媒体、表单、图形绘制及本地存储等方面，为网页开发带来丰富功能和强大优势。

2024-11-11 09:43:10 1551

原创 HTML5新增多媒体支持

HTML5 新增多媒体支持，主要体现在音频和视频标签。音频标签可嵌入音频，有多种属性和 JavaScript API 控制，存在兼容性问题。视频标签能嵌入视频，同样有丰富属性和 API，也面临兼容性挑战。HTML5 多媒体支持具有原生、跨平台、语义化和增强用户体验等优势。

2024-11-07 12:10:14 801

原创 HTML标签属性详解

本文是对 HTML 标签属性的详细介绍。首先定义了 HTML 属性为标签提供额外信息，以不同人身上的特征作比喻帮助理解。接着介绍了全局属性，包括 id、class、style、title 等常见属性及 draggable、dir、translate 等特殊属性。然后阐述了特定标签属性，如 img、a、input、table、textarea 等标签的特有属性。还提到了自定义属性以 “data-” 开头，可添加特定于应用程序的信息。最后总结了属性的作用，包括增强功能、控制外观、提高交互性以及便于识别和操作，强

2024-10-26 14:22:08 1458

原创 HTML标签汇总详解

HTML 标签是用于定义网页内容结构和表现形式的标记。每个标签都有特定的含义和用途，通过不同的标签组合，可以构建出丰富多彩的网页。本文汇总了html所有常用标签语法、一一进行分类讲解；html标签有这一篇就够了

2024-10-26 12:05:11 2282

原创 HTML基础总结

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。它通过使用各种标签来定义网页的结构和内容，告诉浏览器如何显示网页。HTML 文档由标签和文本组成，标签用于描述文本的性质和结构。HTML 基础语法是网页开发的基石。通过掌握 HTML 的基本结构、常用标签和属性，以及如何添加注释，可以创建出结构清晰、内容丰富的网页。随着不断的学习和实践，可以打造出更加精彩的网页内容。

2024-10-25 20:59:44 923

原创 nvm（node版本管理切换工具）

在工作中，我们可能同时在进行2个或者多个不同的项目开发，每个项目的需求不同，进而不同项目必须依赖不同版本的NodeJS运行环境，这种情况下，对于维护多个版本的node将会是一件非常麻烦的事情，nvm就是为解决这个问题而产生的，他可以方便的在同一台设备上进行多个node版本之间切换。

2024-10-22 17:41:30 1052

原创 css预编译器-Sass常用命令详解

本文主要介绍了sass的常用命令、基本语法、常用内置函数；同时还介绍了如何在项目上如何安装配置sass

2024-10-17 09:18:13 930

原创代码提交后服务器项目同步更新

本文主要介绍如何监听gitee码云代码仓库代码更新，从而实时更新服务端对应项目项目代码；并重新更新部署。涉及知识点：宝塔服务器、webhook、nest、脚本指令

2024-10-16 15:03:23 830

原创防抖与节流详细讲解

防抖（Debounce）和节流（Throttle）是都是常用的前端优化技术，用于控制函数的执行频率；本文主要介绍了各自的实现原理、适用场景，以及他们之间的异同点。

2024-08-28 11:37:15 754

原创前端记录日志生成文件保存到本地

本文主要介绍了前端存储日志的方式，以及如何生成txt文件进行下载；

2024-06-21 18:28:49 1164

原创基于websocket与node搭建简易聊天室

本篇就基于websocket搭建一个简易实时的聊天室。在本篇开始之前也可以去回顾一下websocket详细用法：还介绍了简单搭建node项目，启动后台websocket服务。最后还总结了创作过程中遇到的小知识点，供大家学习参考。

2024-06-04 10:55:34 792

原创 WebSocket详解与封装工具类

websocket是什么？websocket有什么好处和特点？为什么要用到websocket？什么情况下会用到websocket？好了，带着这几个疑问一起来了解一下websocket。WebSocket是HTML5开始提供的一种基于TCP的协议，用于在客户端和服务器之间建立持久连接，实现实时通讯的功能。早期，客户端如果想实时拿到浏览器的最新数据就必须要通过发送http请求定时做轮询。每隔一段时间去向浏览器请求最新数据，这样大大的消耗了服务器的资源。

2024-06-02 12:47:30 995