找到
55
篇与
Web前端
相关的结果
-
少数人知道的 10 个神奇 CSS 选择器 在 Web 开发中，CSS 扮演着至关重要的角色，但很多开发者并没有真正发掘它的全部潜力！ 大多数人熟悉 ID 选择器、类选择器或元素选择器，甚至伪元素的使用也很常见。然而，你知道 CSS 其实还有许多不为人知的强大选择器吗？ 今天，就带你揭秘一些鲜有人知但却非常实用的 CSS 选择器，让你在样式控制上更上一层楼！ 图片 1. 属性选择器 属性选择器可以根据 HTML 元素的属性来应用样式，而无需额外添加类或 ID。 基础属性选择器 a[href] { color: blue; }这个选择器会为所有包含 href 属性的 <a> 元素添加蓝色字体样式。 指定属性值的选择器 input[type="text"] { border: 1px solid #ccc; }此规则仅作用于 type="text" 的输入框。 匹配部分属性值的选择器 /* 以某个值开头（^=） */ a[href^="https"] { color: green; } /* 以某个值结尾（$=） */ a[href$=".pdf"] { color: red; } /* 包含某个值（*=） */ a[href*="example"] { color: orange; }这些选择器可以分别选中以 https 开头的链接、以 .pdf 结尾的链接，以及包含 example 关键字的链接，并应用不同的样式。 2. :nth-child() 选择器 该伪类选择器可以基于元素在其父元素中的位置来应用样式： li:nth-child(odd) { background-color: #f9f9f9; }这将使奇数序号的 <li> 元素具有不同的背景颜色。 3. :not() 选择器 想要排除某些特定元素？:not() 选择器可以帮你实现： button:not(.primary) { background-color: grey; }以上代码会为所有 不 具有 .primary 类的 <button> 按钮应用灰色背景。 4. :focus 选择器 提升用户体验和可访问性的一种方式是给获取焦点的元素添加样式： input:focus { outline: 2px solid blue; }当输入框获得焦点时，会显示一个蓝色的外边框。 5. ::before 和 ::after 伪元素 这两个伪元素可以在某个元素的前后插入内容，无需修改 HTML 结构： h1::before { content: "§ "; color: grey; } p::after { content: " (阅读更多)"; color: blue; }上面的示例会在所有 <h1> 标题前添加灰色的 "§ " 符号，并在每个 <p> 段落后面附加 "（阅读更多）" 的蓝色文本。 6. ::first-line 选择器 想让段落的首行样式有所不同？可以这样做： p::first-line { font-weight: bold; color: red; }这会让段落的首行变成 加粗 且 红色。 7. ::first-letter 选择器 如果你想让段落的首字母更具视觉吸引力，可以使用 ::first-letter： p::first-letter { font-size: 2em; color: green; }这样，所有段落的第一个字母都会被放大，并且颜色变成绿色。 8. :empty 选择器 这个选择器可以选中 没有子元素（包括文本内容）的 HTML 元素： div:empty { border: 1px dashed red; }这样，所有空的 <div> 元素都会带有红色虚线边框。 9. :checked 选择器 专门用于选中 复选框（checkbox） 或 单选按钮（radio） 的样式控制： input[type="checkbox"]:checked + label { font-weight: bold; }当复选框被选中时，相关的 <label> 标签会变成加粗字体。 10. 组合选择器 CSS 选择器可以组合使用，以实现更精准的样式控制。例如： a[href^="https"]:not([href*="example"])::after { content: " (安全)"; color: green; }这个规则会为 以 https 开头且不包含 "example" 关键字 的链接，在其后面添加绿色的 "（安全）" 标识。 结语 希望这篇文章能帮助你更好地理解 CSS 选择器的强大之处。如果你有什么喜欢的 CSS 选择器，欢迎在评论区分享！
-
删除 node_modules 目录太慢了？教你快速删除 前言 大家好，我是易航，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~ 在开发过程中，node_modules 文件夹常常会因为存放了大量的依赖包而变得庞大，尤其是在大型项目中。虽然 node_modules 是 Node.js 项目中不可或缺的一部分，但在一些特定的情况下，比如清理无用依赖或是重新安装依赖时，删除 node_modules 文件夹是一个常见的操作。然而，手动删除这么大的文件夹往往是一个耗时且效率低下的过程。对于开发者而言，如何快速有效地删除 node_modules 成为了一个常见的痛点。 这时，rimraf 工具就显得尤为重要，它可以替代rm -rf命令来递归删除文件夹，并且相较于手动删除，它提供了更高效的方式。 一、什么是 rimraf？ rimraf 是一个 Node.js 库，用于递归地删除文件和目录，特别适用于删除 node_modules 这样的庞大文件夹。rimraf 在删除文件和文件夹时，采用了优化过的实现，特别能够提高大文件夹删除的效率。 与操作系统自带的 rm -rf 命令相比，rimraf 通过减少系统调用、避免进程挂起等方式，能够加快删除过程，尤其在 Windows 平台上表现尤为突出，因为 Windows 本身对于删除大量文件的支持不如类 Unix 系统。 二、为什么手动删除 node_modules 这么慢？ 在大型 Node.js 项目中，node_modules 文件夹可能包含上万个文件和子文件夹。由于 node_modules 文件夹结构的复杂性和深度，手动删除该文件夹需要操作系统一次性处理大量的文件删除操作。在这种情况下，操作系统的文件系统（如 macOS 的 HFS+ 或 Windows 的 NTFS）可能会出现延迟，导致删除过程非常缓慢。 图片 1. 操作系统的文件系统限制 操作系统的文件系统并没有针对大规模删除优化。例如，当你使用文件资源管理器删除文件时，它实际上是逐一标记每个文件为删除状态，并且还会消耗大量的资源来更新文件索引。这对于 node_modules 这种成千上万个文件的文件夹来说，执行起来非常低效。 2. 文件系统缓存和索引 文件操作系统通常会保持一定的缓存和索引记录，以便加速文件的读写和删除过程。然而，当需要删除大量文件时，这些缓存和索引会成为瓶颈，导致删除变得缓慢。 三、如何使用 rimraf 加速删除过程？ rimraf 是一个专为递归删除大文件夹设计的工具，它通过优化删除过程中的一些细节，避免了文件系统缓存和索引的限制，使得删除过程更加高效。使用 rimraf 删除 node_modules 的步骤非常简单，以下是详细的操作流程。 1. 安装 rimraf 首先，我们需要在项目中安装 rimraf。可以通过 npm 或 yarn 来安装它。打开你的命令行，进入到你的项目目录下，执行以下命令： npm install rimraf --save-dev或者使用 yarn： yarn add rimraf --dev2. 在命令行中使用 rimraf 安装完成后，你可以在命令行中直接使用 rimraf 来删除 node_modules 文件夹。以下是使用 rimraf 删除 node_modules 的命令： npx rimraf node_modules3. 在 package.json 中配置脚本 为了简化操作，可以将删除命令添加到 package.json 中的 scripts 部分： { "scripts": { "clean": "rimraf node_modules" } }然后运行： npm run clean4. 使用 rimraf 加速其他删除操作 除了删除 node_modules，rimraf 还可以删除其他大文件夹： npx rimraf build四、rimraf 的优势 跨平台兼容：支持 Linux、macOS 和 Windows。 高效删除：针对大规模文件删除优化，速度显著提升。 易于使用：通过命令行或脚本配置即可快速操作。 与包管理工具集成：无缝配合 npm、yarn 使用。 五、总结 rimraf 是一个轻量级、高效且跨平台的工具，特别适合快速删除 node_modules 等大型文件夹。通过优化删除流程，它能显著提升开发效率，尤其是在 Windows 系统上表现突出。如果你还在手动删除 node_modules，不妨尝试使用 rimraf 来简化工作流程。 结语 我是易航，待过多种类型公司的前端开发者，始终坚持用通俗易懂的方式分享技术知识。欢迎关注我的博客「易航博客」获取更多前端干货！
-
使用 HTML、CSS 和 JavaScript 构建简易屏幕录像机 欢迎各位参与这个简单易行的屏幕录像项目！我们将仅使用传统的 HTML、CSS 和 JavaScript 共同完成。您可能会疑惑：为何需要这样的工具？答案在于屏幕录制对教程制作、演示汇报、缺陷报告等诸多场景至关重要。无论您是为频道创建分步教学视频，还是向潜在客户展示作品集，这类应用都不可或缺。本文将带您打造一款简约却强大的屏幕录像工具，完全基于 HTML、CSS 和 JavaScript 实现。 工具准备 如先前所述，本项目无需任何第三方库。但若您零编码经验，建议先观看此教程学习代码编辑器基础。 项目目标 本工具支持用户直接通过浏览器录制屏幕画面及完整音频。点击录制按钮后，系统将提示选择录制区域（如 Chrome 标签页），支持多窗口选择或全屏录制。右下角的 "同时共享音频" 选项可自由开关。录制前设有倒计时，最终视频以 WebM 格式下载。 代码轻量无依赖，充分利用浏览器原生 API。让我们深入解析： 架构分解 HTML 构建界面：包含视频预览、录制按钮和下载链接 CSS 样式设计：响应式布局与动感倒计时层 JavaScript 核心功能：屏幕捕捉、视频录制与下载逻辑 现在让我们深入代码实现。 HTML 结构 创建 index.html 文件，编写基础界面代码（有经验者可自定义调整）： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script src="script.js" defer></script> <title>在线屏幕录制</title> </head> <body> <div class="countdown" id="countdown"></div> <div class="screen-recorder"> <h1>开启屏幕录制</h1> <video controls preload="none" id="video"></video> <nav> <button type="button" class="btn" id="btn" aria-label="开始录制">录制</button> <a href="#" class="btn" id="link" aria-label="下载录制视频" download="recording.webm">下载视频</a> </nav> </div> </body> </html>video 元素展示录制内容，button 和 a 分别控制录制与下载。 CSS 样式 创建 style.css 美化界面（CSS 新手可参考 W3School 教程）： 关键样式说明： 全局重置：统一边距与盒模型 居中布局：使用网格布局实现垂直水平居中 倒计时层：全屏半透明遮罩与大号数字显示 响应式视频：自适应屏幕尺寸 按钮设计：统一风格与悬停效果 移动适配：媒体查询优化小屏体验 * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100vw; min-height: 100vh; display: grid; place-items: center; background-color: #f4f4f4; } .countdown { visibility: hidden; color: green; font-size: 10rem; font-weight: 900; background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; } .screen-recorder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; width: 90%; max-width: 1000px; padding: 2rem; background-color: #fff; color: #202020; border-radius: 10px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } .screen-recorder video { width: 100%; max-width: 782px; aspect-ratio: 16 / 9; max-height: 440px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1), -2px -2px 5px rgba(0, 0, 0, 0.1); border-radius: 10px; display: none; } h1 { text-transform: capitalize; font-size: 3rem; font-weight: bold; color: #202020; } .btn { background-color: #428bca; color: #fff; font-weight: 900; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; text-transform: capitalize; border: 1px solid #428bca; transition: background-color 0.3s ease, color 0.3s ease; } .btn:hover, .btn:focus { background-color: #357ec7; outline: 2px solid #357ec7; outline-offset: 2px; } a { text-decoration: none; margin-inline-start: 20px; display: none; } @media (max-width: 768px) { .screen-recorder video { width: 100%; height: auto; } h1 { font-size: 2.5rem; } .btn { padding: 0.5rem 1rem; font-size: 1rem; } .countdown { font-size: 6rem; } }JavaScript 功能 创建 script.js 实现核心逻辑： 隐藏内容，请前往内页查看详情 功能解析 事件驱动：按钮点击触发录制流程 媒体捕获：使用 getDisplayMedia 获取屏幕流，getUserMedia 获取音频 倒计时机制：Promise 实现 3 秒倒计时 录制控制：MediaRecorder API 处理视频流 下载生成：Blob 对象转换下载链接 常见问题解答 Q: 能否录制系统音频？ A: 受浏览器安全策略限制，系统音频录制可能存在限制，建议使用麦克风输入。 Q: 无法录屏的解决办法？ A: 确保浏览器支持 getDisplayMedia API，最新版 Chrome/Firefox 均可。 Q: 如何提升音质？ A: 代码已启用回声消除与降噪，建议外接优质麦克风。 Q: 支持暂停录制吗？ A: 当前版本未实现，可停止后重新开始。 优劣分析 优势局限无依赖轻量级仅支持现代浏览器简单易实现无高级编辑功能音视频同步录制音频设备兼容性问题Webm 格式下载需转换格式兼容播放响应式设计无实时预览功能通过本文，您已掌握构建基础屏幕录像工具的全流程。现在即可动手实践，打造专属的录屏解决方案！ 演示站：http://web.bri6.cn/tool/screen-record/ 图片
-
JavaScript 意外的副作用：修改共享变量 由于闭包可以访问外部函数的变量，如果不小心修改了这些变量，可能会导致意想不到的副作用。 function outer() { let counter = 0; return { increment: function() { counter++; }, getCount: function() { return counter; } }; } const myCounter = outer(); myCounter.increment(); myCounter.increment(); console.log(myCounter.getCount()); // 输出 2在这个例子中, 虽然我们希望 counter 变量是 outer 函数的私有变量, 但是通过闭包, 我们仍然可以在外部修改它. 解决方法: 最小化共享： 尽量减少闭包对外部变量的修改，优先使用局部变量。 使用不可变数据： 如果外部变量是对象或数组，尽量使用不可变数据结构，避免意外修改。 更明确的接口: 如果确实需要修改, 那么就通过定义明确的接口来修改。 图片
-
JavaScript 循环中的闭包陷阱：“意料之外” 的共享 闭包 (Closure) 无疑是 JavaScript 中最强大、最迷人的特性之一。它赋予了函数访问其定义时所在词法环境的能力，即使该函数在其定义的作用域之外执行。凭借闭包，我们可以实现数据封装、模块化、柯里化等高级编程技巧。 然而，硬币的另一面是，闭包也常常被视为 JavaScript 中最容易误解、最容易出错的特性之一。稍有不慎，就会掉入闭包的“陷阱”，导致内存泄漏、意外的变量共享等问题。 图片 在循环中使用闭包时，很容易出现意外的变量共享问题。 图片 在这个例子中，我们期望 setTimeout 的回调函数（闭包）分别输出 0, 1, 2, 3, 4。但实际输出的却是 5 次 5。这是因为 setTimeout 是异步执行的，当回调函数执行时，循环已经结束，i 的值已经变成了 5。而且，由于使用了 var 声明 i，所有的回调函数共享的是同一个 i 变量。 解决方法： 使用 let 声明循环变量：let 具有块级作用域，每次循环都会创建一个新的 i 变量，避免了变量共享。 图片 使用立即执行函数 (IIFE)：创建一个立即执行函数，将循环变量 i 作为参数传递进去，形成一个闭包，每次循环都会创建一个新的作用域。 图片 使用bind方法：使用 bind 方法将循环变量 i 绑定到回调函数上。 图片
-
JavaScript 内存泄漏：“永不消逝” 的变量 闭包最常见的陷阱就是内存泄漏。当一个闭包引用了外部函数的变量，而这个闭包又被长期持有（例如，作为事件处理程序或定时器回调），那么外部函数的变量就无法被垃圾回收，导致内存泄漏。 function createHandler() { let largeObject = new Array(1000000).fill("data"); // 创建一个大对象 return function() { console.log("Handler clicked"); // 没有直接使用 largeObject, 但由于闭包的存在, largeObject 无法被回收 }; } document.getElementById("myButton").addEventListener("click", createHandler());在这个例子中，createHandler 函数返回一个事件处理函数（闭包）。这个闭包引用了 createHandler 函数的 largeObject 变量。即使我们没有在事件处理函数中直接使用 largeObject，但由于闭包的存在，largeObject 无法被垃圾回收，导致内存泄漏。 解决方法： 解除引用：在不需要闭包时，手动解除对闭包的引用，例如： let handler = createHandler(); document.getElementById("myButton").addEventListener("click", handler); // ... 当不再需要事件处理程序时 ... document.getElementById("myButton").removeEventListener("click", handler); handler = null; // 解除对闭包的引用避免不必要的闭包：如果不需要访问外部函数的变量，就不要创建闭包。 将变量设置为null: 在闭包中, 将不再需要的外部变量手动设置为null。 图片
-
16 个 JavaScript 简写神技，代码效率提升 60%！ JavaScript 是一门强大且灵活的语言，拥有丰富的特性和语法糖。分享下 16 个最常用的 JavaScript 的简写技巧，掌握它们可以让我们编写出更简洁、更优雅的代码，并显著提升开发效率（增加摸鱼时间）。 图片 1. 三元运算符简化条件判断 // 传统写法 let result; if (someCondition) { result = 'yes'; } else { result = 'no'; } // 简写方式 const result = someCondition ? 'yes' : 'no';2. 空值合并运算符 // 传统写法 const name = user.name !== null && user.name !== undefined ? user.name : 'default'; // 简写方式 const name = user.name ?? 'default';3. 可选链操作符 // 传统写法 const street = user && user.address && user.address.street; // 简写方式 const street = user?.address?.street;4. 数组去重 // 传统写法 function unique(arr) { return arr.filter((item, index) => arr.indexOf(item) === index); } // 简写方式 const unique = arr => [...new Set(arr)];5. 快速取整 // 传统写法 const floor = Math.floor(4.9); // 简写方式 const floor = ~~4.9;6. 合并对象 // 传统写法 const merged = Object.assign({}, obj1, obj2); // 简写方式 const merged = {...obj1, ...obj2};7. 短路求值 // 传统写法 if (condition) { doSomething(); } // 简写方式 condition && doSomething();8. 默认参数值 // 传统写法 function greet(name) { name = name || 'Guest'; console.log(`Hello ${name}`); } // 简写方式 const greet = (name = 'Guest') => console.log(`Hello ${name}`);9. 解构赋值 图片 10. 字符串转数字 图片 11. 多重条件判断 图片 12. 快速幂运算 图片 13. 对象属性简写 图片 14. 数组映射 图片 15. 交换变量值 图片 16. 动态对象属性 // 传统写法 const obj = {}; obj[dynamic + 'name'] = value; // 简写方式 const obj = { [`${dynamic}name`]: value };欢迎补充。
-
掌握这 8 个 JavaScript 的 Promise 并发控制技巧，性能大幅提升 Promise 已经成为 JavaScript 里处理异步操作的标准方式。然而，当我们需要同时处理多个异步任务时，如何有效地控制 Promise 的并发，就成为了一个影响性能和用户体验的关键问题。 假设，你需要同时请求 100 个接口来获取数据。如果一股脑地发起所有请求，可能会导致以下问题： 浏览器并发限制：浏览器对同一域名的并发请求数量有限制（通常是 6-8 个）。过多的请求会被阻塞，导致页面加载缓慢 服务器压力过大：大量并发请求可能会给服务器带来巨大的压力，导致响应变慢甚至崩溃 资源竞争：多个异步任务同时访问共享资源（例如数据库连接、文件等），可能会导致资源竞争和死锁 用户体验差：页面长时间处于加载状态，用户体验极差 因此，我们需要对 Promise 的并发进行控制，在保证任务执行效率的同时，避免对系统资源造成过大的压力。 Promise.all：并行执行，统一返回 Promise.all 接收一个 Promise 数组作为参数，并行执行所有 Promise，并在所有 Promise 都 fulfilled 后，返回一个包含所有结果的数组。 const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(results => { console.log(results); // 输出：[1, 2, 3] });适用场景： 多个异步任务之间没有依赖关系，可以并行执行。 注意： 如果其中任何一个 Promise 被 rejected，Promise.all 会立即 rejected，并且只返回第一个 rejected 的原因。 Promise.allSettled：并行执行，返回所有状态 Promise.allSettled 与 Promise.all 类似，也是并行执行所有 Promise，但它会等待所有 Promise 都 settled（fulfilled 或 rejected），并返回一个包含所有 Promise 状态和结果（或原因）的数组。 const promise1 = Promise.resolve(1); const promise2 = Promise.reject("Error"); const promise3 = Promise.resolve(3); Promise.allSettled([promise1, promise2, promise3]) .then(results => { console.log(results); /* 输出： [ { status: 'fulfilled', value: 1 }, { status: 'rejected', reason: 'Error' }, { status: 'fulfilled', value: 3 } ] */ });适用场景： 需要获取所有 Promise 的执行结果，无论它们是 fulfilled 还是 rejected。 Promise.race：并行执行，谁快用谁 Promise.race 接收一个 Promise 数组作为参数，并行执行所有 Promise，只要其中任何一个 Promise settled（fulfilled 或 rejected），Promise.race 就会返回该 Promise 的结果（或原因）。 图片 适用场景： 只需要获取最快完成的 Promise 的结果，例如设置请求超时。 Promise.any (ES2021)：并行执行，返回第一个 fulfilled Promise.any 接收一个 Promise 数组作为参数，并行执行所有 Promise，只要其中任何一个 Promise fulfilled，Promise.any 就会返回该 Promise 的结果。如果所有 Promise 都 rejected，则返回一个 AggregateError。 图片 适用场景： 需要获取第一个成功的 Promise 的结果。 自定义并发控制函数：限制最大并发数 Promise.all 等方法虽然可以并行执行 Promise，但无法控制并发数量。我们可以自己实现一个函数来限制最大并发数。 图片 使用示例： 图片 原理： tasks: 一个包含任务函数的数组，每个任务函数返回一个 Promise。 limit: 最大并发数。 results: 存储所有任务的结果。 running: 存储当前正在执行的任务（Promise）。 current: 指向下一个要执行的任务。 while 循环：只要还有任务未执行或有任务正在执行，就继续循环。 if 条件：如果当前正在执行的任务数量小于 limit 且还有任务未执行，则取出下一个任务执行，并将其添加到 running 数组中。 task.then()：监听任务完成，将结果添加到 results 数组，并将任务从 running 数组中移除。 await Promise.race(running)：如果当前正在执行的任务数量已达到 limit，则等待任意一个任务完成。 Promise.all(results): 等待所有任务执行, 并返回结果。 使用第三方库：p-limit、async-pool 等 有一些成熟的第三方库可以更方便地实现 Promise 并发控制，例如： p-limit： 一个轻量级的 Promise 并发控制库。 图片 async-pool： 一个支持多种并发策略的 Promise 并发控制库。 使用 Generator 函数和 yield 关键字 Generator 函数可以暂停和恢复执行，结合 yield 关键字，可以实现更细粒度的并发控制。 async function* taskGenerator(tasks) { for (const task of tasks) { yield task(); } } async function runTasks(tasks, limit) { let pool = []; let results = []; for await (let result of taskGenerator(tasks)) { pool.push(result); results.push(result); if (pool.length >= limit) { await Promise.race(pool); pool = pool.filter(p => p.status != 'fulfilled' && p.status != 'rejected') // 手动维护 } } return Promise.all(results) }使用消息队列 对于非常大量的异步任务, 且允许一定的延迟, 可以使用消息队列(例如 RabbitMQ, Kafka 等), 将任务放入队列, 然后由多个消费者并行处理. 欢迎补充。
-
CSS 计算属性 介绍 CSS 计算属性，特别是 calc() 函数，是现代前端开发中非常强大且灵活的工具。它允许开发者在声明 CSS 属性值时进行动态计算，从而实现更加响应式和适应性强的设计。 calc() 函数支持基本的数学运算符：加法（+）、减法（-）、乘法（*）以及除法（/），并且可以混合使用不同类型的单位，如像素（px）、百分比（%）、视口单位（vw, vh）等。 基本概念与语法 calc() 的基本语法如下： property: calc(expression);这里，expression 是一个由数值、单位和运算符组成的表达式。例如，你可以这样设置一个元素的宽度，使其等于父容器宽度的 50%，然后减去 20 像素： .container { width: calc(50% - 20px); }使用场景 响应式布局：通过结合相对单位（如 % 或 vw/vh）和绝对单位（如 px），calc() 可以帮助你创建能够根据屏幕尺寸自动调整大小的布局。 居中对齐：利用 calc() 进行简单的数学运算，轻松实现水平或垂直居中。 自适应间距：为元素间的间距提供基于视窗大小或其他变量的动态调整。 字体大小：结合视口单位 (vw) 和固定单位 (px)，使文本大小随屏幕变化而适当缩放，提升可读性。 注意事项 空格要求：在 calc() 中，运算符前后必须有空格，否则会导致解析错误。例如 width: calc(100% -8px); 是无效的，正确的写法应该是 width: calc(100% - 8px);。 嵌套限制：虽然 calc() 支持嵌套使用，但应当避免过于复杂的嵌套，因为这可能导致浏览器兼容性问题或解析错误。尽量保持表达式的简洁。 不支持高级数学运算：calc() 不支持更高级的数学函数，如幂次方、平方根等。对于这些需求，可能需要借助 JavaScript 或其他方法来实现。 实际案例 假设我们有一个包含多个项目的网格布局，每个项目之间需要一定的间隔。我们可以使用 calc() 来确保即使在不同屏幕尺寸下，项目之间的间隔也保持一致： .grid-item { width: calc((100% / 3) - 20px); /* 三列布局，每列间留有20px间距 */ margin: 10px; }在这个例子中，grid-item 的宽度被设定为总宽度的三分之一减去固定的边距，从而保证了无论屏幕大小如何变化，项目之间的空间都保持一致。 其他相关函数 除了 calc() 之外，CSS 还提供了其他几个用于计算属性值的函数，比如 min(), max(), 以及 clamp()。这些函数各自具有独特的优势，适用于特定的场景： min() 和 max()：分别返回一组值中的最小值和最大值，有助于在多种条件之间选择最合适的尺寸。 clamp()：定义一个范围，并在该范围内取值，非常适合于创建既响应用户偏好又符合设计意图的布局。 总结 calc() 函数及其相关的计算属性极大地增强了 CSS 的表现力，使得网页设计变得更加灵活多变。 掌握这些技术可以帮助你解决许多常见的布局挑战，同时创造出更加美观和用户体验友好的界面。 随着浏览器对这些功能的支持日益增强，现在正是开始探索并应用它们的最佳时机。 如果你正在寻找一种方法来优化你的网站布局或解决特定的设计难题，那么深入研究 calc() 及其相关函数将是非常值得的投资。 图片
