[{"data":1,"prerenderedAt":16490},["ShallowReactive",2],{"all-articles-for-categories":3,"category-count-vue":110,"category-count-frontend":128,"category-count-css":134,"category-count-javascript":116,"category-count-music":116,"category-count-fullstack":16489,"category-count-notes":16489},[4,339,801,1677,2035,4557,5893,7206,8143,11171,11776,12029,13290,16118],{"id":5,"title":6,"body":7,"category":323,"date":324,"description":325,"draft":326,"extension":327,"meta":328,"navigation":329,"path":330,"seo":331,"stem":332,"tags":333,"__hash__":338},"blog\u002Fblog\u002Faudio-visualizer.md","Web Audio 音乐可视化",{"type":8,"value":9,"toc":314},"minimark",[10,14,36,40,62,67,76,86,99,144,159,163,172,221,224,227,231,254,257,269,272,275,288,298,310],[11,12,6],"h1",{"id":13},"web-audio-音乐可视化",[15,16,17,18,22,23,27,28,31,32,35],"p",{},"浏览器里的音乐播放器不只是 ",[19,20,21],"code",{},"\u003Caudio>"," 控件。通过 ",[24,25,26],"strong",{},"Web Audio API"," 把音频流接入 ",[19,29,30],{},"AnalyserNode","，再用 ",[24,33,34],{},"Canvas"," 读取频谱数据，就能做出随节拍律动的可视化。下方 demo 支持四种频谱样式、LRC 歌词滚动与歌单切换。",[37,38,39],"h2",{"id":39},"核心链路",[15,41,42,43,46,47,49,50,53,54,57,58,61],{},"整个 demo 可以拆成三条并行管线：",[24,44,45],{},"音频图","负责把 ",[19,48,21],{}," 接入 Web Audio；",[24,51,52],{},"Canvas 动画","每帧读取分析器数据并绘制；",[24,55,56],{},"歌词","根据 ",[19,59,60],{},"currentTime"," 滚动高亮。",[63,64,66],"h3",{"id":65},"_1-音频图从元素到-analysernode","1. 音频图：从元素到 AnalyserNode",[15,68,69,71,72,75],{},[19,70,21],{}," 本身只负责解码和播放。第一次点击播放时，才创建 ",[19,73,74],{},"AudioContext"," 并把元素挂到音频图上：",[77,78,83],"pre",{"className":79,"code":81,"language":82},[80],"language-text","\u003Caudio> → MediaElementSource → AnalyserNode → destination（扬声器）\n ↓\n 每帧读取频谱 \u002F 波形数据\n","text",[19,84,81],{"__ignoreMap":85},"",[15,87,88,90,91,94,95,98],{},[19,89,30],{}," 是可视化的数据来源。",[19,92,93],{},"fftSize"," 设为 256（128 个频点），",[19,96,97],{},"smoothingTimeConstant"," 控制相邻帧的平滑程度——数值越大，柱状跳动越「黏」，越小则越灵敏。",[77,100,104],{"className":101,"code":102,"language":103,"meta":85,"style":85},"language-javascript shiki shiki-themes github-light github-dark","audioCtx = new AudioContext()\nsource = audioCtx.createMediaElementSource(audio)\nanalyser = audioCtx.createAnalyser()\nanalyser.fftSize = 256\nsource.connect(analyser)\nanalyser.connect(audioCtx.destination)\n","javascript",[19,105,106,114,120,126,132,138],{"__ignoreMap":85},[107,108,111],"span",{"class":109,"line":110},"line",1,[107,112,113],{},"audioCtx = new AudioContext()\n",[107,115,117],{"class":109,"line":116},2,[107,118,119],{},"source = audioCtx.createMediaElementSource(audio)\n",[107,121,123],{"class":109,"line":122},3,[107,124,125],{},"analyser = audioCtx.createAnalyser()\n",[107,127,129],{"class":109,"line":128},4,[107,130,131],{},"analyser.fftSize = 256\n",[107,133,135],{"class":109,"line":134},5,[107,136,137],{},"source.connect(analyser)\n",[107,139,141],{"class":109,"line":140},6,[107,142,143],{},"analyser.connect(audioCtx.destination)\n",[15,145,146,147,150,151,154,155,158],{},"浏览器要求 ",[24,148,149],{},"用户手势"," 后才能 ",[19,152,153],{},"resume()"," 音频上下文，所以 demo 必须点播放才能启动；暂停时取消 ",[19,156,157],{},"requestAnimationFrame","，Canvas 回到 idle 态。",[63,160,162],{"id":161},"_2-canvas-绘制同一数据源四种画法","2. Canvas 绘制：同一数据源，四种画法",[15,164,165,166,168,169,171],{},"绘制循环在 ",[19,167,157],{}," 里跑。根据当前模式，从 ",[19,170,30],{}," 取不同数据：",[173,174,175,191],"table",{},[176,177,178],"thead",{},[179,180,181,185,188],"tr",{},[182,183,184],"th",{},"模式",[182,186,187],{},"读取方法",[182,189,190],{},"绘制思路",[192,193,194,208],"tbody",{},[179,195,196,200,205],{},[197,198,199],"td",{},"圆形 \u002F 柱状 \u002F 粒子",[197,201,202],{},[19,203,204],{},"getByteFrequencyData",[197,206,207],{},"128 个频点映射为半径、柱高或粒子位移",[179,209,210,213,218],{},[197,211,212],{},"波形",[197,214,215],{},[19,216,217],{},"getByteTimeDomainData",[197,219,220],{},"时域采样连成曲线，并做帧间平滑",[15,222,223],{},"频谱类模式用频率能量驱动视觉；波形模式看的是振幅随时间的变化。切歌或切模式时会清空帧间缓存，避免上一首的能量「残留」。",[15,225,226],{},"每首歌还配了一套主题色（主色、辅色、光晕），切歌时同步更新 Canvas 渐变和 UI 变量。",[63,228,230],{"id":229},"_3-歌词同步","3. 歌词同步",[15,232,233,234,237,238,241,242,245,246,249,250,253],{},"LRC 文本先解析成 ",[19,235,236],{},"{ time, text }[]","，播放过程中根据 ",[19,239,240],{},"audio.currentTime"," 二分查找当前行，用 ",[19,243,244],{},"transform: translateY(...)"," 把高亮行滚到视口中央。",[19,247,248],{},"timeupdate"," 事件触发频繁，滚动逻辑做了 500ms 节流；点击某行歌词则 ",[19,251,252],{},"seek"," 到对应时间。",[37,255,256],{"id":256},"在线体验",[15,258,259,260,262,263,268],{},"下方为完整交互 demo（需点击播放后启动 ",[19,261,74],{},"）。也可 ",[264,265,267],"a",{"href":266},"\u002Fdemos\u002Faudio-viz","全屏预览"," 打开独立页面。",[270,271],"audio-visualizer-demo",{},[37,273,274],{"id":274},"小结",[15,276,277,278,287],{},"Web Audio 可视化并不复杂：",[24,279,280,281,283,284,286],{},"把 ",[19,282,21],{}," 接入 ",[19,285,30],{},"，再在 Canvas 里每帧读数据、画图形","。难点在于体验细节——播放前后的 idle 动画、切歌时的状态重置、波形与频谱不同的平滑策略，以及歌词与进度的双向联动。",[15,289,290,291,294,295,297],{},"四种频谱样式共用同一套分析器，只是映射方式不同；这也是前端可视化里常见的模式：",[24,292,293],{},"数据层稳定，表现层可插拔","。如果你要做自己的播放器可视化，可以从一个 ",[19,296,30],{}," + 一种绘制函数开始，再逐步加模式和主题。",[15,299,300,301,304,305,309],{},"想走另一条 Web Audio 路线——用振荡器",[24,302,303],{},"合成","声音而非分析播放——可以看 ",[264,306,308],{"href":307},"\u002Fblog\u002Fweb-piano","网页钢琴与 Web Audio 合成","。",[311,312,313],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":85,"searchDepth":122,"depth":122,"links":315},[316,321,322],{"id":39,"depth":116,"text":39,"children":317},[318,319,320],{"id":65,"depth":122,"text":66},{"id":161,"depth":122,"text":162},{"id":229,"depth":122,"text":230},{"id":256,"depth":116,"text":256},{"id":274,"depth":116,"text":274},"music","2026-05-18","用 Canvas 与 Web Audio API 实现圆形、柱状、波形、粒子四种频谱，并同步 LRC 歌词。",false,"md",{},true,"\u002Fblog\u002Faudio-visualizer",{"title":6,"description":325},"blog\u002Faudio-visualizer",[334,335,336,337],"web-audio","canvas","visualization","vue","ghCDv_tcwtPfmSAefPGprSYdKOWg6tvA3kUQQMnVylU",{"id":340,"title":341,"body":342,"category":103,"date":791,"description":792,"draft":326,"extension":327,"meta":793,"navigation":329,"path":794,"seo":795,"stem":796,"tags":797,"__hash__":800},"blog\u002Fblog\u002Fbig-int-add.md","大整数相加",{"type":8,"value":343,"toc":782},[344,346,373,380,383,415,419,429,539,554,558,568,651,666,669,675,678,728,732,739,754,757,759,780],[11,345,341],{"id":341},[15,347,348,349,352,353,356,357,360,361,364,365,368,369,372],{},"JavaScript 的 ",[19,350,351],{},"Number"," 基于 IEEE 754 双精度浮点，安全整数范围是 ",[19,354,355],{},"-(2^53 - 1)"," 到 ",[19,358,359],{},"2^53 - 1","（即 ",[19,362,363],{},"Number.MAX_SAFE_INTEGER","）。当两个「大正整数」字符串相加时，不能直接用 ",[19,366,367],{},"+"," 或 ",[19,370,371],{},"Number()"," 转换，否则会丢失精度。",[15,374,375,376,379],{},"这道题的核心思路是：",[24,377,378],{},"模拟小学竖式加法","——从低位到高位逐位相加，维护进位。",[37,381,382],{"id":382},"思路",[384,385,386,390,393,399,409,412],"ol",{},[387,388,389],"li",{},"将两个操作数转为字符串（或本来就是字符串）",[387,391,392],{},"从最后一位（个位）向前遍历",[387,394,395,396],{},"对应位数字相加，再加上进位 ",[19,397,398],{},"carry",[387,400,401,402,405,406],{},"当前位结果 = ",[19,403,404],{},"sum % 10","，新进位 = ",[19,407,408],{},"Math.floor(sum \u002F 10)",[387,410,411],{},"遍历结束后若仍有进位，需要补一位",[387,413,414],{},"将结果数组反转（或从高位拼接）得到最终字符串",[37,416,418],{"id":417},"实现一数组收集后反转","实现一：数组收集后反转",[15,420,421,422,425,426,309],{},"从字符串末尾双指针向前扫，结果先 ",[19,423,424],{},"push"," 到数组，最后 ",[19,427,428],{},"reverse().join(\"\")",[430,431,433],"code-block",{"lang":103,"title":432},"addBigIntegers",[77,434,436],{"className":101,"code":435,"language":103,"meta":85,"style":85},"function addBigIntegers(a, b) {\n const strA = String(a);\n const strB = String(b);\n let i = strA.length - 1;\n let j = strB.length - 1;\n let carry = 0;\n const result = [];\n\n while (i >= 0 || j >= 0 || carry > 0) {\n const digitA = i >= 0 ? Number(strA[i--]) : 0;\n const digitB = j >= 0 ? Number(strB[j--]) : 0;\n const sum = digitA + digitB + carry;\n result.push(sum % 10);\n carry = Math.floor(sum \u002F 10);\n }\n\n return result.reverse().join(\"\");\n}\n",[19,437,438,443,448,453,458,463,468,474,480,486,492,498,504,510,516,522,527,533],{"__ignoreMap":85},[107,439,440],{"class":109,"line":110},[107,441,442],{},"function addBigIntegers(a, b) {\n",[107,444,445],{"class":109,"line":116},[107,446,447],{}," const strA = String(a);\n",[107,449,450],{"class":109,"line":122},[107,451,452],{}," const strB = String(b);\n",[107,454,455],{"class":109,"line":128},[107,456,457],{}," let i = strA.length - 1;\n",[107,459,460],{"class":109,"line":134},[107,461,462],{}," let j = strB.length - 1;\n",[107,464,465],{"class":109,"line":140},[107,466,467],{}," let carry = 0;\n",[107,469,471],{"class":109,"line":470},7,[107,472,473],{}," const result = [];\n",[107,475,477],{"class":109,"line":476},8,[107,478,479],{"emptyLinePlaceholder":329},"\n",[107,481,483],{"class":109,"line":482},9,[107,484,485],{}," while (i >= 0 || j >= 0 || carry > 0) {\n",[107,487,489],{"class":109,"line":488},10,[107,490,491],{}," const digitA = i >= 0 ? Number(strA[i--]) : 0;\n",[107,493,495],{"class":109,"line":494},11,[107,496,497],{}," const digitB = j >= 0 ? Number(strB[j--]) : 0;\n",[107,499,501],{"class":109,"line":500},12,[107,502,503],{}," const sum = digitA + digitB + carry;\n",[107,505,507],{"class":109,"line":506},13,[107,508,509],{}," result.push(sum % 10);\n",[107,511,513],{"class":109,"line":512},14,[107,514,515],{}," carry = Math.floor(sum \u002F 10);\n",[107,517,519],{"class":109,"line":518},15,[107,520,521],{}," }\n",[107,523,525],{"class":109,"line":524},16,[107,526,479],{"emptyLinePlaceholder":329},[107,528,530],{"class":109,"line":529},17,[107,531,532],{}," return result.reverse().join(\"\");\n",[107,534,536],{"class":109,"line":535},18,[107,537,538],{},"}\n",[15,540,541,542,545,546,549,550,553],{},"注意 ",[19,543,544],{},"while"," 条件里的 ",[19,547,548],{},"carry > 0","：最高位相加后若产生进位（如 ",[19,551,552],{},"999 + 1","），循环需要多跑一轮。",[37,555,557],{"id":556},"实现二左对齐补零高位拼接","实现二：左对齐补零，高位拼接",[15,559,560,561,564,565,309],{},"另一种写法是先去掉前导零、用 ",[19,562,563],{},"padStart"," 对齐长度，再从右向左遍历，把每位结果",[24,566,567],{},"拼到字符串前面",[430,569,571],{"lang":103,"title":570},"addBigIntegers（对齐版）",[77,572,574],{"className":101,"code":573,"language":103,"meta":85,"style":85},"function addBigIntegers(a, b) {\n a = String(a).replace(\u002F^0+\u002F, \"\") || \"0\";\n b = String(b).replace(\u002F^0+\u002F, \"\") || \"0\";\n const lth = Math.max(a.length, b.length);\n a = a.padStart(lth, \"0\");\n b = b.padStart(lth, \"0\");\n let carry = 0;\n let result = \"\";\n for (let i = lth - 1; i >= 0; i--) {\n const sum = Number(a[i]) + Number(b[i]) + carry;\n carry = Math.floor(sum \u002F 10);\n result = String(sum % 10) + result;\n }\n if (carry > 0) result = String(carry) + result;\n return result;\n}\n",[19,575,576,580,585,590,595,600,605,609,614,619,624,628,633,637,642,647],{"__ignoreMap":85},[107,577,578],{"class":109,"line":110},[107,579,442],{},[107,581,582],{"class":109,"line":116},[107,583,584],{}," a = String(a).replace(\u002F^0+\u002F, \"\") || \"0\";\n",[107,586,587],{"class":109,"line":122},[107,588,589],{}," b = String(b).replace(\u002F^0+\u002F, \"\") || \"0\";\n",[107,591,592],{"class":109,"line":128},[107,593,594],{}," const lth = Math.max(a.length, b.length);\n",[107,596,597],{"class":109,"line":134},[107,598,599],{}," a = a.padStart(lth, \"0\");\n",[107,601,602],{"class":109,"line":140},[107,603,604],{}," b = b.padStart(lth, \"0\");\n",[107,606,607],{"class":109,"line":470},[107,608,467],{},[107,610,611],{"class":109,"line":476},[107,612,613],{}," let result = \"\";\n",[107,615,616],{"class":109,"line":482},[107,617,618],{}," for (let i = lth - 1; i >= 0; i--) {\n",[107,620,621],{"class":109,"line":488},[107,622,623],{}," const sum = Number(a[i]) + Number(b[i]) + carry;\n",[107,625,626],{"class":109,"line":494},[107,627,515],{},[107,629,630],{"class":109,"line":500},[107,631,632],{}," result = String(sum % 10) + result;\n",[107,634,635],{"class":109,"line":506},[107,636,521],{},[107,638,639],{"class":109,"line":512},[107,640,641],{}," if (carry > 0) result = String(carry) + result;\n",[107,643,644],{"class":109,"line":518},[107,645,646],{}," return result;\n",[107,648,649],{"class":109,"line":524},[107,650,538],{},[15,652,653,654,657,658,661,662,665],{},"相比实现一，这版额外处理了",[24,655,656],{},"前导零","（",[19,659,660],{},"\"0123\" + \"456\""," → ",[19,663,664],{},"\"579\"","），对小整数也适用。",[37,667,668],{"id":668},"测试用例",[77,670,673],{"className":671,"code":672,"language":82,"meta":85},[80],"addBigIntegers(\"999999999999999999999\", \"1\")\n\u002F\u002F → \"1000000000000000000000\"\n\naddBigIntegers(\"12345678901234567890\", \"98765432109876543210\")\n\u002F\u002F → \"111111111011111111100\"\n\naddBigIntegers(123, 456)\n\u002F\u002F → \"579\"\n\naddBigIntegers(\"0123\", \"456\")\n\u002F\u002F → \"579\"\n",[19,674,672],{"__ignoreMap":85},[37,676,677],{"id":677},"复杂度与边界",[173,679,680,690],{},[176,681,682],{},[179,683,684,687],{},[182,685,686],{},"项目",[182,688,689],{},"说明",[192,691,692,700,708,720],{},[179,693,694,697],{},[197,695,696],{},"时间复杂度",[197,698,699],{},"O(max(m, n))，m、n 为两数位数",[179,701,702,705],{},[197,703,704],{},"空间复杂度",[197,706,707],{},"O(max(m, n))，存放结果",[179,709,710,713],{},[197,711,712],{},"负数",[197,714,715,716,719],{},"本题通常只考大",[24,717,718],{},"正","整数；若需支持负数，要先处理符号与绝对值大小比较",[179,721,722,725],{},[197,723,724],{},"小数",[197,726,727],{},"需先对齐小数点，再分别处理整数与小数部分",[37,729,731],{"id":730},"延伸bigint","延伸：BigInt",[15,733,734,735,738],{},"现代环境可直接用 ",[19,736,737],{},"BigInt","：",[77,740,742],{"className":101,"code":741,"language":103,"meta":85,"style":85},"String(BigInt(\"999999999999999999999\") + BigInt(\"1\"))\n\u002F\u002F → \"1000000000000000000000\"\n",[19,743,744,749],{"__ignoreMap":85},[107,745,746],{"class":109,"line":110},[107,747,748],{},"String(BigInt(\"999999999999999999999\") + BigInt(\"1\"))\n",[107,750,751],{"class":109,"line":116},[107,752,753],{},"\u002F\u002F → \"1000000000000000000000\"\n",[15,755,756],{},"面试手写时仍建议掌握字符串模拟竖式加法——考察的是对进位、边界和字符串操作的理解，而非 API 记忆。",[37,758,274],{"id":274},[760,761,762,768,774,777],"ul",{},[387,763,764,765,767],{},"大整数相加不能依赖 ",[19,766,351],{},"，应逐位模拟竖式加法",[387,769,770,771,773],{},"双指针从末尾向前扫，或 ",[19,772,563],{}," 对齐后从右向左拼结果",[387,775,776],{},"循环条件要覆盖「最后一位仍有进位」的情况",[387,778,779],{},"对齐版实现还能统一处理前导零与小整数输入",[311,781,313],{},{"title":85,"searchDepth":122,"depth":122,"links":783},[784,785,786,787,788,789,790],{"id":382,"depth":116,"text":382},{"id":417,"depth":116,"text":418},{"id":556,"depth":116,"text":557},{"id":668,"depth":116,"text":668},{"id":677,"depth":116,"text":677},{"id":730,"depth":116,"text":731},{"id":274,"depth":116,"text":274},"2026-05-10","用字符串模拟竖式加法，处理超出 Number 精度的大正整数求和，常见前端面试手写题。",{},"\u002Fblog\u002Fbig-int-add",{"title":341,"description":792},"blog\u002Fbig-int-add",[798,799],"algorithm","interview","AzJ9a1SGNrgKuH7mn3OfWWWrm1n9SCy5pVODYzyS9W4",{"id":802,"title":803,"body":804,"category":1666,"date":1667,"description":1668,"draft":326,"extension":327,"meta":1669,"navigation":329,"path":1670,"seo":1671,"stem":1672,"tags":1673,"__hash__":1676},"blog\u002Fblog\u002Fbrowser-rendering-pipeline.md","浏览器是如何渲染页面的？",{"type":8,"value":805,"toc":1646},[806,809,825,832,839,845,849,976,979,992,1003,1007,1017,1032,1038,1041,1065,1069,1083,1087,1104,1127,1133,1238,1242,1249,1252,1279,1295,1299,1309,1313,1319,1381,1387,1401,1405,1411,1418,1421,1447,1453,1457,1474,1480,1489,1503,1507,1510,1514,1525,1529,1546,1550,1564,1570,1577,1581,1591,1593,1643],[11,807,803],{"id":808},"浏览器是如何渲染页面的",[15,810,811,812,815,816,819,820,824],{},"当网络进程把 HTML 文档下载完成后，渲染进程会收到字节流，并往 ",[24,813,814],{},"渲染主线程"," 的消息队列里塞入一个 ",[24,817,818],{},"渲染任务","。主线程在 ",[264,821,823],{"href":822},"\u002Fblog\u002Fjs-event-loop","事件循环"," 里取出该任务后，才开始「把文档变成屏幕上的像素」。",[15,826,827],{},[828,829],"img",{"alt":830,"src":831},"HTML 下载完成后渲染任务进入消息队列","\u002Fdemos\u002Fbrowser-rendering\u002Ftask-entry.svg",[15,833,834,835,838],{},"这不是一次性的函数调用，而是一条 ",[24,836,837],{},"流水线","：每个阶段有明确的输入和输出，上一阶段的产出是下一阶段的输入。可以把它想象成工厂里的装配线——材料从一端进去，成品从另一端出来。",[15,840,841],{},[828,842],{"alt":843,"src":844},"渲染流水线总览：主线程五段 + 合成三段","\u002Fdemos\u002Fbrowser-rendering\u002Fpipeline-overview.svg",[37,846,848],{"id":847},"总览八个阶段","总览：八个阶段",[173,850,851,867],{},[176,852,853],{},[179,854,855,858,861,864],{},[182,856,857],{},"阶段",[182,859,860],{},"执行者",[182,862,863],{},"输入",[182,865,866],{},"输出",[192,868,869,882,895,908,921,934,948,962],{},[179,870,871,874,876,879],{},[197,872,873],{},"HTML 解析",[197,875,814],{},[197,877,878],{},"HTML 字节流",[197,880,881],{},"DOM 树 + CSSOM 树",[179,883,884,887,889,892],{},[197,885,886],{},"样式计算",[197,888,814],{},[197,890,891],{},"DOM + CSSOM",[197,893,894],{},"带 Computed Style 的节点",[179,896,897,900,902,905],{},[197,898,899],{},"布局 Layout",[197,901,814],{},[197,903,904],{},"样式树",[197,906,907],{},"布局树（几何信息）",[179,909,910,913,915,918],{},[197,911,912],{},"分层 Layer",[197,914,814],{},[197,916,917],{},"布局树",[197,919,920],{},"图层树",[179,922,923,926,928,931],{},[197,924,925],{},"绘制 Paint",[197,927,814],{},[197,929,930],{},"图层",[197,932,933],{},"绘制指令集（display list）",[179,935,936,939,942,945],{},[197,937,938],{},"分块 Tiling",[197,940,941],{},"合成线程",[197,943,944],{},"绘制指令",[197,946,947],{},"图层小块",[179,949,950,953,956,959],{},[197,951,952],{},"光栅化 Raster",[197,954,955],{},"GPU 进程",[197,957,958],{},"块信息",[197,960,961],{},"位图（bitmap）",[179,963,964,967,970,973],{},[197,965,966],{},"画 Draw",[197,968,969],{},"合成线程 + GPU",[197,971,972],{},"位图",[197,974,975],{},"屏幕像素",[15,977,978],{},"记忆口诀：",[760,980,981,987],{},[387,982,983,986],{},[24,984,985],{},"主线程","：Parse → Style → Layout → Layer → Paint",[387,988,989,991],{},[24,990,969],{},"：Tiling → Raster → Draw",[15,993,994,995,997,998,1002],{},"主线程极其繁忙——",[264,996,823],{"href":822}," 里还要执行 JS、处理事件、跑计时器。渲染只是它众多职责之一；一旦某段 JS 长时间占用主线程，整条渲染流水线都会暂停（见 ",[264,999,1001],{"href":1000},"\u002Fblog\u002Freflow-repaint-transform","reflow、repaint 与 transform","）。",[37,1004,1006],{"id":1005},"第一步html-解析","第一步：HTML 解析",[15,1008,1009,1010,1013,1014,309],{},"解析 HTML 时，遇到 ",[24,1011,1012],{},"CSS 就解析 CSS","，遇到 ",[24,1015,1016],{},"JS 就执行 JS",[15,1018,1019,1020,1023,1024,1027,1028,1031],{},"为提高效率，浏览器在正式解析前还会启动 ",[24,1021,1022],{},"预解析（preload scanner）","，提前下载 HTML 里 ",[19,1025,1026],{},"\u003Clink>","、",[19,1029,1030],{},"\u003Cscript>"," 引用的外部资源，减少主线程空等。",[15,1033,1034],{},[828,1035],{"alt":1036,"src":1037},"解析 HTML 得到 DOM 树与 CSSOM 树","\u002Fdemos\u002Fbrowser-rendering\u002Fparse-dom-cssom.svg",[15,1039,1040],{},"解析完成后得到两棵树：",[760,1042,1043,1049],{},[387,1044,1045,1048],{},[24,1046,1047],{},"DOM 树","：文档结构，对应 HTML 标签的嵌套关系",[387,1050,1051,1054,1055,1027,1058,1061,1062,1064],{},[24,1052,1053],{},"CSSOM 树","：汇总 ",[24,1056,1057],{},"用户代理默认样式",[19,1059,1060],{},"\u003Cstyle>","、外链 CSS、行内 ",[19,1063,311],{}," 等全部 CSS 规则",[63,1066,1068],{"id":1067},"css-为什么不阻塞-html-解析","CSS 为什么不阻塞 HTML 解析？",[15,1070,1071,1072,1075,1076,1079,1080,309],{},"主线程扫到 ",[19,1073,1074],{},"\u003Clink rel=\"stylesheet\">"," 时，即使 CSS 文件还没下载完，",[24,1077,1078],{},"也不会停下来等","，会继续解析后面的 HTML。CSS 的下载与解析由预解析等机制并行处理，因此 ",[24,1081,1082],{},"CSS 默认不阻塞 DOM 树的构建",[63,1084,1086],{"id":1085},"js-为什么会阻塞-html-解析","JS 为什么会阻塞 HTML 解析？",[15,1088,1071,1089,1092,1093,1095,1096,1099,1100,1103],{},[24,1090,1091],{},"同步"," ",[19,1094,1030],{}," 时，会 ",[24,1097,1098],{},"暂停 HTML 解析","，先等 JS 下载并执行完。因为 JS 可能通过 ",[19,1101,1102],{},"document.write"," 等方式修改 DOM，必须保证 DOM 生成顺序与脚本执行顺序一致。",[15,1105,1106,1027,1109,1027,1112,1115,1116,1119,1120,1122,1123,1126],{},[19,1107,1108],{},"defer",[19,1110,1111],{},"async",[19,1113,1114],{},"type=\"module\""," 等会改变具体行为，但 ",[24,1117,1118],{},"「同步脚本阻塞解析」"," 是默认规则，也是 ",[19,1121,1030],{}," 放 ",[19,1124,1125],{},"\u003C\u002Fbody>"," 前、或把脚本移到底部的原因。",[15,1128,1129],{},[828,1130],{"alt":1131,"src":1132},"link 不阻塞解析，同步 script 会阻塞","\u002Fdemos\u002Fbrowser-rendering\u002Fcss-js-parse.svg",[430,1134,1137],{"lang":1135,"title":1136},"html","同步脚本阻塞 DOM 构建",[77,1138,1141],{"className":1139,"code":1140,"language":1135,"meta":85,"style":85},"language-html shiki shiki-themes github-light github-dark","\u003Cp id=\"before\">before\u003C\u002Fp>\n\u003Cscript>\n document.querySelector('#before').textContent = 'changed'\n\u003C\u002Fscript>\n\u003Cp id=\"after\">after\u003C\u002Fp>\n\u003C!-- 解析器在遇到 script 时必须先执行完再继续 -->\n",[19,1142,1143,1171,1180,1203,1212,1232],{"__ignoreMap":85},[107,1144,1145,1149,1152,1156,1159,1163,1166,1168],{"class":109,"line":110},[107,1146,1148],{"class":1147},"sVt8B","\u003C",[107,1150,15],{"class":1151},"s9eBZ",[107,1153,1155],{"class":1154},"sScJk"," id",[107,1157,1158],{"class":1147},"=",[107,1160,1162],{"class":1161},"sZZnC","\"before\"",[107,1164,1165],{"class":1147},">before\u003C\u002F",[107,1167,15],{"class":1151},[107,1169,1170],{"class":1147},">\n",[107,1172,1173,1175,1178],{"class":109,"line":116},[107,1174,1148],{"class":1147},[107,1176,1177],{"class":1151},"script",[107,1179,1170],{"class":1147},[107,1181,1182,1185,1188,1191,1194,1197,1200],{"class":109,"line":122},[107,1183,1184],{"class":1147}," document.",[107,1186,1187],{"class":1154},"querySelector",[107,1189,1190],{"class":1147},"(",[107,1192,1193],{"class":1161},"'#before'",[107,1195,1196],{"class":1147},").textContent ",[107,1198,1158],{"class":1199},"szBVR",[107,1201,1202],{"class":1161}," 'changed'\n",[107,1204,1205,1208,1210],{"class":109,"line":128},[107,1206,1207],{"class":1147},"\u003C\u002F",[107,1209,1177],{"class":1151},[107,1211,1170],{"class":1147},[107,1213,1214,1216,1218,1220,1222,1225,1228,1230],{"class":109,"line":134},[107,1215,1148],{"class":1147},[107,1217,15],{"class":1151},[107,1219,1155],{"class":1154},[107,1221,1158],{"class":1147},[107,1223,1224],{"class":1161},"\"after\"",[107,1226,1227],{"class":1147},">after\u003C\u002F",[107,1229,15],{"class":1151},[107,1231,1170],{"class":1147},[107,1233,1234],{"class":109,"line":140},[107,1235,1237],{"class":1236},"sJ8bj","\u003C!-- 解析器在遇到 script 时必须先执行完再继续 -->\n",[37,1239,1241],{"id":1240},"第二步样式计算","第二步：样式计算",[15,1243,1244,1245,1248],{},"主线程遍历 DOM，结合 CSSOM，为每个节点算出最终用于渲染的样式，即 ",[24,1246,1247],{},"Computed Style","（计算样式）。",[15,1250,1251],{},"此阶段会把许多值「算实」：",[760,1253,1254,1262,1271],{},[387,1255,1256,661,1259],{},[19,1257,1258],{},"red",[19,1260,1261],{},"rgb(255, 0, 0)",[387,1263,1264,661,1267,1270],{},[19,1265,1266],{},"em",[19,1268,1269],{},"px","（在父级字号已知时）",[387,1272,1273,1274,1278],{},"经过 ",[264,1275,1277],{"href":1276},"\u002Fblog\u002Fcss-property-calculation","层叠、继承、默认值"," 得到每个属性的最终声明",[15,1280,1281,1282,1285,1286,1290,1291,1294],{},"但 ",[24,1283,1284],{},"百分比宽高"," 等仍可能待定——它们依赖 ",[264,1287,1289],{"href":1288},"\u002Fblog\u002Fcss-containing-block","包含块","，要在 ",[24,1292,1293],{},"布局"," 阶段结合几何上下文才能定稿。",[37,1296,1298],{"id":1297},"第三步布局layout","第三步：布局（Layout）",[15,1300,1301,1302,1305,1306,309],{},"布局阶段遍历带样式的节点，计算 ",[24,1303,1304],{},"几何信息","：宽高、位置（相对包含块）、行盒高度等，产出 ",[24,1307,1308],{},"布局树（Layout Tree）",[63,1310,1312],{"id":1311},"布局树-dom-树","布局树 ≠ DOM 树",[15,1314,1315,1316,738],{},"两棵树 ",[24,1317,1318],{},"常常不是一一对应",[173,1320,1321,1332],{},[176,1322,1323],{},[179,1324,1325,1328,1330],{},[182,1326,1327],{},"情况",[182,1329,1047],{},[182,1331,917],{},[192,1333,1334,1350,1370],{},[179,1335,1336,1341,1344],{},[197,1337,1338],{},[19,1339,1340],{},"display: none",[197,1342,1343],{},"有节点",[197,1345,1346,1347,917],{},"无几何信息，",[24,1348,1349],{},"不进",[179,1351,1352,1361,1364],{},[197,1353,1354,1357,1358],{},[19,1355,1356],{},"::before"," \u002F ",[19,1359,1360],{},"::after",[197,1362,1363],{},"无对应节点",[197,1365,1366,1367,917],{},"有几何信息，",[24,1368,1369],{},"会进",[179,1371,1372,1375,1378],{},[197,1373,1374],{},"匿名行盒 \u002F 块盒",[197,1376,1377],{},"无独立节点",[197,1379,1380],{},"布局算法自动生成",[15,1382,1383],{},[828,1384],{"alt":1385,"src":1386},"DOM 树与布局树并不总是一一对应","\u002Fdemos\u002Fbrowser-rendering\u002Fdom-vs-layout.svg",[15,1388,1389,1390,1393,1394,1397,1398,309],{},"布局完成后，每个可见元素在屏幕上「占哪块地方」就确定了。改宽高、边距、",[19,1391,1392],{},"display"," 等会触发 ",[24,1395,1396],{},"reflow（回流）","，需要重新跑 Layout 及之后阶段——详见 ",[264,1399,1400],{"href":1000},"reflow 与 repaint",[37,1402,1404],{"id":1403},"第四步分层layer","第四步：分层（Layer）",[15,1406,1407,1408,309],{},"主线程按策略把布局树 ",[24,1409,1410],{},"分成多个图层（Layer）",[15,1412,1413,1414,1417],{},"分层是性能优化：将来只改某一层的样式或内容时，可以 ",[24,1415,1416],{},"只更新该层"," 的后续步骤，而不必重算整页。",[15,1419,1420],{},"常见影响因素：",[760,1422,1423,1426,1433,1441],{},[387,1424,1425],{},"滚动容器、滚动条",[387,1427,1428,1429,1432],{},"堆叠上下文（",[19,1430,1431],{},"z-index"," 等）",[387,1434,1435,1027,1438],{},[19,1436,1437],{},"transform",[19,1439,1440],{},"opacity",[387,1442,1443,1446],{},[19,1444,1445],{},"will-change"," 提示浏览器提前分层",[15,1448,1449,1450,309],{},"分层策略因浏览器而异，属于实现细节；开发上只需知道：",[24,1451,1452],{},"分层是为了增量更新更快",[37,1454,1456],{"id":1455},"第五步绘制paint","第五步：绘制（Paint）",[15,1458,1459,1460,1463,1464,1466,1467,1027,1470,1473],{},"主线程为 ",[24,1461,1462],{},"每一层"," 单独生成 ",[24,1465,933],{},"，描述这一层该怎么画——类似 Canvas 的 ",[19,1468,1469],{},"fillRect",[19,1471,1472],{},"drawText"," 等调用序列。",[15,1475,1476],{},[828,1477],{"alt":1478,"src":1479},"图层与绘制指令","\u002Fdemos\u002Fbrowser-rendering\u002Flayers-paint.svg",[15,1481,1482,1485,1486,309],{},[24,1483,1484],{},"渲染主线程的工作到这里为止。"," 之后把各层的绘制信息交给 ",[24,1487,1488],{},"合成线程（Compositor Thread）",[15,1490,1491,1492,1027,1495,1498,1499,1502],{},"改 ",[19,1493,1494],{},"color",[19,1496,1497],{},"background"," 等可见但不改布局的样式，可能只需 ",[24,1500,1501],{},"repaint","（重算绘制及之后），不必完整 reflow。",[37,1504,1506],{"id":1505},"第六八步分块光栅化上屏","第六～八步：分块、光栅化、上屏",[15,1508,1509],{},"合成线程接手后：",[63,1511,1513],{"id":1512},"_1-分块tiling","1. 分块（Tiling）",[15,1515,1516,1517,1520,1521,1524],{},"把每一层划成更小的 ",[24,1518,1519],{},"图块（tile）","，交给 ",[24,1522,1523],{},"线程池"," 并行处理，避免单次任务过大。",[63,1526,1528],{"id":1527},"_2-光栅化raster","2. 光栅化（Raster）",[15,1530,1531,1532,1534,1535,1537,1538,1541,1542,1545],{},"把块信息交给 ",[24,1533,955],{},"，由 GPU 以极高速度转成 ",[24,1536,961],{},"——每个块是一小块像素矩阵。靠近 ",[24,1539,1540],{},"视口"," 的块会 ",[24,1543,1544],{},"优先"," 光栅化，所以你滚动时远处内容可能稍晚才清晰。",[63,1547,1549],{"id":1548},"_3-画draw","3. 画（Draw）",[15,1551,1552,1553,1556,1557,1559,1560,1563],{},"合成线程为每块位图生成 ",[24,1554,1555],{},"指引（quad）","：在屏幕上的位置、旋转、缩放等。",[19,1558,1437],{}," 的变形主要发生在此阶段，",[24,1561,1562],{},"不经过主线程的 Layout\u002FPaint","，因此动画往往更顺滑。",[15,1565,1566],{},[828,1567],{"alt":1568,"src":1569},"分块、光栅化、quad、GPU 上屏","\u002Fdemos\u002Fbrowser-rendering\u002Fcompositor-gpu.svg",[15,1571,1572,1573,1576],{},"最后 GPU 进程通过系统调用把结果交给显卡。",[24,1574,1575],{},"渲染进程跑在沙盒里","，不能直接碰硬件，崩溃也不会拖垮整个系统。",[37,1578,1580],{"id":1579},"常见面试答法精简版","常见面试答法（精简版）",[1582,1583,1584],"blockquote",{},[15,1585,1586,1587,1590],{},"网络进程收到 HTML 后，产生渲染任务进入渲染主线程的消息队列；事件循环取出任务，开启流水线：",[24,1588,1589],{},"解析 → 样式 → 布局 → 分层 → 绘制 → 分块 → 光栅化 → 画","。主线程负责前五步，合成线程和 GPU 负责后三步。CSS 不阻塞 DOM 构建，同步 JS 会阻塞解析。改动样式可能触发 reflow\u002Frepaint，是流水线运行中的局部重跑。",[37,1592,274],{"id":274},[760,1594,1595,1602,1607,1616,1631],{},[387,1596,1597,1598,1601],{},"渲染由 ",[24,1599,1600],{},"事件循环调度","，是主线程与合成线程协作的流水线。",[387,1603,1604,309],{},[24,1605,1606],{},"DOM + CSSOM → 样式 → 布局 → 图层 → 绘制指令 → 位图 → 屏幕",[387,1608,1609,1612,1613,309],{},[24,1610,1611],{},"同步 JS 阻塞解析","；",[24,1614,1615],{},"CSS 默认不阻塞 DOM",[387,1617,1618,1621,1622,1621,1625,1612,1628,1630],{},[24,1619,1620],{},"Layout 定几何","，",[24,1623,1624],{},"Paint 出指令",[24,1626,1627],{},"Compositor + GPU 上屏",[19,1629,1437],{}," 多在合成阶段完成。",[387,1632,1633,1634,1027,1637,1027,1639,1642],{},"与 ",[264,1635,1636],{"href":1276},"CSS 属性计算",[264,1638,1289],{"href":1288},[264,1640,1641],{"href":1000},"reflow\u002Frepaint"," 串联起来，就是前端性能优化的完整地图。",[311,1644,1645],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":85,"searchDepth":122,"depth":122,"links":1647},[1648,1649,1653,1654,1657,1658,1659,1664,1665],{"id":847,"depth":116,"text":848},{"id":1005,"depth":116,"text":1006,"children":1650},[1651,1652],{"id":1067,"depth":122,"text":1068},{"id":1085,"depth":122,"text":1086},{"id":1240,"depth":116,"text":1241},{"id":1297,"depth":116,"text":1298,"children":1655},[1656],{"id":1311,"depth":122,"text":1312},{"id":1403,"depth":116,"text":1404},{"id":1455,"depth":116,"text":1456},{"id":1505,"depth":116,"text":1506,"children":1660},[1661,1662,1663],{"id":1512,"depth":122,"text":1513},{"id":1527,"depth":122,"text":1528},{"id":1548,"depth":122,"text":1549},{"id":1579,"depth":116,"text":1580},{"id":274,"depth":116,"text":274},"frontend","2026-06-25","从 HTML 解析到 GPU 上屏，详解渲染主线程与合成线程分工，以及 DOM 树、布局树、图层与位图如何串联成流水线。",{},"\u002Fblog\u002Fbrowser-rendering-pipeline",{"title":803,"description":1668},"blog\u002Fbrowser-rendering-pipeline",[1674,1675,799],"browser","rendering","4ob-xZgG6ctKPWs2Yp8VJvQBEfU9jF8aTlNCAjPdHBg",{"id":1678,"title":1679,"body":1680,"category":1666,"date":2025,"description":2026,"draft":326,"extension":327,"meta":2027,"navigation":329,"path":2028,"seo":2029,"stem":2030,"tags":2031,"__hash__":2034},"blog\u002Fblog\u002Fcanvas-random-tree.md","Canvas 递归绘制随机分形树",{"type":8,"value":1681,"toc":2015},[1682,1685,1688,1690,1694,1700,1725,1732,1736,1751,1883,1887,1901,1970,1974,1988,1990,1996,1999,2001,2012],[11,1683,1679],{"id":1684},"canvas-递归绘制随机分形树",[15,1686,1687],{},"分形树是 Canvas 入门的经典练习：从树干出发，每画一节枝条就递归分叉，直到深度耗尽。加上伪随机种子，每次点击都能生成形态各异但风格统一的树。下面 demo 支持点击换树、窗口缩放高清重绘。",[37,1689,39],{"id":39},[63,1691,1693],{"id":1692},"_1-递归分形depth-驱动一切","1. 递归分形：depth 驱动一切",[15,1695,1696,1699],{},[19,1697,1698],{},"drawBranch(x, y, len, angle, depth, maxDepth)"," 是核心函数：",[384,1701,1702,1709,1712,1719],{},[387,1703,1704,1705,1708],{},"画当前枝段（线宽由 ",[19,1706,1707],{},"depth \u002F maxDepth"," 的平方决定，主干粗、末梢细）",[387,1710,1711],{},"按深度决定分叉数量：主干区 2～3 叉，末梢 0～1 叉",[387,1713,1714,1715,1718],{},"子枝长度乘以 ",[19,1716,1717],{},"0.63～0.78"," 的随机缩放，逐层缩短",[387,1720,1721,1724],{},[19,1722,1723],{},"depth \u003C= 2"," 时在末梢稀疏开花",[15,1726,1727,1728,1731],{},"较粗的枝段还有概率从",[24,1729,1730],{},"线段中途","再分叉，让树形更自然。",[63,1733,1735],{"id":1734},"_2-角度约束树枝只朝上半平面","2. 角度约束：树枝只朝上半平面",[15,1737,1738,1739,1742,1743,1746,1747,1750],{},"Canvas 的 Y 轴向下，所以 ",[19,1740,1741],{},"sin(angle) \u003C= 0"," 表示朝上。",[19,1744,1745],{},"clampAngleUpward"," 把角度限制在 ",[19,1748,1749],{},"[-π, 0]","，避免枝条插进地面：",[77,1752,1754],{"className":101,"code":1753,"language":103,"meta":85,"style":85},"function clampAngleUpward(angle) {\n let a = angle\n while (a \u003C= -Math.PI) a += Math.PI * 2\n while (a > Math.PI) a -= Math.PI * 2\n if (a > 0) a = -a\n return a\n}\n",[19,1755,1756,1773,1786,1824,1850,1871,1879],{"__ignoreMap":85},[107,1757,1758,1761,1764,1766,1770],{"class":109,"line":110},[107,1759,1760],{"class":1199},"function",[107,1762,1763],{"class":1154}," clampAngleUpward",[107,1765,1190],{"class":1147},[107,1767,1769],{"class":1768},"s4XuR","angle",[107,1771,1772],{"class":1147},") {\n",[107,1774,1775,1778,1781,1783],{"class":109,"line":116},[107,1776,1777],{"class":1199}," let",[107,1779,1780],{"class":1147}," a ",[107,1782,1158],{"class":1199},[107,1784,1785],{"class":1147}," angle\n",[107,1787,1788,1791,1794,1797,1800,1803,1807,1810,1813,1816,1818,1821],{"class":109,"line":122},[107,1789,1790],{"class":1199}," while",[107,1792,1793],{"class":1147}," (a ",[107,1795,1796],{"class":1199},"\u003C=",[107,1798,1799],{"class":1199}," -",[107,1801,1802],{"class":1147},"Math.",[107,1804,1806],{"class":1805},"sj4cs","PI",[107,1808,1809],{"class":1147},") a ",[107,1811,1812],{"class":1199},"+=",[107,1814,1815],{"class":1147}," Math.",[107,1817,1806],{"class":1805},[107,1819,1820],{"class":1199}," *",[107,1822,1823],{"class":1805}," 2\n",[107,1825,1826,1828,1830,1833,1835,1837,1839,1842,1844,1846,1848],{"class":109,"line":128},[107,1827,1790],{"class":1199},[107,1829,1793],{"class":1147},[107,1831,1832],{"class":1199},">",[107,1834,1815],{"class":1147},[107,1836,1806],{"class":1805},[107,1838,1809],{"class":1147},[107,1840,1841],{"class":1199},"-=",[107,1843,1815],{"class":1147},[107,1845,1806],{"class":1805},[107,1847,1820],{"class":1199},[107,1849,1823],{"class":1805},[107,1851,1852,1855,1857,1859,1862,1864,1866,1868],{"class":109,"line":134},[107,1853,1854],{"class":1199}," if",[107,1856,1793],{"class":1147},[107,1858,1832],{"class":1199},[107,1860,1861],{"class":1805}," 0",[107,1863,1809],{"class":1147},[107,1865,1158],{"class":1199},[107,1867,1799],{"class":1199},[107,1869,1870],{"class":1147},"a\n",[107,1872,1873,1876],{"class":109,"line":140},[107,1874,1875],{"class":1199}," return",[107,1877,1878],{"class":1147}," a\n",[107,1880,1881],{"class":109,"line":470},[107,1882,538],{"class":1147},[63,1884,1886],{"id":1885},"_3-lcg-伪随机可复现的随机","3. LCG 伪随机：可复现的「随机」",[15,1888,1889,1890,1893,1894,1897,1898,1900],{},"用线性同余生成器（LCG）代替 ",[19,1891,1892],{},"Math.random()","，同一 ",[19,1895,1896],{},"seed"," 下每次绘制结果一致；点击画布时重置 ",[19,1899,1896],{},"，得到新树：",[77,1902,1904],{"className":101,"code":1903,"language":103,"meta":85,"style":85},"function rand() {\n seed = (seed * 16807 + 0) % 2147483647\n return (seed - 1) \u002F 2147483646\n}\n",[19,1905,1906,1916,1946,1966],{"__ignoreMap":85},[107,1907,1908,1910,1913],{"class":109,"line":110},[107,1909,1760],{"class":1199},[107,1911,1912],{"class":1154}," rand",[107,1914,1915],{"class":1147},"() {\n",[107,1917,1918,1921,1923,1926,1929,1932,1935,1937,1940,1943],{"class":109,"line":116},[107,1919,1920],{"class":1147}," seed ",[107,1922,1158],{"class":1199},[107,1924,1925],{"class":1147}," (seed ",[107,1927,1928],{"class":1199},"*",[107,1930,1931],{"class":1805}," 16807",[107,1933,1934],{"class":1199}," +",[107,1936,1861],{"class":1805},[107,1938,1939],{"class":1147},") ",[107,1941,1942],{"class":1199},"%",[107,1944,1945],{"class":1805}," 2147483647\n",[107,1947,1948,1950,1952,1955,1958,1960,1963],{"class":109,"line":122},[107,1949,1875],{"class":1199},[107,1951,1925],{"class":1147},[107,1953,1954],{"class":1199},"-",[107,1956,1957],{"class":1805}," 1",[107,1959,1939],{"class":1147},[107,1961,1962],{"class":1199},"\u002F",[107,1964,1965],{"class":1805}," 2147483646\n",[107,1967,1968],{"class":109,"line":128},[107,1969,538],{"class":1147},[63,1971,1973],{"id":1972},"_4-devicepixelratio-高清适配","4. devicePixelRatio 高清适配",[15,1975,1976,1977,31,1980,1983,1984,1987],{},"设置 ",[19,1978,1979],{},"canvas.width = cssWidth * dpr",[19,1981,1982],{},"ctx.setTransform(dpr, 0, 0, dpr, 0, 0)"," 缩放坐标系，Retina 屏上线条不会发虚。",[19,1985,1986],{},"resize"," 时按容器尺寸重算并整棵重绘。",[37,1989,256],{"id":256},[15,1991,1992,1993,268],{},"点击下方画布可重新生成一棵树。也可 ",[264,1994,267],{"href":1995},"\u002Fdemos\u002Frandom-tree",[1997,1998],"random-tree-demo",{},[37,2000,274],{"id":274},[15,2002,2003,2004,2007,2008,2011],{},"随机分形树的套路很固定：",[24,2005,2006],{},"递归 + 深度递减 + 随机参数","。难点在于细节——线宽平滑过渡、中途分叉、角度约束、末梢开花，这些让「算法树」看起来像「自然树」。如果你要做自己的生成艺术，可以从固定 ",[19,2009,2010],{},"maxDepth"," 和单一分叉规则开始，再逐步加随机性和装饰。",[311,2013,2014],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":85,"searchDepth":122,"depth":122,"links":2016},[2017,2023,2024],{"id":39,"depth":116,"text":39,"children":2018},[2019,2020,2021,2022],{"id":1692,"depth":122,"text":1693},{"id":1734,"depth":122,"text":1735},{"id":1885,"depth":122,"text":1886},{"id":1972,"depth":122,"text":1973},{"id":256,"depth":116,"text":256},{"id":274,"depth":116,"text":274},"2026-06-10","用 Canvas 递归分形画随机树，LCG 伪随机保证可复现，点击换一棵，并适配高清屏 DPR。",{},"\u002Fblog\u002Fcanvas-random-tree",{"title":1679,"description":2026},"blog\u002Fcanvas-random-tree",[335,2032,2033],"recursion","generative-art","aFdlBHe97GxQsBjnQGInjuLSEwD6EV7SRTsDTScAShA",{"id":2036,"title":2037,"body":2038,"category":2110,"date":4548,"description":4549,"draft":326,"extension":327,"meta":4550,"navigation":329,"path":4551,"seo":4552,"stem":4553,"tags":4554,"__hash__":4556},"blog\u002Fblog\u002Fcss-border-tricks.md","CSS 边框两式：动画渐变条纹与 border-image",{"type":8,"value":2039,"toc":4543},[2040,2043,2060,2064,2074,2098,2108,2630,2644,2647,3690,3694,3700,3718,3721,3765,3779,3874,3880,4505,4507,4537,4540],[11,2041,2037],{"id":2042},"css-边框两式动画渐变条纹与-border-image",[15,2044,2045,2046,2049,2050,2053,2054,2059],{},"给卡片加边框，不一定只靠 ",[19,2047,2048],{},"border: 1px solid","。纯 CSS 可以用",[24,2051,2052],{},"双层背景","画出会流动的渐变条纹；有切图素材时，用 ",[24,2055,2056],{},[19,2057,2058],{},"border-image"," 让装饰边框随容器伸缩。两种方案都不依赖 JavaScript，下面分别拆解。",[37,2061,2063],{"id":2062},"方案一动画渐变条纹边框","方案一：动画渐变条纹边框",[15,2065,2066,2067,2070,2071,2073],{},"思路是把 ",[19,2068,2069],{},"border"," 设为透明，再用两层 ",[19,2072,1497],{}," 分别填充内容区和边框区：",[760,2075,2076,2085],{},[387,2077,2078,657,2081,2084],{},[24,2079,2080],{},"内层",[19,2082,2083],{},"padding-box","）：纯白底，盖住中间",[387,2086,2087,657,2090,2093,2094,2097],{},[24,2088,2089],{},"外层",[19,2091,2092],{},"border-box","）：",[19,2095,2096],{},"repeating-linear-gradient"," 画斜向色块条纹",[15,2099,2100,2103,2104,2107],{},[19,2101,2102],{},"@keyframes"," 只移动外层背景的 ",[19,2105,2106],{},"background-position","，hover 时条纹就会沿对角线流动。",[430,2109,2112],{"lang":2110,"title":2111},"css","条纹边框核心 CSS",[77,2113,2116],{"className":2114,"code":2115,"language":2110,"meta":85,"style":85},"language-css shiki shiki-themes github-light github-dark",".card {\n --stripe-length: 24px;\n --stripe-width: calc(var(--stripe-length) \u002F 3);\n --stripe-gap: 10px;\n --stripe-period: calc((var(--stripe-length) + var(--stripe-gap)) * 2);\n\n padding: 10px;\n border: var(--stripe-width) solid transparent;\n border-radius: 14px;\n background:\n linear-gradient(#fff, #fff) padding-box,\n repeating-linear-gradient(\n -45deg,\n #2dd4bf 0 var(--stripe-length),\n #fff var(--stripe-length) calc(var(--stripe-length) + var(--stripe-gap)),\n #fb7185 calc(var(--stripe-length) + var(--stripe-gap))\n calc(var(--stripe-length) * 2 + var(--stripe-gap)),\n #fff calc(var(--stripe-length) * 2 + var(--stripe-gap)) var(--stripe-period)\n )\n border-box;\n}\n\n.card:hover {\n animation: stripe-flow 1s linear infinite;\n}\n\n@keyframes stripe-flow {\n to {\n background-position:\n 0 0,\n calc(var(--stripe-period) * 1) calc(var(--stripe-period) * 1);\n }\n}\n",[19,2117,2118,2126,2142,2172,2186,2224,2228,2241,2265,2279,2287,2309,2317,2327,2343,2379,2408,2438,2479,2485,2493,2498,2503,2511,2534,2539,2544,2554,2562,2570,2580,2620,2625],{"__ignoreMap":85},[107,2119,2120,2123],{"class":109,"line":110},[107,2121,2122],{"class":1154},".card",[107,2124,2125],{"class":1147}," {\n",[107,2127,2128,2131,2134,2137,2139],{"class":109,"line":116},[107,2129,2130],{"class":1768}," --stripe-length",[107,2132,2133],{"class":1147},": ",[107,2135,2136],{"class":1805},"24",[107,2138,1269],{"class":1199},[107,2140,2141],{"class":1147},";\n",[107,2143,2144,2147,2149,2152,2154,2157,2159,2162,2164,2166,2169],{"class":109,"line":122},[107,2145,2146],{"class":1768}," --stripe-width",[107,2148,2133],{"class":1147},[107,2150,2151],{"class":1805},"calc",[107,2153,1190],{"class":1147},[107,2155,2156],{"class":1805},"var",[107,2158,1190],{"class":1147},[107,2160,2161],{"class":1768},"--stripe-length",[107,2163,1939],{"class":1147},[107,2165,1962],{"class":1199},[107,2167,2168],{"class":1805}," 3",[107,2170,2171],{"class":1147},");\n",[107,2173,2174,2177,2179,2182,2184],{"class":109,"line":128},[107,2175,2176],{"class":1768}," --stripe-gap",[107,2178,2133],{"class":1147},[107,2180,2181],{"class":1805},"10",[107,2183,1269],{"class":1199},[107,2185,2141],{"class":1147},[107,2187,2188,2191,2193,2195,2198,2200,2202,2204,2206,2208,2211,2213,2216,2219,2222],{"class":109,"line":134},[107,2189,2190],{"class":1768}," --stripe-period",[107,2192,2133],{"class":1147},[107,2194,2151],{"class":1805},[107,2196,2197],{"class":1147},"((",[107,2199,2156],{"class":1805},[107,2201,1190],{"class":1147},[107,2203,2161],{"class":1768},[107,2205,1939],{"class":1147},[107,2207,367],{"class":1199},[107,2209,2210],{"class":1805}," var",[107,2212,1190],{"class":1147},[107,2214,2215],{"class":1768},"--stripe-gap",[107,2217,2218],{"class":1147},")) * ",[107,2220,2221],{"class":1805},"2",[107,2223,2171],{"class":1147},[107,2225,2226],{"class":109,"line":140},[107,2227,479],{"emptyLinePlaceholder":329},[107,2229,2230,2233,2235,2237,2239],{"class":109,"line":470},[107,2231,2232],{"class":1805}," padding",[107,2234,2133],{"class":1147},[107,2236,2181],{"class":1805},[107,2238,1269],{"class":1199},[107,2240,2141],{"class":1147},[107,2242,2243,2246,2248,2250,2252,2255,2257,2260,2263],{"class":109,"line":476},[107,2244,2245],{"class":1805}," border",[107,2247,2133],{"class":1147},[107,2249,2156],{"class":1805},[107,2251,1190],{"class":1147},[107,2253,2254],{"class":1768},"--stripe-width",[107,2256,1939],{"class":1147},[107,2258,2259],{"class":1805},"solid",[107,2261,2262],{"class":1805}," transparent",[107,2264,2141],{"class":1147},[107,2266,2267,2270,2272,2275,2277],{"class":109,"line":482},[107,2268,2269],{"class":1805}," border-radius",[107,2271,2133],{"class":1147},[107,2273,2274],{"class":1805},"14",[107,2276,1269],{"class":1199},[107,2278,2141],{"class":1147},[107,2280,2281,2284],{"class":109,"line":488},[107,2282,2283],{"class":1805}," background",[107,2285,2286],{"class":1147},":\n",[107,2288,2289,2292,2294,2297,2300,2302,2304,2306],{"class":109,"line":494},[107,2290,2291],{"class":1805}," linear-gradient",[107,2293,1190],{"class":1147},[107,2295,2296],{"class":1805},"#fff",[107,2298,2299],{"class":1147},", ",[107,2301,2296],{"class":1805},[107,2303,1939],{"class":1147},[107,2305,2083],{"class":1805},[107,2307,2308],{"class":1147},",\n",[107,2310,2311,2314],{"class":109,"line":500},[107,2312,2313],{"class":1805}," repeating-linear-gradient",[107,2315,2316],{"class":1147},"(\n",[107,2318,2319,2322,2325],{"class":109,"line":506},[107,2320,2321],{"class":1805}," -45",[107,2323,2324],{"class":1199},"deg",[107,2326,2308],{"class":1147},[107,2328,2329,2332,2334,2336,2338,2340],{"class":109,"line":512},[107,2330,2331],{"class":1805}," #2dd4bf",[107,2333,1861],{"class":1805},[107,2335,2210],{"class":1805},[107,2337,1190],{"class":1147},[107,2339,2161],{"class":1768},[107,2341,2342],{"class":1147},"),\n",[107,2344,2345,2348,2350,2352,2354,2356,2358,2360,2362,2364,2366,2368,2370,2372,2374,2376],{"class":109,"line":518},[107,2346,2347],{"class":1805}," #fff",[107,2349,2210],{"class":1805},[107,2351,1190],{"class":1147},[107,2353,2161],{"class":1768},[107,2355,1939],{"class":1147},[107,2357,2151],{"class":1805},[107,2359,1190],{"class":1147},[107,2361,2156],{"class":1805},[107,2363,1190],{"class":1147},[107,2365,2161],{"class":1768},[107,2367,1939],{"class":1147},[107,2369,367],{"class":1199},[107,2371,2210],{"class":1805},[107,2373,1190],{"class":1147},[107,2375,2215],{"class":1768},[107,2377,2378],{"class":1147},")),\n",[107,2380,2381,2384,2387,2389,2391,2393,2395,2397,2399,2401,2403,2405],{"class":109,"line":524},[107,2382,2383],{"class":1805}," #fb7185",[107,2385,2386],{"class":1805}," calc",[107,2388,1190],{"class":1147},[107,2390,2156],{"class":1805},[107,2392,1190],{"class":1147},[107,2394,2161],{"class":1768},[107,2396,1939],{"class":1147},[107,2398,367],{"class":1199},[107,2400,2210],{"class":1805},[107,2402,1190],{"class":1147},[107,2404,2215],{"class":1768},[107,2406,2407],{"class":1147},"))\n",[107,2409,2410,2413,2415,2417,2419,2421,2423,2425,2428,2430,2432,2434,2436],{"class":109,"line":529},[107,2411,2412],{"class":1805}," calc",[107,2414,1190],{"class":1147},[107,2416,2156],{"class":1805},[107,2418,1190],{"class":1147},[107,2420,2161],{"class":1768},[107,2422,1939],{"class":1147},[107,2424,1928],{"class":1199},[107,2426,2427],{"class":1805}," 2",[107,2429,1934],{"class":1199},[107,2431,2210],{"class":1805},[107,2433,1190],{"class":1147},[107,2435,2215],{"class":1768},[107,2437,2378],{"class":1147},[107,2439,2440,2442,2444,2446,2448,2450,2452,2454,2456,2458,2460,2462,2464,2466,2469,2471,2473,2476],{"class":109,"line":535},[107,2441,2347],{"class":1805},[107,2443,2386],{"class":1805},[107,2445,1190],{"class":1147},[107,2447,2156],{"class":1805},[107,2449,1190],{"class":1147},[107,2451,2161],{"class":1768},[107,2453,1939],{"class":1147},[107,2455,1928],{"class":1199},[107,2457,2427],{"class":1805},[107,2459,1934],{"class":1199},[107,2461,2210],{"class":1805},[107,2463,1190],{"class":1147},[107,2465,2215],{"class":1768},[107,2467,2468],{"class":1147},")) ",[107,2470,2156],{"class":1805},[107,2472,1190],{"class":1147},[107,2474,2475],{"class":1768},"--stripe-period",[107,2477,2478],{"class":1147},")\n",[107,2480,2482],{"class":109,"line":2481},19,[107,2483,2484],{"class":1147}," )\n",[107,2486,2488,2491],{"class":109,"line":2487},20,[107,2489,2490],{"class":1805}," border-box",[107,2492,2141],{"class":1147},[107,2494,2496],{"class":109,"line":2495},21,[107,2497,538],{"class":1147},[107,2499,2501],{"class":109,"line":2500},22,[107,2502,479],{"emptyLinePlaceholder":329},[107,2504,2506,2509],{"class":109,"line":2505},23,[107,2507,2508],{"class":1154},".card:hover",[107,2510,2125],{"class":1147},[107,2512,2514,2517,2520,2523,2526,2529,2532],{"class":109,"line":2513},24,[107,2515,2516],{"class":1805}," animation",[107,2518,2519],{"class":1147},": stripe-flow ",[107,2521,2522],{"class":1805},"1",[107,2524,2525],{"class":1199},"s",[107,2527,2528],{"class":1805}," linear",[107,2530,2531],{"class":1805}," infinite",[107,2533,2141],{"class":1147},[107,2535,2537],{"class":109,"line":2536},25,[107,2538,538],{"class":1147},[107,2540,2542],{"class":109,"line":2541},26,[107,2543,479],{"emptyLinePlaceholder":329},[107,2545,2547,2549,2552],{"class":109,"line":2546},27,[107,2548,2102],{"class":1199},[107,2550,2551],{"class":1768}," stripe-flow",[107,2553,2125],{"class":1147},[107,2555,2557,2560],{"class":109,"line":2556},28,[107,2558,2559],{"class":1154}," to",[107,2561,2125],{"class":1147},[107,2563,2565,2568],{"class":109,"line":2564},29,[107,2566,2567],{"class":1805}," background-position",[107,2569,2286],{"class":1147},[107,2571,2573,2576,2578],{"class":109,"line":2572},30,[107,2574,2575],{"class":1805}," 0",[107,2577,1861],{"class":1805},[107,2579,2308],{"class":1147},[107,2581,2583,2586,2588,2590,2592,2594,2596,2598,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618],{"class":109,"line":2582},31,[107,2584,2585],{"class":1805}," calc",[107,2587,1190],{"class":1147},[107,2589,2156],{"class":1805},[107,2591,1190],{"class":1147},[107,2593,2475],{"class":1768},[107,2595,1939],{"class":1147},[107,2597,1928],{"class":1199},[107,2599,1957],{"class":1805},[107,2601,1939],{"class":1147},[107,2603,2151],{"class":1805},[107,2605,1190],{"class":1147},[107,2607,2156],{"class":1805},[107,2609,1190],{"class":1147},[107,2611,2475],{"class":1768},[107,2613,1939],{"class":1147},[107,2615,1928],{"class":1199},[107,2617,1957],{"class":1805},[107,2619,2171],{"class":1147},[107,2621,2623],{"class":109,"line":2622},32,[107,2624,521],{"class":1147},[107,2626,2628],{"class":109,"line":2627},33,[107,2629,538],{"class":1147},[15,2631,2632,738,2635,2637,2638,2640,2641,2643],{},[24,2633,2634],{},"可调参数",[19,2636,2161],{}," 控制色块长度，",[19,2639,2215],{}," 控制白色细缝宽度，改 ",[19,2642,2254],{}," 等价于改边框粗细。",[15,2645,2646],{},"悬停卡片，观察条纹流动：",[2648,2649,2651],"code-playground",{"title":2650},"动画条纹边框",[77,2652,2655],{"className":2653,"code":2654,"language":337,"meta":85,"style":85},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n \u003Cdiv class=\"stage\">\n \u003Cdiv class=\"card\">\n \u003Cp class=\"ct\">\n 悬停此卡片，斜向条纹会沿对角线流动。纯 CSS 实现，无需图片。\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.stage {\n display: grid;\n place-items: center;\n min-height: 220px;\n padding: 24px;\n background: linear-gradient(135deg, #f0fdfa 0%, #fff5f7 100%);\n border-radius: 12px;\n}\n\n.card {\n --stripe-length: 24px;\n --stripe-width: calc(var(--stripe-length) \u002F 3);\n --stripe-gap: 10px;\n --stripe-period: calc((var(--stripe-length) + var(--stripe-gap)) * 2);\n width: min(100%, 320px);\n padding: 10px;\n border-radius: 14px;\n border: var(--stripe-width) solid transparent;\n cursor: pointer;\n background:\n linear-gradient(#fff, #fff) padding-box,\n repeating-linear-gradient(\n -45deg,\n #2dd4bf 0 var(--stripe-length),\n #fff var(--stripe-length) calc(var(--stripe-length) + var(--stripe-gap)),\n #fb7185 calc(var(--stripe-length) + var(--stripe-gap))\n calc(var(--stripe-length) * 2 + var(--stripe-gap)),\n #fff calc(var(--stripe-length) * 2 + var(--stripe-gap)) var(--stripe-period)\n )\n border-box;\n background-position: 0 0, 0 0;\n box-shadow:\n 0 10px 40px rgba(45, 212, 191, 0.12),\n 0 4px 12px rgba(251, 113, 133, 0.08);\n transition: transform 0.35s ease, box-shadow 0.35s ease;\n}\n\n.card:hover {\n transform: translateY(-4px);\n box-shadow:\n 0 16px 48px rgba(45, 212, 191, 0.2),\n 0 8px 20px rgba(251, 113, 133, 0.12);\n animation: stripe-flow 1s linear infinite;\n}\n\n@keyframes stripe-flow {\n to {\n background-position:\n 0 0,\n calc(var(--stripe-period) * 1) calc(var(--stripe-period) * 1);\n }\n}\n\n.ct {\n margin: 0;\n font-size: 15px;\n line-height: 1.7;\n color: #4a5568;\n}\n\u003C\u002Fstyle>\n",[19,2656,2657,2666,2684,2700,2716,2721,2730,2739,2748,2756,2760,2771,2778,2790,2802,2816,2828,2865,2878,2882,2886,2892,2904,2928,2940,2972,2998,3010,3022,3042,3054,3060,3078,3084,3093,3108,3143,3170,3199,3238,3243,3250,3271,3279,3320,3359,3387,3392,3397,3404,3424,3431,3467,3502,3519,3524,3529,3538,3545,3552,3561,3600,3605,3610,3615,3623,3635,3650,3663,3676,3681],{"__ignoreMap":85},[107,2658,2659,2661,2664],{"class":109,"line":110},[107,2660,1148],{"class":1147},[107,2662,2663],{"class":1151},"template",[107,2665,1170],{"class":1147},[107,2667,2668,2671,2674,2677,2679,2682],{"class":109,"line":116},[107,2669,2670],{"class":1147}," \u003C",[107,2672,2673],{"class":1151},"div",[107,2675,2676],{"class":1154}," class",[107,2678,1158],{"class":1147},[107,2680,2681],{"class":1161},"\"stage\"",[107,2683,1170],{"class":1147},[107,2685,2686,2689,2691,2693,2695,2698],{"class":109,"line":122},[107,2687,2688],{"class":1147}," \u003C",[107,2690,2673],{"class":1151},[107,2692,2676],{"class":1154},[107,2694,1158],{"class":1147},[107,2696,2697],{"class":1161},"\"card\"",[107,2699,1170],{"class":1147},[107,2701,2702,2705,2707,2709,2711,2714],{"class":109,"line":128},[107,2703,2704],{"class":1147}," \u003C",[107,2706,15],{"class":1151},[107,2708,2676],{"class":1154},[107,2710,1158],{"class":1147},[107,2712,2713],{"class":1161},"\"ct\"",[107,2715,1170],{"class":1147},[107,2717,2718],{"class":109,"line":134},[107,2719,2720],{"class":1147}," 悬停此卡片，斜向条纹会沿对角线流动。纯 CSS 实现，无需图片。\n",[107,2722,2723,2726,2728],{"class":109,"line":140},[107,2724,2725],{"class":1147}," \u003C\u002F",[107,2727,15],{"class":1151},[107,2729,1170],{"class":1147},[107,2731,2732,2735,2737],{"class":109,"line":470},[107,2733,2734],{"class":1147}," \u003C\u002F",[107,2736,2673],{"class":1151},[107,2738,1170],{"class":1147},[107,2740,2741,2744,2746],{"class":109,"line":476},[107,2742,2743],{"class":1147}," \u003C\u002F",[107,2745,2673],{"class":1151},[107,2747,1170],{"class":1147},[107,2749,2750,2752,2754],{"class":109,"line":482},[107,2751,1207],{"class":1147},[107,2753,2663],{"class":1151},[107,2755,1170],{"class":1147},[107,2757,2758],{"class":109,"line":488},[107,2759,479],{"emptyLinePlaceholder":329},[107,2761,2762,2764,2766,2769],{"class":109,"line":494},[107,2763,1148],{"class":1147},[107,2765,311],{"class":1151},[107,2767,2768],{"class":1154}," scoped",[107,2770,1170],{"class":1147},[107,2772,2773,2776],{"class":109,"line":500},[107,2774,2775],{"class":1154},".stage",[107,2777,2125],{"class":1147},[107,2779,2780,2783,2785,2788],{"class":109,"line":506},[107,2781,2782],{"class":1805}," display",[107,2784,2133],{"class":1147},[107,2786,2787],{"class":1805},"grid",[107,2789,2141],{"class":1147},[107,2791,2792,2795,2797,2800],{"class":109,"line":512},[107,2793,2794],{"class":1805}," place-items",[107,2796,2133],{"class":1147},[107,2798,2799],{"class":1805},"center",[107,2801,2141],{"class":1147},[107,2803,2804,2807,2809,2812,2814],{"class":109,"line":518},[107,2805,2806],{"class":1805}," min-height",[107,2808,2133],{"class":1147},[107,2810,2811],{"class":1805},"220",[107,2813,1269],{"class":1199},[107,2815,2141],{"class":1147},[107,2817,2818,2820,2822,2824,2826],{"class":109,"line":524},[107,2819,2232],{"class":1805},[107,2821,2133],{"class":1147},[107,2823,2136],{"class":1805},[107,2825,1269],{"class":1199},[107,2827,2141],{"class":1147},[107,2829,2830,2832,2834,2837,2839,2842,2844,2846,2849,2851,2853,2855,2858,2861,2863],{"class":109,"line":529},[107,2831,2283],{"class":1805},[107,2833,2133],{"class":1147},[107,2835,2836],{"class":1805},"linear-gradient",[107,2838,1190],{"class":1147},[107,2840,2841],{"class":1805},"135",[107,2843,2324],{"class":1199},[107,2845,2299],{"class":1147},[107,2847,2848],{"class":1805},"#f0fdfa",[107,2850,1861],{"class":1805},[107,2852,1942],{"class":1199},[107,2854,2299],{"class":1147},[107,2856,2857],{"class":1805},"#fff5f7",[107,2859,2860],{"class":1805}," 100",[107,2862,1942],{"class":1199},[107,2864,2171],{"class":1147},[107,2866,2867,2869,2871,2874,2876],{"class":109,"line":535},[107,2868,2269],{"class":1805},[107,2870,2133],{"class":1147},[107,2872,2873],{"class":1805},"12",[107,2875,1269],{"class":1199},[107,2877,2141],{"class":1147},[107,2879,2880],{"class":109,"line":2481},[107,2881,538],{"class":1147},[107,2883,2884],{"class":109,"line":2487},[107,2885,479],{"emptyLinePlaceholder":329},[107,2887,2888,2890],{"class":109,"line":2495},[107,2889,2122],{"class":1154},[107,2891,2125],{"class":1147},[107,2893,2894,2896,2898,2900,2902],{"class":109,"line":2500},[107,2895,2130],{"class":1768},[107,2897,2133],{"class":1147},[107,2899,2136],{"class":1805},[107,2901,1269],{"class":1199},[107,2903,2141],{"class":1147},[107,2905,2906,2908,2910,2912,2914,2916,2918,2920,2922,2924,2926],{"class":109,"line":2505},[107,2907,2146],{"class":1768},[107,2909,2133],{"class":1147},[107,2911,2151],{"class":1805},[107,2913,1190],{"class":1147},[107,2915,2156],{"class":1805},[107,2917,1190],{"class":1147},[107,2919,2161],{"class":1768},[107,2921,1939],{"class":1147},[107,2923,1962],{"class":1199},[107,2925,2168],{"class":1805},[107,2927,2171],{"class":1147},[107,2929,2930,2932,2934,2936,2938],{"class":109,"line":2513},[107,2931,2176],{"class":1768},[107,2933,2133],{"class":1147},[107,2935,2181],{"class":1805},[107,2937,1269],{"class":1199},[107,2939,2141],{"class":1147},[107,2941,2942,2944,2946,2948,2950,2952,2954,2956,2958,2960,2962,2964,2966,2968,2970],{"class":109,"line":2536},[107,2943,2190],{"class":1768},[107,2945,2133],{"class":1147},[107,2947,2151],{"class":1805},[107,2949,2197],{"class":1147},[107,2951,2156],{"class":1805},[107,2953,1190],{"class":1147},[107,2955,2161],{"class":1768},[107,2957,1939],{"class":1147},[107,2959,367],{"class":1199},[107,2961,2210],{"class":1805},[107,2963,1190],{"class":1147},[107,2965,2215],{"class":1768},[107,2967,2218],{"class":1147},[107,2969,2221],{"class":1805},[107,2971,2171],{"class":1147},[107,2973,2974,2977,2979,2982,2984,2987,2989,2991,2994,2996],{"class":109,"line":2541},[107,2975,2976],{"class":1805}," width",[107,2978,2133],{"class":1147},[107,2980,2981],{"class":1805},"min",[107,2983,1190],{"class":1147},[107,2985,2986],{"class":1805},"100",[107,2988,1942],{"class":1199},[107,2990,2299],{"class":1147},[107,2992,2993],{"class":1805},"320",[107,2995,1269],{"class":1199},[107,2997,2171],{"class":1147},[107,2999,3000,3002,3004,3006,3008],{"class":109,"line":2546},[107,3001,2232],{"class":1805},[107,3003,2133],{"class":1147},[107,3005,2181],{"class":1805},[107,3007,1269],{"class":1199},[107,3009,2141],{"class":1147},[107,3011,3012,3014,3016,3018,3020],{"class":109,"line":2556},[107,3013,2269],{"class":1805},[107,3015,2133],{"class":1147},[107,3017,2274],{"class":1805},[107,3019,1269],{"class":1199},[107,3021,2141],{"class":1147},[107,3023,3024,3026,3028,3030,3032,3034,3036,3038,3040],{"class":109,"line":2564},[107,3025,2245],{"class":1805},[107,3027,2133],{"class":1147},[107,3029,2156],{"class":1805},[107,3031,1190],{"class":1147},[107,3033,2254],{"class":1768},[107,3035,1939],{"class":1147},[107,3037,2259],{"class":1805},[107,3039,2262],{"class":1805},[107,3041,2141],{"class":1147},[107,3043,3044,3047,3049,3052],{"class":109,"line":2572},[107,3045,3046],{"class":1805}," cursor",[107,3048,2133],{"class":1147},[107,3050,3051],{"class":1805},"pointer",[107,3053,2141],{"class":1147},[107,3055,3056,3058],{"class":109,"line":2582},[107,3057,2283],{"class":1805},[107,3059,2286],{"class":1147},[107,3061,3062,3064,3066,3068,3070,3072,3074,3076],{"class":109,"line":2622},[107,3063,2291],{"class":1805},[107,3065,1190],{"class":1147},[107,3067,2296],{"class":1805},[107,3069,2299],{"class":1147},[107,3071,2296],{"class":1805},[107,3073,1939],{"class":1147},[107,3075,2083],{"class":1805},[107,3077,2308],{"class":1147},[107,3079,3080,3082],{"class":109,"line":2627},[107,3081,2313],{"class":1805},[107,3083,2316],{"class":1147},[107,3085,3087,3089,3091],{"class":109,"line":3086},34,[107,3088,2321],{"class":1805},[107,3090,2324],{"class":1199},[107,3092,2308],{"class":1147},[107,3094,3096,3098,3100,3102,3104,3106],{"class":109,"line":3095},35,[107,3097,2331],{"class":1805},[107,3099,1861],{"class":1805},[107,3101,2210],{"class":1805},[107,3103,1190],{"class":1147},[107,3105,2161],{"class":1768},[107,3107,2342],{"class":1147},[107,3109,3111,3113,3115,3117,3119,3121,3123,3125,3127,3129,3131,3133,3135,3137,3139,3141],{"class":109,"line":3110},36,[107,3112,2347],{"class":1805},[107,3114,2210],{"class":1805},[107,3116,1190],{"class":1147},[107,3118,2161],{"class":1768},[107,3120,1939],{"class":1147},[107,3122,2151],{"class":1805},[107,3124,1190],{"class":1147},[107,3126,2156],{"class":1805},[107,3128,1190],{"class":1147},[107,3130,2161],{"class":1768},[107,3132,1939],{"class":1147},[107,3134,367],{"class":1199},[107,3136,2210],{"class":1805},[107,3138,1190],{"class":1147},[107,3140,2215],{"class":1768},[107,3142,2378],{"class":1147},[107,3144,3146,3148,3150,3152,3154,3156,3158,3160,3162,3164,3166,3168],{"class":109,"line":3145},37,[107,3147,2383],{"class":1805},[107,3149,2386],{"class":1805},[107,3151,1190],{"class":1147},[107,3153,2156],{"class":1805},[107,3155,1190],{"class":1147},[107,3157,2161],{"class":1768},[107,3159,1939],{"class":1147},[107,3161,367],{"class":1199},[107,3163,2210],{"class":1805},[107,3165,1190],{"class":1147},[107,3167,2215],{"class":1768},[107,3169,2407],{"class":1147},[107,3171,3173,3175,3177,3179,3181,3183,3185,3187,3189,3191,3193,3195,3197],{"class":109,"line":3172},38,[107,3174,2412],{"class":1805},[107,3176,1190],{"class":1147},[107,3178,2156],{"class":1805},[107,3180,1190],{"class":1147},[107,3182,2161],{"class":1768},[107,3184,1939],{"class":1147},[107,3186,1928],{"class":1199},[107,3188,2427],{"class":1805},[107,3190,1934],{"class":1199},[107,3192,2210],{"class":1805},[107,3194,1190],{"class":1147},[107,3196,2215],{"class":1768},[107,3198,2378],{"class":1147},[107,3200,3202,3204,3206,3208,3210,3212,3214,3216,3218,3220,3222,3224,3226,3228,3230,3232,3234,3236],{"class":109,"line":3201},39,[107,3203,2347],{"class":1805},[107,3205,2386],{"class":1805},[107,3207,1190],{"class":1147},[107,3209,2156],{"class":1805},[107,3211,1190],{"class":1147},[107,3213,2161],{"class":1768},[107,3215,1939],{"class":1147},[107,3217,1928],{"class":1199},[107,3219,2427],{"class":1805},[107,3221,1934],{"class":1199},[107,3223,2210],{"class":1805},[107,3225,1190],{"class":1147},[107,3227,2215],{"class":1768},[107,3229,2468],{"class":1147},[107,3231,2156],{"class":1805},[107,3233,1190],{"class":1147},[107,3235,2475],{"class":1768},[107,3237,2478],{"class":1147},[107,3239,3241],{"class":109,"line":3240},40,[107,3242,2484],{"class":1147},[107,3244,3246,3248],{"class":109,"line":3245},41,[107,3247,2490],{"class":1805},[107,3249,2141],{"class":1147},[107,3251,3253,3256,3258,3261,3263,3265,3267,3269],{"class":109,"line":3252},42,[107,3254,3255],{"class":1805}," background-position",[107,3257,2133],{"class":1147},[107,3259,3260],{"class":1805},"0",[107,3262,1861],{"class":1805},[107,3264,2299],{"class":1147},[107,3266,3260],{"class":1805},[107,3268,1861],{"class":1805},[107,3270,2141],{"class":1147},[107,3272,3274,3277],{"class":109,"line":3273},43,[107,3275,3276],{"class":1805}," box-shadow",[107,3278,2286],{"class":1147},[107,3280,3282,3285,3288,3290,3293,3295,3298,3300,3303,3305,3308,3310,3313,3315,3318],{"class":109,"line":3281},44,[107,3283,3284],{"class":1805}," 0",[107,3286,3287],{"class":1805}," 10",[107,3289,1269],{"class":1199},[107,3291,3292],{"class":1805}," 40",[107,3294,1269],{"class":1199},[107,3296,3297],{"class":1805}," rgba",[107,3299,1190],{"class":1147},[107,3301,3302],{"class":1805},"45",[107,3304,2299],{"class":1147},[107,3306,3307],{"class":1805},"212",[107,3309,2299],{"class":1147},[107,3311,3312],{"class":1805},"191",[107,3314,2299],{"class":1147},[107,3316,3317],{"class":1805},"0.12",[107,3319,2342],{"class":1147},[107,3321,3323,3325,3328,3330,3333,3335,3337,3339,3342,3344,3347,3349,3352,3354,3357],{"class":109,"line":3322},45,[107,3324,3284],{"class":1805},[107,3326,3327],{"class":1805}," 4",[107,3329,1269],{"class":1199},[107,3331,3332],{"class":1805}," 12",[107,3334,1269],{"class":1199},[107,3336,3297],{"class":1805},[107,3338,1190],{"class":1147},[107,3340,3341],{"class":1805},"251",[107,3343,2299],{"class":1147},[107,3345,3346],{"class":1805},"113",[107,3348,2299],{"class":1147},[107,3350,3351],{"class":1805},"133",[107,3353,2299],{"class":1147},[107,3355,3356],{"class":1805},"0.08",[107,3358,2171],{"class":1147},[107,3360,3362,3365,3368,3371,3373,3376,3379,3381,3383,3385],{"class":109,"line":3361},46,[107,3363,3364],{"class":1805}," transition",[107,3366,3367],{"class":1147},": transform ",[107,3369,3370],{"class":1805},"0.35",[107,3372,2525],{"class":1199},[107,3374,3375],{"class":1805}," ease",[107,3377,3378],{"class":1147},", box-shadow ",[107,3380,3370],{"class":1805},[107,3382,2525],{"class":1199},[107,3384,3375],{"class":1805},[107,3386,2141],{"class":1147},[107,3388,3390],{"class":109,"line":3389},47,[107,3391,538],{"class":1147},[107,3393,3395],{"class":109,"line":3394},48,[107,3396,479],{"emptyLinePlaceholder":329},[107,3398,3400,3402],{"class":109,"line":3399},49,[107,3401,2508],{"class":1154},[107,3403,2125],{"class":1147},[107,3405,3407,3410,3412,3415,3417,3420,3422],{"class":109,"line":3406},50,[107,3408,3409],{"class":1805}," transform",[107,3411,2133],{"class":1147},[107,3413,3414],{"class":1805},"translateY",[107,3416,1190],{"class":1147},[107,3418,3419],{"class":1805},"-4",[107,3421,1269],{"class":1199},[107,3423,2171],{"class":1147},[107,3425,3427,3429],{"class":109,"line":3426},51,[107,3428,3276],{"class":1805},[107,3430,2286],{"class":1147},[107,3432,3434,3436,3439,3441,3444,3446,3448,3450,3452,3454,3456,3458,3460,3462,3465],{"class":109,"line":3433},52,[107,3435,3284],{"class":1805},[107,3437,3438],{"class":1805}," 16",[107,3440,1269],{"class":1199},[107,3442,3443],{"class":1805}," 48",[107,3445,1269],{"class":1199},[107,3447,3297],{"class":1805},[107,3449,1190],{"class":1147},[107,3451,3302],{"class":1805},[107,3453,2299],{"class":1147},[107,3455,3307],{"class":1805},[107,3457,2299],{"class":1147},[107,3459,3312],{"class":1805},[107,3461,2299],{"class":1147},[107,3463,3464],{"class":1805},"0.2",[107,3466,2342],{"class":1147},[107,3468,3470,3472,3475,3477,3480,3482,3484,3486,3488,3490,3492,3494,3496,3498,3500],{"class":109,"line":3469},53,[107,3471,3284],{"class":1805},[107,3473,3474],{"class":1805}," 8",[107,3476,1269],{"class":1199},[107,3478,3479],{"class":1805}," 20",[107,3481,1269],{"class":1199},[107,3483,3297],{"class":1805},[107,3485,1190],{"class":1147},[107,3487,3341],{"class":1805},[107,3489,2299],{"class":1147},[107,3491,3346],{"class":1805},[107,3493,2299],{"class":1147},[107,3495,3351],{"class":1805},[107,3497,2299],{"class":1147},[107,3499,3317],{"class":1805},[107,3501,2171],{"class":1147},[107,3503,3505,3507,3509,3511,3513,3515,3517],{"class":109,"line":3504},54,[107,3506,2516],{"class":1805},[107,3508,2519],{"class":1147},[107,3510,2522],{"class":1805},[107,3512,2525],{"class":1199},[107,3514,2528],{"class":1805},[107,3516,2531],{"class":1805},[107,3518,2141],{"class":1147},[107,3520,3522],{"class":109,"line":3521},55,[107,3523,538],{"class":1147},[107,3525,3527],{"class":109,"line":3526},56,[107,3528,479],{"emptyLinePlaceholder":329},[107,3530,3532,3534,3536],{"class":109,"line":3531},57,[107,3533,2102],{"class":1199},[107,3535,2551],{"class":1768},[107,3537,2125],{"class":1147},[107,3539,3541,3543],{"class":109,"line":3540},58,[107,3542,2559],{"class":1154},[107,3544,2125],{"class":1147},[107,3546,3548,3550],{"class":109,"line":3547},59,[107,3549,2567],{"class":1805},[107,3551,2286],{"class":1147},[107,3553,3555,3557,3559],{"class":109,"line":3554},60,[107,3556,2575],{"class":1805},[107,3558,1861],{"class":1805},[107,3560,2308],{"class":1147},[107,3562,3564,3566,3568,3570,3572,3574,3576,3578,3580,3582,3584,3586,3588,3590,3592,3594,3596,3598],{"class":109,"line":3563},61,[107,3565,2585],{"class":1805},[107,3567,1190],{"class":1147},[107,3569,2156],{"class":1805},[107,3571,1190],{"class":1147},[107,3573,2475],{"class":1768},[107,3575,1939],{"class":1147},[107,3577,1928],{"class":1199},[107,3579,1957],{"class":1805},[107,3581,1939],{"class":1147},[107,3583,2151],{"class":1805},[107,3585,1190],{"class":1147},[107,3587,2156],{"class":1805},[107,3589,1190],{"class":1147},[107,3591,2475],{"class":1768},[107,3593,1939],{"class":1147},[107,3595,1928],{"class":1199},[107,3597,1957],{"class":1805},[107,3599,2171],{"class":1147},[107,3601,3603],{"class":109,"line":3602},62,[107,3604,521],{"class":1147},[107,3606,3608],{"class":109,"line":3607},63,[107,3609,538],{"class":1147},[107,3611,3613],{"class":109,"line":3612},64,[107,3614,479],{"emptyLinePlaceholder":329},[107,3616,3618,3621],{"class":109,"line":3617},65,[107,3619,3620],{"class":1154},".ct",[107,3622,2125],{"class":1147},[107,3624,3626,3629,3631,3633],{"class":109,"line":3625},66,[107,3627,3628],{"class":1805}," margin",[107,3630,2133],{"class":1147},[107,3632,3260],{"class":1805},[107,3634,2141],{"class":1147},[107,3636,3638,3641,3643,3646,3648],{"class":109,"line":3637},67,[107,3639,3640],{"class":1805}," font-size",[107,3642,2133],{"class":1147},[107,3644,3645],{"class":1805},"15",[107,3647,1269],{"class":1199},[107,3649,2141],{"class":1147},[107,3651,3653,3656,3658,3661],{"class":109,"line":3652},68,[107,3654,3655],{"class":1805}," line-height",[107,3657,2133],{"class":1147},[107,3659,3660],{"class":1805},"1.7",[107,3662,2141],{"class":1147},[107,3664,3666,3669,3671,3674],{"class":109,"line":3665},69,[107,3667,3668],{"class":1805}," color",[107,3670,2133],{"class":1147},[107,3672,3673],{"class":1805},"#4a5568",[107,3675,2141],{"class":1147},[107,3677,3679],{"class":109,"line":3678},70,[107,3680,538],{"class":1147},[107,3682,3684,3686,3688],{"class":109,"line":3683},71,[107,3685,1207],{"class":1147},[107,3687,311],{"class":1151},[107,3689,1170],{"class":1147},[37,3691,3693],{"id":3692},"方案二border-image-图片切片边框","方案二：border-image 图片切片边框",[15,3695,3696,3697,3699],{},"有九宫格切图时，",[19,3698,2058],{}," 可以把四角固定、四边平铺或拉伸。简写语法：",[77,3701,3703],{"className":2114,"code":3702,"language":2110,"meta":85,"style":85},"border-image: url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 round;\n",[19,3704,3705],{"__ignoreMap":85},[107,3706,3707,3709,3712,3715],{"class":109,"line":110},[107,3708,2058],{"class":1151},[107,3710,3711],{"class":1147},": url('\u002Fdemos\u002F",[107,3713,3714],{"class":1151},"css-borders",[107,3716,3717],{"class":1147},"\u002Fborderimg.png') 320 round;\n",[15,3719,3720],{},"等价于：",[173,3722,3723,3733],{},[176,3724,3725],{},[179,3726,3727,3730],{},[182,3728,3729],{},"属性",[182,3731,3732],{},"含义",[192,3734,3735,3745,3755],{},[179,3736,3737,3742],{},[197,3738,3739],{},[19,3740,3741],{},"border-image-source",[197,3743,3744],{},"装饰图 URL",[179,3746,3747,3752],{},[197,3748,3749],{},[19,3750,3751],{},"border-image-slice: 320",[197,3753,3754],{},"从四边向内切 320px（数字无单位 = 像素）",[179,3756,3757,3762],{},[197,3758,3759],{},[19,3760,3761],{},"border-image-repeat: round",[197,3763,3764],{},"边段重复并缩放以填满，不留空隙",[15,3766,3767,3770,3771,3774,3775,3778],{},[19,3768,3769],{},"round"," 适合等宽花纹；",[19,3772,3773],{},"repeat"," 原尺寸重复可能裁切；",[19,3776,3777],{},"stretch"," 拉伸变形但一定铺满。",[430,3780,3782],{"lang":2110,"title":3781},"border-image 简写",[77,3783,3785],{"className":2114,"code":3784,"language":2110,"meta":85,"style":85},".box {\n border: 50px solid transparent;\n border-image: url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 round;\n background: #111;\n color: #fff;\n padding: 20px;\n}\n",[19,3786,3787,3794,3812,3836,3847,3857,3870],{"__ignoreMap":85},[107,3788,3789,3792],{"class":109,"line":110},[107,3790,3791],{"class":1154},".box",[107,3793,2125],{"class":1147},[107,3795,3796,3798,3800,3803,3805,3808,3810],{"class":109,"line":116},[107,3797,2245],{"class":1805},[107,3799,2133],{"class":1147},[107,3801,3802],{"class":1805},"50",[107,3804,1269],{"class":1199},[107,3806,3807],{"class":1805}," solid",[107,3809,2262],{"class":1805},[107,3811,2141],{"class":1147},[107,3813,3814,3817,3819,3822,3824,3827,3829,3831,3834],{"class":109,"line":122},[107,3815,3816],{"class":1805}," border-image",[107,3818,2133],{"class":1147},[107,3820,3821],{"class":1805},"url",[107,3823,1190],{"class":1147},[107,3825,3826],{"class":1161},"'\u002Fdemos\u002Fcss-borders\u002Fborderimg.png'",[107,3828,1939],{"class":1147},[107,3830,2993],{"class":1805},[107,3832,3833],{"class":1805}," round",[107,3835,2141],{"class":1147},[107,3837,3838,3840,3842,3845],{"class":109,"line":128},[107,3839,2283],{"class":1805},[107,3841,2133],{"class":1147},[107,3843,3844],{"class":1805},"#111",[107,3846,2141],{"class":1147},[107,3848,3849,3851,3853,3855],{"class":109,"line":134},[107,3850,3668],{"class":1805},[107,3852,2133],{"class":1147},[107,3854,2296],{"class":1805},[107,3856,2141],{"class":1147},[107,3858,3859,3861,3863,3866,3868],{"class":109,"line":140},[107,3860,2232],{"class":1805},[107,3862,2133],{"class":1147},[107,3864,3865],{"class":1805},"20",[107,3867,1269],{"class":1199},[107,3869,2141],{"class":1147},[107,3871,3872],{"class":109,"line":470},[107,3873,538],{"class":1147},[15,3875,3876,3877,3879],{},"切换 ",[19,3878,3773],{}," 模式，对比边框铺法差异：",[2648,3881,3883],{"title":3882},"border-image 切片边框",[77,3884,3886],{"className":2653,"code":3885,"language":337,"meta":85,"style":85},"\u003Ctemplate>\n \u003Cdiv class=\"stage\">\n \u003Clabel class=\"toolbar\">\n border-image-repeat\n \u003Cselect v-model=\"repeat\">\n \u003Coption value=\"round\">round\u003C\u002Foption>\n \u003Coption value=\"repeat\">repeat\u003C\u002Foption>\n \u003Coption value=\"stretch\">stretch\u003C\u002Foption>\n \u003C\u002Fselect>\n \u003C\u002Flabel>\n \u003Cdiv class=\"box\" :style=\"boxStyle\">\n border-image 让装饰图随容器伸缩。切换上方 repeat 模式观察边段铺法。\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\nconst repeat = ref('round')\n\nconst boxStyle = computed(() => ({\n borderImage: `url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 ${repeat.value}`,\n}))\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.stage {\n padding: 24px;\n background: #f0f0f0;\n border-radius: 12px;\n}\n\n.toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 16px;\n font-size: 14px;\n color: #374151;\n}\n\n.toolbar select {\n padding: 4px 8px;\n border-radius: 6px;\n border: 1px solid #d1d5db;\n}\n\n.box {\n box-sizing: border-box;\n border: 50px solid transparent;\n background: #111;\n color: #fff;\n padding: 20px;\n line-height: 1.7;\n font-size: 15px;\n}\n\u003C\u002Fstyle>\n",[19,3887,3888,3896,3910,3926,3931,3948,3971,3990,4010,4018,4026,4049,4054,4062,4070,4078,4082,4093,4107,4111,4132,4136,4157,4178,4183,4191,4195,4205,4211,4223,4234,4246,4250,4254,4261,4272,4283,4297,4311,4323,4334,4338,4342,4351,4368,4381,4398,4402,4406,4412,4423,4439,4449,4459,4471,4481,4493,4497],{"__ignoreMap":85},[107,3889,3890,3892,3894],{"class":109,"line":110},[107,3891,1148],{"class":1147},[107,3893,2663],{"class":1151},[107,3895,1170],{"class":1147},[107,3897,3898,3900,3902,3904,3906,3908],{"class":109,"line":116},[107,3899,2670],{"class":1147},[107,3901,2673],{"class":1151},[107,3903,2676],{"class":1154},[107,3905,1158],{"class":1147},[107,3907,2681],{"class":1161},[107,3909,1170],{"class":1147},[107,3911,3912,3914,3917,3919,3921,3924],{"class":109,"line":122},[107,3913,2688],{"class":1147},[107,3915,3916],{"class":1151},"label",[107,3918,2676],{"class":1154},[107,3920,1158],{"class":1147},[107,3922,3923],{"class":1161},"\"toolbar\"",[107,3925,1170],{"class":1147},[107,3927,3928],{"class":109,"line":128},[107,3929,3930],{"class":1147}," border-image-repeat\n",[107,3932,3933,3935,3938,3941,3943,3946],{"class":109,"line":134},[107,3934,2704],{"class":1147},[107,3936,3937],{"class":1151},"select",[107,3939,3940],{"class":1154}," v-model",[107,3942,1158],{"class":1147},[107,3944,3945],{"class":1161},"\"repeat\"",[107,3947,1170],{"class":1147},[107,3949,3950,3953,3956,3959,3961,3964,3967,3969],{"class":109,"line":140},[107,3951,3952],{"class":1147}," \u003C",[107,3954,3955],{"class":1151},"option",[107,3957,3958],{"class":1154}," value",[107,3960,1158],{"class":1147},[107,3962,3963],{"class":1161},"\"round\"",[107,3965,3966],{"class":1147},">round\u003C\u002F",[107,3968,3955],{"class":1151},[107,3970,1170],{"class":1147},[107,3972,3973,3975,3977,3979,3981,3983,3986,3988],{"class":109,"line":470},[107,3974,3952],{"class":1147},[107,3976,3955],{"class":1151},[107,3978,3958],{"class":1154},[107,3980,1158],{"class":1147},[107,3982,3945],{"class":1161},[107,3984,3985],{"class":1147},">repeat\u003C\u002F",[107,3987,3955],{"class":1151},[107,3989,1170],{"class":1147},[107,3991,3992,3994,3996,3998,4000,4003,4006,4008],{"class":109,"line":476},[107,3993,3952],{"class":1147},[107,3995,3955],{"class":1151},[107,3997,3958],{"class":1154},[107,3999,1158],{"class":1147},[107,4001,4002],{"class":1161},"\"stretch\"",[107,4004,4005],{"class":1147},">stretch\u003C\u002F",[107,4007,3955],{"class":1151},[107,4009,1170],{"class":1147},[107,4011,4012,4014,4016],{"class":109,"line":482},[107,4013,2725],{"class":1147},[107,4015,3937],{"class":1151},[107,4017,1170],{"class":1147},[107,4019,4020,4022,4024],{"class":109,"line":488},[107,4021,2734],{"class":1147},[107,4023,3916],{"class":1151},[107,4025,1170],{"class":1147},[107,4027,4028,4030,4032,4034,4036,4039,4042,4044,4047],{"class":109,"line":494},[107,4029,2688],{"class":1147},[107,4031,2673],{"class":1151},[107,4033,2676],{"class":1154},[107,4035,1158],{"class":1147},[107,4037,4038],{"class":1161},"\"box\"",[107,4040,4041],{"class":1154}," :style",[107,4043,1158],{"class":1147},[107,4045,4046],{"class":1161},"\"boxStyle\"",[107,4048,1170],{"class":1147},[107,4050,4051],{"class":109,"line":500},[107,4052,4053],{"class":1147}," border-image 让装饰图随容器伸缩。切换上方 repeat 模式观察边段铺法。\n",[107,4055,4056,4058,4060],{"class":109,"line":506},[107,4057,2734],{"class":1147},[107,4059,2673],{"class":1151},[107,4061,1170],{"class":1147},[107,4063,4064,4066,4068],{"class":109,"line":512},[107,4065,2743],{"class":1147},[107,4067,2673],{"class":1151},[107,4069,1170],{"class":1147},[107,4071,4072,4074,4076],{"class":109,"line":518},[107,4073,1207],{"class":1147},[107,4075,2663],{"class":1151},[107,4077,1170],{"class":1147},[107,4079,4080],{"class":109,"line":524},[107,4081,479],{"emptyLinePlaceholder":329},[107,4083,4084,4086,4088,4091],{"class":109,"line":529},[107,4085,1148],{"class":1147},[107,4087,1177],{"class":1151},[107,4089,4090],{"class":1154}," setup",[107,4092,1170],{"class":1147},[107,4094,4095,4098,4101,4104],{"class":109,"line":535},[107,4096,4097],{"class":1199},"import",[107,4099,4100],{"class":1147}," { computed, ref } ",[107,4102,4103],{"class":1199},"from",[107,4105,4106],{"class":1161}," 'vue'\n",[107,4108,4109],{"class":109,"line":2481},[107,4110,479],{"emptyLinePlaceholder":329},[107,4112,4113,4116,4119,4122,4125,4127,4130],{"class":109,"line":2487},[107,4114,4115],{"class":1199},"const",[107,4117,4118],{"class":1805}," repeat",[107,4120,4121],{"class":1199}," =",[107,4123,4124],{"class":1154}," ref",[107,4126,1190],{"class":1147},[107,4128,4129],{"class":1161},"'round'",[107,4131,2478],{"class":1147},[107,4133,4134],{"class":109,"line":2495},[107,4135,479],{"emptyLinePlaceholder":329},[107,4137,4138,4140,4143,4145,4148,4151,4154],{"class":109,"line":2500},[107,4139,4115],{"class":1199},[107,4141,4142],{"class":1805}," boxStyle",[107,4144,4121],{"class":1199},[107,4146,4147],{"class":1154}," computed",[107,4149,4150],{"class":1147},"(() ",[107,4152,4153],{"class":1199},"=>",[107,4155,4156],{"class":1147}," ({\n",[107,4158,4159,4162,4165,4167,4170,4173,4176],{"class":109,"line":2505},[107,4160,4161],{"class":1147}," borderImage: ",[107,4163,4164],{"class":1161},"`url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 ${",[107,4166,3773],{"class":1147},[107,4168,4169],{"class":1161},".",[107,4171,4172],{"class":1147},"value",[107,4174,4175],{"class":1161},"}`",[107,4177,2308],{"class":1147},[107,4179,4180],{"class":109,"line":2513},[107,4181,4182],{"class":1147},"}))\n",[107,4184,4185,4187,4189],{"class":109,"line":2536},[107,4186,1207],{"class":1147},[107,4188,1177],{"class":1151},[107,4190,1170],{"class":1147},[107,4192,4193],{"class":109,"line":2541},[107,4194,479],{"emptyLinePlaceholder":329},[107,4196,4197,4199,4201,4203],{"class":109,"line":2546},[107,4198,1148],{"class":1147},[107,4200,311],{"class":1151},[107,4202,2768],{"class":1154},[107,4204,1170],{"class":1147},[107,4206,4207,4209],{"class":109,"line":2556},[107,4208,2775],{"class":1154},[107,4210,2125],{"class":1147},[107,4212,4213,4215,4217,4219,4221],{"class":109,"line":2564},[107,4214,2232],{"class":1805},[107,4216,2133],{"class":1147},[107,4218,2136],{"class":1805},[107,4220,1269],{"class":1199},[107,4222,2141],{"class":1147},[107,4224,4225,4227,4229,4232],{"class":109,"line":2572},[107,4226,2283],{"class":1805},[107,4228,2133],{"class":1147},[107,4230,4231],{"class":1805},"#f0f0f0",[107,4233,2141],{"class":1147},[107,4235,4236,4238,4240,4242,4244],{"class":109,"line":2582},[107,4237,2269],{"class":1805},[107,4239,2133],{"class":1147},[107,4241,2873],{"class":1805},[107,4243,1269],{"class":1199},[107,4245,2141],{"class":1147},[107,4247,4248],{"class":109,"line":2622},[107,4249,538],{"class":1147},[107,4251,4252],{"class":109,"line":2627},[107,4253,479],{"emptyLinePlaceholder":329},[107,4255,4256,4259],{"class":109,"line":3086},[107,4257,4258],{"class":1154},".toolbar",[107,4260,2125],{"class":1147},[107,4262,4263,4265,4267,4270],{"class":109,"line":3095},[107,4264,2782],{"class":1805},[107,4266,2133],{"class":1147},[107,4268,4269],{"class":1805},"flex",[107,4271,2141],{"class":1147},[107,4273,4274,4277,4279,4281],{"class":109,"line":3110},[107,4275,4276],{"class":1805}," align-items",[107,4278,2133],{"class":1147},[107,4280,2799],{"class":1805},[107,4282,2141],{"class":1147},[107,4284,4285,4288,4290,4293,4295],{"class":109,"line":3145},[107,4286,4287],{"class":1805}," gap",[107,4289,2133],{"class":1147},[107,4291,4292],{"class":1805},"8",[107,4294,1269],{"class":1199},[107,4296,2141],{"class":1147},[107,4298,4299,4302,4304,4307,4309],{"class":109,"line":3172},[107,4300,4301],{"class":1805}," margin-bottom",[107,4303,2133],{"class":1147},[107,4305,4306],{"class":1805},"16",[107,4308,1269],{"class":1199},[107,4310,2141],{"class":1147},[107,4312,4313,4315,4317,4319,4321],{"class":109,"line":3201},[107,4314,3640],{"class":1805},[107,4316,2133],{"class":1147},[107,4318,2274],{"class":1805},[107,4320,1269],{"class":1199},[107,4322,2141],{"class":1147},[107,4324,4325,4327,4329,4332],{"class":109,"line":3240},[107,4326,3668],{"class":1805},[107,4328,2133],{"class":1147},[107,4330,4331],{"class":1805},"#374151",[107,4333,2141],{"class":1147},[107,4335,4336],{"class":109,"line":3245},[107,4337,538],{"class":1147},[107,4339,4340],{"class":109,"line":3252},[107,4341,479],{"emptyLinePlaceholder":329},[107,4343,4344,4346,4349],{"class":109,"line":3273},[107,4345,4258],{"class":1154},[107,4347,4348],{"class":1151}," select",[107,4350,2125],{"class":1147},[107,4352,4353,4355,4357,4360,4362,4364,4366],{"class":109,"line":3281},[107,4354,2232],{"class":1805},[107,4356,2133],{"class":1147},[107,4358,4359],{"class":1805},"4",[107,4361,1269],{"class":1199},[107,4363,3474],{"class":1805},[107,4365,1269],{"class":1199},[107,4367,2141],{"class":1147},[107,4369,4370,4372,4374,4377,4379],{"class":109,"line":3322},[107,4371,2269],{"class":1805},[107,4373,2133],{"class":1147},[107,4375,4376],{"class":1805},"6",[107,4378,1269],{"class":1199},[107,4380,2141],{"class":1147},[107,4382,4383,4385,4387,4389,4391,4393,4396],{"class":109,"line":3361},[107,4384,2245],{"class":1805},[107,4386,2133],{"class":1147},[107,4388,2522],{"class":1805},[107,4390,1269],{"class":1199},[107,4392,3807],{"class":1805},[107,4394,4395],{"class":1805}," #d1d5db",[107,4397,2141],{"class":1147},[107,4399,4400],{"class":109,"line":3389},[107,4401,538],{"class":1147},[107,4403,4404],{"class":109,"line":3394},[107,4405,479],{"emptyLinePlaceholder":329},[107,4407,4408,4410],{"class":109,"line":3399},[107,4409,3791],{"class":1154},[107,4411,2125],{"class":1147},[107,4413,4414,4417,4419,4421],{"class":109,"line":3406},[107,4415,4416],{"class":1805}," box-sizing",[107,4418,2133],{"class":1147},[107,4420,2092],{"class":1805},[107,4422,2141],{"class":1147},[107,4424,4425,4427,4429,4431,4433,4435,4437],{"class":109,"line":3426},[107,4426,2245],{"class":1805},[107,4428,2133],{"class":1147},[107,4430,3802],{"class":1805},[107,4432,1269],{"class":1199},[107,4434,3807],{"class":1805},[107,4436,2262],{"class":1805},[107,4438,2141],{"class":1147},[107,4440,4441,4443,4445,4447],{"class":109,"line":3433},[107,4442,2283],{"class":1805},[107,4444,2133],{"class":1147},[107,4446,3844],{"class":1805},[107,4448,2141],{"class":1147},[107,4450,4451,4453,4455,4457],{"class":109,"line":3469},[107,4452,3668],{"class":1805},[107,4454,2133],{"class":1147},[107,4456,2296],{"class":1805},[107,4458,2141],{"class":1147},[107,4460,4461,4463,4465,4467,4469],{"class":109,"line":3504},[107,4462,2232],{"class":1805},[107,4464,2133],{"class":1147},[107,4466,3865],{"class":1805},[107,4468,1269],{"class":1199},[107,4470,2141],{"class":1147},[107,4472,4473,4475,4477,4479],{"class":109,"line":3521},[107,4474,3655],{"class":1805},[107,4476,2133],{"class":1147},[107,4478,3660],{"class":1805},[107,4480,2141],{"class":1147},[107,4482,4483,4485,4487,4489,4491],{"class":109,"line":3526},[107,4484,3640],{"class":1805},[107,4486,2133],{"class":1147},[107,4488,3645],{"class":1805},[107,4490,1269],{"class":1199},[107,4492,2141],{"class":1147},[107,4494,4495],{"class":109,"line":3531},[107,4496,538],{"class":1147},[107,4498,4499,4501,4503],{"class":109,"line":3540},[107,4500,1207],{"class":1147},[107,4502,311],{"class":1151},[107,4504,1170],{"class":1147},[37,4506,274],{"id":274},[760,4508,4509,4522],{},[387,4510,4511,4514,4515,4517,4518,4517,4520],{},[24,4512,4513],{},"无素材、要动效"," → 双层 ",[19,4516,1497],{}," + ",[19,4519,2096],{},[19,4521,2102],{},[387,4523,4524,661,4527,4529,4530,4533,4534,4536],{},[24,4525,4526],{},"有切图、要质感",[19,4528,2058],{}," + 合适的 ",[19,4531,4532],{},"slice"," 与 ",[19,4535,3773],{}," 模式",[15,4538,4539],{},"两者可以组合：内容区用纯色或渐变，边框区分别用 CSS 条纹或图片切片。选哪种取决于设计稿有没有现成九宫格素材。",[311,4541,4542],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":85,"searchDepth":122,"depth":122,"links":4544},[4545,4546,4547],{"id":2062,"depth":116,"text":2063},{"id":3692,"depth":116,"text":3693},{"id":274,"depth":116,"text":274},"2026-05-15","用双层 background 实现会动的条纹边框，或用 border-image 切片装饰图做自适应边框。",{},"\u002Fblog\u002Fcss-border-tricks",{"title":2037,"description":4549},"blog\u002Fcss-border-tricks",[2069,4555,2058],"animation","8YZziFPovjlIbtJigRJMhVdL1HGrqD3ngLg-jPkvETc",{"id":4558,"title":4559,"body":4560,"category":2110,"date":5884,"description":5885,"draft":326,"extension":327,"meta":5886,"navigation":329,"path":1288,"seo":5887,"stem":5888,"tags":5889,"__hash__":5892},"blog\u002Fblog\u002Fcss-containing-block.md","你不知道的 CSS 之包含块",{"type":8,"value":4561,"toc":5874},[4562,4565,4582,4588,4601,4607,4617,4621,4686,4790,4808,4814,4820,4823,4834,4852,4856,4921,4925,5009,5221,5238,5244,5248,5258,5297,5306,5338,5346,5352,5361,5367,5370,5571,5574,5628,5647,5650,5700,5713,5737,5743,5793,5817,5825,5831,5833,5871],[11,4563,4559],{"id":4564},"你不知道的-css-之包含块",[15,4566,4567,4568,4570,4571,4574,4575,1027,4578,4581],{},"盒模型、",[19,4569,2092],{}," 很多人熟，但 ",[24,4572,4573],{},"包含块（containing block）"," 一听就懵——它平时「看不见」，却决定 ",[19,4576,4577],{},"width: 50%",[19,4579,4580],{},"left: 10px"," 相对谁算。",[15,4583,4584],{},[828,4585],{"alt":4586,"src":4587},"包含块决定元素的尺寸与百分比参照区域","\u002Fdemos\u002Fcontaining-block\u002Fconcept.svg",[15,4589,4590,4591,4594,4595,309],{},"简单说：",[24,4592,4593],{},"元素的尺寸与位置（以及百分比值的计算）受包含块影响。"," 规范见 ",[264,4596,4600],{"href":4597,"rel":4598},"https:\u002F\u002Fdrafts.csswg.org\u002Fcss2\u002F#containing-block-details",[4599],"nofollow","CSS2 containing block",[15,4602,4603],{},[828,4604],{"alt":4605,"src":4606},"不同定位方式下的包含块规则","\u002Fdemos\u002Fcontaining-block\u002Frules-overview.svg",[15,4608,4609,4610,4613,4614,4616],{},"在 ",[264,4611,4612],{"href":1670},"浏览器布局阶段","，几何信息就是结合 DOM、Computed Style 与包含块算出来的；",[264,4615,886],{"href":1276}," 里算不定的百分比宽高，到这一步才定稿。",[37,4618,4620],{"id":4619},"最简例子50-相对谁","最简例子：50% 相对谁？",[77,4622,4624],{"className":1139,"code":4623,"language":1135,"meta":85,"style":85},"\u003Cbody>\n \u003Cdiv class=\"container\">\n \u003Cdiv class=\"item\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fbody>\n",[19,4625,4626,4635,4650,4670,4678],{"__ignoreMap":85},[107,4627,4628,4630,4633],{"class":109,"line":110},[107,4629,1148],{"class":1147},[107,4631,4632],{"class":1151},"body",[107,4634,1170],{"class":1147},[107,4636,4637,4639,4641,4643,4645,4648],{"class":109,"line":116},[107,4638,2670],{"class":1147},[107,4640,2673],{"class":1151},[107,4642,2676],{"class":1154},[107,4644,1158],{"class":1147},[107,4646,4647],{"class":1161},"\"container\"",[107,4649,1170],{"class":1147},[107,4651,4652,4654,4656,4658,4660,4663,4666,4668],{"class":109,"line":122},[107,4653,2688],{"class":1147},[107,4655,2673],{"class":1151},[107,4657,2676],{"class":1154},[107,4659,1158],{"class":1147},[107,4661,4662],{"class":1161},"\"item\"",[107,4664,4665],{"class":1147},">\u003C\u002F",[107,4667,2673],{"class":1151},[107,4669,1170],{"class":1147},[107,4671,4672,4674,4676],{"class":109,"line":128},[107,4673,2743],{"class":1147},[107,4675,2673],{"class":1151},[107,4677,1170],{"class":1147},[107,4679,4680,4682,4684],{"class":109,"line":134},[107,4681,1207],{"class":1147},[107,4683,4632],{"class":1151},[107,4685,1170],{"class":1147},[77,4687,4689],{"className":2114,"code":4688,"language":2110,"meta":85,"style":85},".container {\n width: 500px;\n height: 300px;\n background-color: skyblue;\n}\n\n.item {\n width: 50%;\n height: 50%;\n background-color: red;\n}\n",[19,4690,4691,4698,4711,4725,4737,4741,4745,4752,4764,4776,4786],{"__ignoreMap":85},[107,4692,4693,4696],{"class":109,"line":110},[107,4694,4695],{"class":1154},".container",[107,4697,2125],{"class":1147},[107,4699,4700,4702,4704,4707,4709],{"class":109,"line":116},[107,4701,2976],{"class":1805},[107,4703,2133],{"class":1147},[107,4705,4706],{"class":1805},"500",[107,4708,1269],{"class":1199},[107,4710,2141],{"class":1147},[107,4712,4713,4716,4718,4721,4723],{"class":109,"line":122},[107,4714,4715],{"class":1805}," height",[107,4717,2133],{"class":1147},[107,4719,4720],{"class":1805},"300",[107,4722,1269],{"class":1199},[107,4724,2141],{"class":1147},[107,4726,4727,4730,4732,4735],{"class":109,"line":128},[107,4728,4729],{"class":1805}," background-color",[107,4731,2133],{"class":1147},[107,4733,4734],{"class":1805},"skyblue",[107,4736,2141],{"class":1147},[107,4738,4739],{"class":109,"line":134},[107,4740,538],{"class":1147},[107,4742,4743],{"class":109,"line":140},[107,4744,479],{"emptyLinePlaceholder":329},[107,4746,4747,4750],{"class":109,"line":470},[107,4748,4749],{"class":1154},".item",[107,4751,2125],{"class":1147},[107,4753,4754,4756,4758,4760,4762],{"class":109,"line":476},[107,4755,2976],{"class":1805},[107,4757,2133],{"class":1147},[107,4759,3802],{"class":1805},[107,4761,1942],{"class":1199},[107,4763,2141],{"class":1147},[107,4765,4766,4768,4770,4772,4774],{"class":109,"line":482},[107,4767,4715],{"class":1805},[107,4769,2133],{"class":1147},[107,4771,3802],{"class":1805},[107,4773,1942],{"class":1199},[107,4775,2141],{"class":1147},[107,4777,4778,4780,4782,4784],{"class":109,"line":488},[107,4779,4729],{"class":1805},[107,4781,2133],{"class":1147},[107,4783,1258],{"class":1805},[107,4785,2141],{"class":1147},[107,4787,4788],{"class":109,"line":494},[107,4789,538],{"class":1147},[15,4791,4792,4795,4796,4799,4800,4803,4804,4807],{},[19,4793,4794],{},"item"," 是 250×150？对。但更准确的说法是：",[24,4797,4798],{},"百分比相对包含块","。这里包含块是最近祖先块容器的 ",[24,4801,4802],{},"内容区（content box）","——即 ",[19,4805,4806],{},"container"," 的内容区 500×300，50% 才是 250×150。",[15,4809,4810],{},[828,4811],{"alt":4812,"src":4813},"50% 相对 container 内容区，结果为 250×150","\u002Fdemos\u002Fcontaining-block\u002Fpercent-demo.svg",[15,4815,4816,4817,309],{},"平时说「相对父元素宽高」多半没错，但严谨表述是 ",[24,4818,4819],{},"相对包含块",[37,4821,4822],{"id":4822},"初始包含块",[15,4824,4825,4830,4831,738],{},[24,4826,4827,4828],{},"根元素 ",[19,4829,1135],{}," 的包含块叫 ",[24,4832,4833],{},"初始包含块（initial containing block）",[760,4835,4836,4842,4845],{},[387,4837,4838,4839],{},"大小通常等于 ",[24,4840,4841],{},"视口（viewport）",[387,4843,4844],{},"原点在视口左上角",[387,4846,4847,4848,4851],{},"是 ",[24,4849,4850],{},"绝对定位、固定定位"," 的重要参照",[37,4853,4855],{"id":4854},"非根元素怎么找包含块","非根元素：怎么找包含块？",[173,4857,4858,4870],{},[176,4859,4860],{},[179,4861,4862,4867],{},[182,4863,4864],{},[19,4865,4866],{},"position",[182,4868,4869],{},"包含块由谁建立",[192,4871,4872,4893,4903],{},[179,4873,4874,4882],{},[197,4875,4876,1357,4879],{},[19,4877,4878],{},"static",[19,4880,4881],{},"relative",[197,4883,4884,4885,4888,4889,4892],{},"最近 ",[24,4886,4887],{},"块容器"," 的 ",[24,4890,4891],{},"内容区"," 边缘",[179,4894,4895,4900],{},[197,4896,4897],{},[19,4898,4899],{},"fixed",[197,4901,4902],{},"视口（初始包含块）",[179,4904,4905,4910],{},[197,4906,4907],{},[19,4908,4909],{},"absolute",[197,4911,4884,4912,4914,4915,4917,4918,4892],{},[19,4913,4866],{}," 不为 ",[19,4916,4878],{}," 的祖先的 ",[24,4919,4920],{},"padding 区",[63,4922,4924],{"id":4923},"absolute-不看父元素看定位祖先","absolute 不看「父元素」，看「定位祖先」",[77,4926,4928],{"className":1139,"code":4927,"language":1135,"meta":85,"style":85},"\u003Cbody>\n \u003Cdiv class=\"container\">\n \u003Cdiv class=\"item\">\n \u003Cdiv class=\"item2\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fbody>\n",[19,4929,4930,4938,4952,4966,4985,4993,5001],{"__ignoreMap":85},[107,4931,4932,4934,4936],{"class":109,"line":110},[107,4933,1148],{"class":1147},[107,4935,4632],{"class":1151},[107,4937,1170],{"class":1147},[107,4939,4940,4942,4944,4946,4948,4950],{"class":109,"line":116},[107,4941,2670],{"class":1147},[107,4943,2673],{"class":1151},[107,4945,2676],{"class":1154},[107,4947,1158],{"class":1147},[107,4949,4647],{"class":1161},[107,4951,1170],{"class":1147},[107,4953,4954,4956,4958,4960,4962,4964],{"class":109,"line":122},[107,4955,2688],{"class":1147},[107,4957,2673],{"class":1151},[107,4959,2676],{"class":1154},[107,4961,1158],{"class":1147},[107,4963,4662],{"class":1161},[107,4965,1170],{"class":1147},[107,4967,4968,4970,4972,4974,4976,4979,4981,4983],{"class":109,"line":128},[107,4969,2704],{"class":1147},[107,4971,2673],{"class":1151},[107,4973,2676],{"class":1154},[107,4975,1158],{"class":1147},[107,4977,4978],{"class":1161},"\"item2\"",[107,4980,4665],{"class":1147},[107,4982,2673],{"class":1151},[107,4984,1170],{"class":1147},[107,4986,4987,4989,4991],{"class":109,"line":134},[107,4988,2734],{"class":1147},[107,4990,2673],{"class":1151},[107,4992,1170],{"class":1147},[107,4994,4995,4997,4999],{"class":109,"line":140},[107,4996,2743],{"class":1147},[107,4998,2673],{"class":1151},[107,5000,1170],{"class":1147},[107,5002,5003,5005,5007],{"class":109,"line":470},[107,5004,1207],{"class":1147},[107,5006,4632],{"class":1151},[107,5008,1170],{"class":1147},[77,5010,5012],{"className":2114,"code":5011,"language":2110,"meta":85,"style":85},".container {\n width: 500px;\n height: 300px;\n background-color: skyblue;\n position: relative;\n}\n\n.item {\n width: 300px;\n height: 150px;\n border: 5px solid;\n margin-left: 100px;\n}\n\n.item2 {\n width: 100px;\n height: 100px;\n background-color: red;\n position: absolute;\n left: 10px;\n top: 10px;\n}\n",[19,5013,5014,5020,5032,5044,5054,5065,5069,5073,5079,5091,5104,5119,5132,5136,5140,5147,5159,5171,5181,5191,5204,5217],{"__ignoreMap":85},[107,5015,5016,5018],{"class":109,"line":110},[107,5017,4695],{"class":1154},[107,5019,2125],{"class":1147},[107,5021,5022,5024,5026,5028,5030],{"class":109,"line":116},[107,5023,2976],{"class":1805},[107,5025,2133],{"class":1147},[107,5027,4706],{"class":1805},[107,5029,1269],{"class":1199},[107,5031,2141],{"class":1147},[107,5033,5034,5036,5038,5040,5042],{"class":109,"line":122},[107,5035,4715],{"class":1805},[107,5037,2133],{"class":1147},[107,5039,4720],{"class":1805},[107,5041,1269],{"class":1199},[107,5043,2141],{"class":1147},[107,5045,5046,5048,5050,5052],{"class":109,"line":128},[107,5047,4729],{"class":1805},[107,5049,2133],{"class":1147},[107,5051,4734],{"class":1805},[107,5053,2141],{"class":1147},[107,5055,5056,5059,5061,5063],{"class":109,"line":134},[107,5057,5058],{"class":1805}," position",[107,5060,2133],{"class":1147},[107,5062,4881],{"class":1805},[107,5064,2141],{"class":1147},[107,5066,5067],{"class":109,"line":140},[107,5068,538],{"class":1147},[107,5070,5071],{"class":109,"line":470},[107,5072,479],{"emptyLinePlaceholder":329},[107,5074,5075,5077],{"class":109,"line":476},[107,5076,4749],{"class":1154},[107,5078,2125],{"class":1147},[107,5080,5081,5083,5085,5087,5089],{"class":109,"line":482},[107,5082,2976],{"class":1805},[107,5084,2133],{"class":1147},[107,5086,4720],{"class":1805},[107,5088,1269],{"class":1199},[107,5090,2141],{"class":1147},[107,5092,5093,5095,5097,5100,5102],{"class":109,"line":488},[107,5094,4715],{"class":1805},[107,5096,2133],{"class":1147},[107,5098,5099],{"class":1805},"150",[107,5101,1269],{"class":1199},[107,5103,2141],{"class":1147},[107,5105,5106,5108,5110,5113,5115,5117],{"class":109,"line":494},[107,5107,2245],{"class":1805},[107,5109,2133],{"class":1147},[107,5111,5112],{"class":1805},"5",[107,5114,1269],{"class":1199},[107,5116,3807],{"class":1805},[107,5118,2141],{"class":1147},[107,5120,5121,5124,5126,5128,5130],{"class":109,"line":500},[107,5122,5123],{"class":1805}," margin-left",[107,5125,2133],{"class":1147},[107,5127,2986],{"class":1805},[107,5129,1269],{"class":1199},[107,5131,2141],{"class":1147},[107,5133,5134],{"class":109,"line":506},[107,5135,538],{"class":1147},[107,5137,5138],{"class":109,"line":512},[107,5139,479],{"emptyLinePlaceholder":329},[107,5141,5142,5145],{"class":109,"line":518},[107,5143,5144],{"class":1154},".item2",[107,5146,2125],{"class":1147},[107,5148,5149,5151,5153,5155,5157],{"class":109,"line":524},[107,5150,2976],{"class":1805},[107,5152,2133],{"class":1147},[107,5154,2986],{"class":1805},[107,5156,1269],{"class":1199},[107,5158,2141],{"class":1147},[107,5160,5161,5163,5165,5167,5169],{"class":109,"line":529},[107,5162,4715],{"class":1805},[107,5164,2133],{"class":1147},[107,5166,2986],{"class":1805},[107,5168,1269],{"class":1199},[107,5170,2141],{"class":1147},[107,5172,5173,5175,5177,5179],{"class":109,"line":535},[107,5174,4729],{"class":1805},[107,5176,2133],{"class":1147},[107,5178,1258],{"class":1805},[107,5180,2141],{"class":1147},[107,5182,5183,5185,5187,5189],{"class":109,"line":2481},[107,5184,5058],{"class":1805},[107,5186,2133],{"class":1147},[107,5188,4909],{"class":1805},[107,5190,2141],{"class":1147},[107,5192,5193,5196,5198,5200,5202],{"class":109,"line":2487},[107,5194,5195],{"class":1805}," left",[107,5197,2133],{"class":1147},[107,5199,2181],{"class":1805},[107,5201,1269],{"class":1199},[107,5203,2141],{"class":1147},[107,5205,5206,5209,5211,5213,5215],{"class":109,"line":2495},[107,5207,5208],{"class":1805}," top",[107,5210,2133],{"class":1147},[107,5212,2181],{"class":1805},[107,5214,1269],{"class":1199},[107,5216,2141],{"class":1147},[107,5218,5219],{"class":109,"line":2500},[107,5220,538],{"class":1147},[15,5222,5223,5226,5227,5231,5232,5235,5236,738],{},[19,5224,5225],{},"item2"," 的包含块是 ",[24,5228,5229],{},[19,5230,4806],{},"（有 ",[19,5233,5234],{},"position: relative","），不是中间的 ",[19,5237,4794],{},[15,5239,5240],{},[828,5241],{"alt":5242,"src":5243},"item2 的包含块是 container，而非中间的 item","\u002Fdemos\u002Fcontaining-block\u002Fabsolute-demo.svg",[63,5245,5247],{"id":5246},"transform-也会建立包含块","transform 也会建立包含块",[15,5249,5250,1357,5252,5254,5255,738],{},[19,5251,4909],{},[19,5253,4899],{}," 的包含块还可能是满足下列条件的 ",[24,5256,5257],{},"最近祖先的 padding 区",[760,5259,5260,5271,5280,5292],{},[387,5261,5262,1357,5264,5267,5268],{},[19,5263,1437],{},[19,5265,5266],{},"perspective"," 不是 ",[19,5269,5270],{},"none",[387,5272,5273,5275,5276,368,5278],{},[19,5274,1445],{}," 为 ",[19,5277,1437],{},[19,5279,5266],{},[387,5281,5282,5267,5285,5287,5288,5291],{},[19,5283,5284],{},"filter",[19,5286,5270],{},"（或 Firefox 下 ",[19,5289,5290],{},"will-change: filter","）",[387,5293,5294],{},[19,5295,5296],{},"contain: paint",[15,5298,5299,5300,5302,5303,738],{},"给 ",[19,5301,4794],{}," 加上 ",[19,5304,5305],{},"transform: rotate(0deg)",[77,5307,5309],{"className":2114,"code":5308,"language":2110,"meta":85,"style":85},".item {\n transform: rotate(0deg);\n}\n",[19,5310,5311,5317,5334],{"__ignoreMap":85},[107,5312,5313,5315],{"class":109,"line":110},[107,5314,4749],{"class":1154},[107,5316,2125],{"class":1147},[107,5318,5319,5321,5323,5326,5328,5330,5332],{"class":109,"line":116},[107,5320,3409],{"class":1805},[107,5322,2133],{"class":1147},[107,5324,5325],{"class":1805},"rotate",[107,5327,1190],{"class":1147},[107,5329,3260],{"class":1805},[107,5331,2324],{"class":1199},[107,5333,2171],{"class":1147},[107,5335,5336],{"class":109,"line":122},[107,5337,538],{"class":1147},[15,5339,5340,5341,5345],{},"包含块变为 ",[24,5342,5343],{},[19,5344,4794],{}," 自身：",[15,5347,5348],{},[828,5349],{"alt":5350,"src":5351},"transform 在 item 上建立新的包含块","\u002Fdemos\u002Fcontaining-block\u002Ftransform-demo.svg",[15,5353,5354,5355,5357,5358,309],{},"这也是 ",[19,5356,1437],{}," 常和层叠、合成一起讨论的原因——不仅影响包含块，还影响 ",[264,5359,5360],{"href":1670},"分层与绘制",[15,5362,5363],{},[828,5364],{"alt":5365,"src":5366},"包含块知识要点一览","\u002Fdemos\u002Fcontaining-block\u002Fsummary-map.svg",[37,5368,5369],{"id":5369},"规范例题",[77,5371,5373],{"className":1139,"code":5372,"language":1135,"meta":85,"style":85},"\u003Chtml>\n \u003Chead>\n \u003Ctitle>Illustration of containing blocks\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody id=\"body\">\n \u003Cdiv id=\"div1\">\n \u003Cp id=\"p1\">This is text in the first paragraph...\u003C\u002Fp>\n \u003Cp id=\"p2\">\n This is text\n \u003Cem id=\"em1\">\n in the\n \u003Cstrong id=\"strong1\">second\u003C\u002Fstrong>\n paragraph.\n \u003C\u002Fem>\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[19,5374,5375,5383,5392,5406,5414,5429,5444,5464,5479,5484,5499,5504,5525,5530,5539,5547,5555,5563],{"__ignoreMap":85},[107,5376,5377,5379,5381],{"class":109,"line":110},[107,5378,1148],{"class":1147},[107,5380,1135],{"class":1151},[107,5382,1170],{"class":1147},[107,5384,5385,5387,5390],{"class":109,"line":116},[107,5386,2670],{"class":1147},[107,5388,5389],{"class":1151},"head",[107,5391,1170],{"class":1147},[107,5393,5394,5396,5399,5402,5404],{"class":109,"line":122},[107,5395,2688],{"class":1147},[107,5397,5398],{"class":1151},"title",[107,5400,5401],{"class":1147},">Illustration of containing blocks\u003C\u002F",[107,5403,5398],{"class":1151},[107,5405,1170],{"class":1147},[107,5407,5408,5410,5412],{"class":109,"line":128},[107,5409,2743],{"class":1147},[107,5411,5389],{"class":1151},[107,5413,1170],{"class":1147},[107,5415,5416,5418,5420,5422,5424,5427],{"class":109,"line":134},[107,5417,2670],{"class":1147},[107,5419,4632],{"class":1151},[107,5421,1155],{"class":1154},[107,5423,1158],{"class":1147},[107,5425,5426],{"class":1161},"\"body\"",[107,5428,1170],{"class":1147},[107,5430,5431,5433,5435,5437,5439,5442],{"class":109,"line":140},[107,5432,2688],{"class":1147},[107,5434,2673],{"class":1151},[107,5436,1155],{"class":1154},[107,5438,1158],{"class":1147},[107,5440,5441],{"class":1161},"\"div1\"",[107,5443,1170],{"class":1147},[107,5445,5446,5448,5450,5452,5454,5457,5460,5462],{"class":109,"line":470},[107,5447,2704],{"class":1147},[107,5449,15],{"class":1151},[107,5451,1155],{"class":1154},[107,5453,1158],{"class":1147},[107,5455,5456],{"class":1161},"\"p1\"",[107,5458,5459],{"class":1147},">This is text in the first paragraph...\u003C\u002F",[107,5461,15],{"class":1151},[107,5463,1170],{"class":1147},[107,5465,5466,5468,5470,5472,5474,5477],{"class":109,"line":476},[107,5467,2704],{"class":1147},[107,5469,15],{"class":1151},[107,5471,1155],{"class":1154},[107,5473,1158],{"class":1147},[107,5475,5476],{"class":1161},"\"p2\"",[107,5478,1170],{"class":1147},[107,5480,5481],{"class":109,"line":482},[107,5482,5483],{"class":1147}," This is text\n",[107,5485,5486,5488,5490,5492,5494,5497],{"class":109,"line":488},[107,5487,3952],{"class":1147},[107,5489,1266],{"class":1151},[107,5491,1155],{"class":1154},[107,5493,1158],{"class":1147},[107,5495,5496],{"class":1161},"\"em1\"",[107,5498,1170],{"class":1147},[107,5500,5501],{"class":109,"line":494},[107,5502,5503],{"class":1147}," in the\n",[107,5505,5506,5509,5511,5513,5515,5518,5521,5523],{"class":109,"line":500},[107,5507,5508],{"class":1147}," \u003C",[107,5510,24],{"class":1151},[107,5512,1155],{"class":1154},[107,5514,1158],{"class":1147},[107,5516,5517],{"class":1161},"\"strong1\"",[107,5519,5520],{"class":1147},">second\u003C\u002F",[107,5522,24],{"class":1151},[107,5524,1170],{"class":1147},[107,5526,5527],{"class":109,"line":506},[107,5528,5529],{"class":1147}," paragraph.\n",[107,5531,5532,5535,5537],{"class":109,"line":512},[107,5533,5534],{"class":1147}," \u003C\u002F",[107,5536,1266],{"class":1151},[107,5538,1170],{"class":1147},[107,5540,5541,5543,5545],{"class":109,"line":518},[107,5542,2725],{"class":1147},[107,5544,15],{"class":1151},[107,5546,1170],{"class":1147},[107,5548,5549,5551,5553],{"class":109,"line":524},[107,5550,2734],{"class":1147},[107,5552,2673],{"class":1151},[107,5554,1170],{"class":1147},[107,5556,5557,5559,5561],{"class":109,"line":529},[107,5558,2743],{"class":1147},[107,5560,4632],{"class":1151},[107,5562,1170],{"class":1147},[107,5564,5565,5567,5569],{"class":109,"line":535},[107,5566,1207],{"class":1147},[107,5568,1135],{"class":1151},[107,5570,1170],{"class":1147},[15,5572,5573],{},"无额外 CSS 时：",[173,5575,5576,5585],{},[176,5577,5578],{},[179,5579,5580,5583],{},[182,5581,5582],{},"元素",[182,5584,1289],{},[192,5586,5587,5593,5599,5606,5613,5621],{},[179,5588,5589,5591],{},[197,5590,1135],{},[197,5592,4822],{},[179,5594,5595,5597],{},[197,5596,4632],{},[197,5598,1135],{},[179,5600,5601,5604],{},[197,5602,5603],{},"div1",[197,5605,4632],{},[179,5607,5608,5611],{},[197,5609,5610],{},"p1、p2",[197,5612,5603],{},[179,5614,5615,5618],{},[197,5616,5617],{},"em1",[197,5619,5620],{},"p2",[179,5622,5623,5626],{},[197,5624,5625],{},"strong1",[197,5627,5620],{},[15,5629,5630,5226,5632,5634,5635,5637,5638,5267,5640,5642,5643,5646],{},[19,5631,5625],{},[19,5633,5620],{}," 而非 ",[19,5636,5617],{},"，因为 ",[19,5639,5617],{},[24,5641,4887],{},"；规则要求 ",[24,5644,5645],{},"最近的块容器"," 的内容区。",[15,5648,5649],{},"加上：",[77,5651,5653],{"className":2114,"code":5652,"language":2110,"meta":85,"style":85},"#div1 {\n position: absolute;\n left: 50px;\n top: 50px;\n}\n",[19,5654,5655,5662,5672,5684,5696],{"__ignoreMap":85},[107,5656,5657,5660],{"class":109,"line":110},[107,5658,5659],{"class":1154},"#div1",[107,5661,2125],{"class":1147},[107,5663,5664,5666,5668,5670],{"class":109,"line":116},[107,5665,5058],{"class":1805},[107,5667,2133],{"class":1147},[107,5669,4909],{"class":1805},[107,5671,2141],{"class":1147},[107,5673,5674,5676,5678,5680,5682],{"class":109,"line":122},[107,5675,5195],{"class":1805},[107,5677,2133],{"class":1147},[107,5679,3802],{"class":1805},[107,5681,1269],{"class":1199},[107,5683,2141],{"class":1147},[107,5685,5686,5688,5690,5692,5694],{"class":109,"line":128},[107,5687,5208],{"class":1805},[107,5689,2133],{"class":1147},[107,5691,3802],{"class":1805},[107,5693,1269],{"class":1199},[107,5695,2141],{"class":1147},[107,5697,5698],{"class":109,"line":134},[107,5699,538],{"class":1147},[15,5701,5702,5704,5705,657,5707,5709,5710,5712],{},[19,5703,5603],{}," 的包含块变为 ",[24,5706,4822],{},[19,5708,4632],{}," 仍是 ",[19,5711,4878],{},"，向上找不到定位祖先）：",[173,5714,5715,5723],{},[176,5716,5717],{},[179,5718,5719,5721],{},[182,5720,5582],{},[182,5722,1289],{},[192,5724,5725,5731],{},[179,5726,5727,5729],{},[197,5728,5603],{},[197,5730,4822],{},[179,5732,5733,5735],{},[197,5734,5610],{},[197,5736,5603],{},[15,5738,5739,5740,5742],{},"再给 ",[19,5741,5617],{}," 定位：",[77,5744,5746],{"className":2114,"code":5745,"language":2110,"meta":85,"style":85},"#em1 {\n position: absolute;\n left: 100px;\n top: 100px;\n}\n",[19,5747,5748,5755,5765,5777,5789],{"__ignoreMap":85},[107,5749,5750,5753],{"class":109,"line":110},[107,5751,5752],{"class":1154},"#em1",[107,5754,2125],{"class":1147},[107,5756,5757,5759,5761,5763],{"class":109,"line":116},[107,5758,5058],{"class":1805},[107,5760,2133],{"class":1147},[107,5762,4909],{"class":1805},[107,5764,2141],{"class":1147},[107,5766,5767,5769,5771,5773,5775],{"class":109,"line":122},[107,5768,5195],{"class":1805},[107,5770,2133],{"class":1147},[107,5772,2986],{"class":1805},[107,5774,1269],{"class":1199},[107,5776,2141],{"class":1147},[107,5778,5779,5781,5783,5785,5787],{"class":109,"line":128},[107,5780,5208],{"class":1805},[107,5782,2133],{"class":1147},[107,5784,2986],{"class":1805},[107,5786,1269],{"class":1199},[107,5788,2141],{"class":1147},[107,5790,5791],{"class":109,"line":134},[107,5792,538],{"class":1147},[173,5794,5795,5803],{},[176,5796,5797],{},[179,5798,5799,5801],{},[182,5800,5582],{},[182,5802,1289],{},[192,5804,5805,5811],{},[179,5806,5807,5809],{},[197,5808,5617],{},[197,5810,5603],{},[179,5812,5813,5815],{},[197,5814,5625],{},[197,5816,5617],{},[15,5818,5819,5820],{},"更多示例见 MDN：",[264,5821,5824],{"href":5822,"rel":5823},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FContaining_block",[4599],"Containing block",[15,5826,5827],{},[828,5828],{"alt":5829,"src":5830},"规范例题中的 DOM 树与包含块关系","\u002Fdemos\u002Fcontaining-block\u002Fdom-tree.svg",[37,5832,274],{"id":274},[760,5834,5835,5840,5857,5866],{},[387,5836,5837,5839],{},[24,5838,1289],{}," 决定百分比与定位偏移的参照区域，不是笼统的「父元素」。",[387,5841,5842,1962,5844,5846,5847,1612,5849,5851,5852,1612,5854,5856],{},[19,5843,4878],{},[19,5845,4881],{}," 看最近块容器的 ",[24,5848,4891],{},[19,5850,4909],{}," 看定位祖先的 ",[24,5853,4920],{},[19,5855,4899],{}," 看视口。",[387,5858,5859,5861,5862,5865],{},[19,5860,1437],{}," 等属性会 ",[24,5863,5864],{},"新建包含块","，布局结果可能「突然变了」。",[387,5867,5868,5869,309],{},"布局阶段算几何信息时离不开包含块；改样式触发的 reflow 见 ",[264,5870,1400],{"href":1000},[311,5872,5873],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":85,"searchDepth":122,"depth":122,"links":5875},[5876,5877,5878,5882,5883],{"id":4619,"depth":116,"text":4620},{"id":4822,"depth":116,"text":4822},{"id":4854,"depth":116,"text":4855,"children":5879},[5880,5881],{"id":4923,"depth":122,"text":4924},{"id":5246,"depth":122,"text":5247},{"id":5369,"depth":116,"text":5369},{"id":274,"depth":116,"text":274},"2026-06-28","百分比宽高与绝对定位偏移到底相对谁算？搞懂 containing block 与初始包含块，布局阶段的几何信息才说得清。",{},{"title":4559,"description":5885},"blog\u002Fcss-containing-block",[5890,5891,799],"layout","containing-block","7-rbTxShL5j-yWfKcjpRnC_JvYeoy2-lO_1z13rrAsk",{"id":5894,"title":5895,"body":5896,"category":2110,"date":7197,"description":7198,"draft":326,"extension":327,"meta":7199,"navigation":329,"path":7200,"seo":7201,"stem":7202,"tags":7203,"__hash__":7205},"blog\u002Fblog\u002Fcss-flex-demo.md","Flexbox 布局实战",{"type":8,"value":5897,"toc":7192},[5898,5901,5908,5911,5936,6010,6013,6021,7183,7186,7189],[11,5899,5895],{"id":5900},"flexbox-布局实战",[15,5902,5903,5904,5907],{},"Flexbox 是前端布局的基础能力之一。下面演示如何用 ",[19,5905,5906],{},"display: flex"," 让内容在容器中居中。",[37,5909,5910],{"id":5910},"核心属性",[760,5912,5913,5918,5924,5930],{},[387,5914,5915,5917],{},[19,5916,5906],{}," 启用弹性布局",[387,5919,5920,5923],{},[19,5921,5922],{},"justify-content"," 控制主轴对齐",[387,5925,5926,5929],{},[19,5927,5928],{},"align-items"," 控制交叉轴对齐",[387,5931,5932,5935],{},[19,5933,5934],{},"gap"," 设置子项间距",[430,5937,5939],{"lang":2110,"title":5938},"基础 Flex 居中",[77,5940,5942],{"className":2114,"code":5941,"language":2110,"meta":85,"style":85},".container {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 200px;\n gap: 12px;\n}\n",[19,5943,5944,5950,5960,5971,5981,5994,6006],{"__ignoreMap":85},[107,5945,5946,5948],{"class":109,"line":110},[107,5947,4695],{"class":1154},[107,5949,2125],{"class":1147},[107,5951,5952,5954,5956,5958],{"class":109,"line":116},[107,5953,2782],{"class":1805},[107,5955,2133],{"class":1147},[107,5957,4269],{"class":1805},[107,5959,2141],{"class":1147},[107,5961,5962,5965,5967,5969],{"class":109,"line":122},[107,5963,5964],{"class":1805}," justify-content",[107,5966,2133],{"class":1147},[107,5968,2799],{"class":1805},[107,5970,2141],{"class":1147},[107,5972,5973,5975,5977,5979],{"class":109,"line":128},[107,5974,4276],{"class":1805},[107,5976,2133],{"class":1147},[107,5978,2799],{"class":1805},[107,5980,2141],{"class":1147},[107,5982,5983,5985,5987,5990,5992],{"class":109,"line":134},[107,5984,2806],{"class":1805},[107,5986,2133],{"class":1147},[107,5988,5989],{"class":1805},"200",[107,5991,1269],{"class":1199},[107,5993,2141],{"class":1147},[107,5995,5996,5998,6000,6002,6004],{"class":109,"line":140},[107,5997,4287],{"class":1805},[107,5999,2133],{"class":1147},[107,6001,2873],{"class":1805},[107,6003,1269],{"class":1199},[107,6005,2141],{"class":1147},[107,6007,6008],{"class":109,"line":470},[107,6009,538],{"class":1147},[37,6011,6012],{"id":6012},"交互演示",[15,6014,6015,6016,368,6018,6020],{},"修改 ",[19,6017,5922],{},[19,6019,5928],{},"，观察卡片排列变化：",[2648,6022,6024],{"title":6023},"Flex 卡片布局",[77,6025,6027],{"className":2653,"code":6026,"language":337,"meta":85,"style":85},"\u003Ctemplate>\n \u003Cdiv class=\"wrapper\">\n \u003Cdiv class=\"toolbar\">\n \u003Clabel>\n justify-content\n \u003Cselect v-model=\"justify\">\n \u003Coption value=\"flex-start\">flex-start\u003C\u002Foption>\n \u003Coption value=\"center\">center\u003C\u002Foption>\n \u003Coption value=\"flex-end\">flex-end\u003C\u002Foption>\n \u003Coption value=\"space-between\">space-between\u003C\u002Foption>\n \u003Coption value=\"space-around\">space-around\u003C\u002Foption>\n \u003Coption value=\"space-evenly\">space-evenly\u003C\u002Foption>\n \u003C\u002Fselect>\n \u003C\u002Flabel>\n \u003Clabel>\n align-items\n \u003Cselect v-model=\"align\">\n \u003Coption value=\"stretch\">stretch\u003C\u002Foption>\n \u003Coption value=\"flex-start\">flex-start\u003C\u002Foption>\n \u003Coption value=\"center\">center\u003C\u002Foption>\n \u003Coption value=\"flex-end\">flex-end\u003C\u002Foption>\n \u003Coption value=\"baseline\">baseline\u003C\u002Foption>\n \u003C\u002Fselect>\n \u003C\u002Flabel>\n \u003C\u002Fdiv>\n \u003Cdiv\n class=\"container\"\n :style=\"{ justifyContent: justify, alignItems: align }\"\n >\n \u003Cdiv v-for=\"item in cards\" :key=\"item\" class=\"card\">\n Card {{ item }}\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst justify = ref('center')\nconst align = ref('center')\nconst cards = [1, 2, 3]\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.wrapper {\n width: 100%;\n padding: 12px;\n font-family: sans-serif;\n box-sizing: border-box;\n}\n\n.toolbar {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\nlabel {\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-size: 11px;\n color: #475569;\n}\n\nselect {\n border: 1px solid #cbd5e1;\n border-radius: 6px;\n padding: 6px 8px;\n background: white;\n font-size: 11px;\n}\n\n.container {\n display: flex;\n flex-wrap: nowrap;\n width: 100%;\n box-sizing: border-box;\n gap: 8px;\n min-height: 160px;\n padding: 12px;\n border-radius: 12px;\n background: #f8fafc;\n border: 1px dashed #cbd5e1;\n}\n\n.card {\n flex: 0 0 auto;\n min-width: 56px;\n min-height: 48px;\n padding: 12px 10px;\n border-radius: 10px;\n background: linear-gradient(135deg, #38bdf8, #6366f1);\n color: white;\n font-weight: 600;\n font-size: 12px;\n text-align: center;\n}\n\u003C\u002Fstyle>\n",[19,6028,6029,6037,6052,6066,6074,6079,6094,6114,6134,6154,6174,6194,6214,6222,6230,6238,6243,6258,6276,6294,6312,6330,6350,6358,6366,6374,6381,6391,6401,6406,6435,6440,6448,6456,6464,6472,6476,6486,6497,6501,6519,6536,6562,6570,6574,6584,6591,6603,6615,6627,6637,6641,6645,6651,6661,6673,6685,6697,6701,6705,6711,6721,6733,6745,6758,6769,6773,6777,6783,6800,6812,6828,6840,6853,6858,6863,6870,6881,6893,6906,6917,6930,6944,6957,6970,6982,7000,7005,7010,7017,7034,7049,7063,7080,7093,7120,7131,7144,7157,7169,7174],{"__ignoreMap":85},[107,6030,6031,6033,6035],{"class":109,"line":110},[107,6032,1148],{"class":1147},[107,6034,2663],{"class":1151},[107,6036,1170],{"class":1147},[107,6038,6039,6041,6043,6045,6047,6050],{"class":109,"line":116},[107,6040,2670],{"class":1147},[107,6042,2673],{"class":1151},[107,6044,2676],{"class":1154},[107,6046,1158],{"class":1147},[107,6048,6049],{"class":1161},"\"wrapper\"",[107,6051,1170],{"class":1147},[107,6053,6054,6056,6058,6060,6062,6064],{"class":109,"line":122},[107,6055,2688],{"class":1147},[107,6057,2673],{"class":1151},[107,6059,2676],{"class":1154},[107,6061,1158],{"class":1147},[107,6063,3923],{"class":1161},[107,6065,1170],{"class":1147},[107,6067,6068,6070,6072],{"class":109,"line":128},[107,6069,2704],{"class":1147},[107,6071,3916],{"class":1151},[107,6073,1170],{"class":1147},[107,6075,6076],{"class":109,"line":134},[107,6077,6078],{"class":1147}," justify-content\n",[107,6080,6081,6083,6085,6087,6089,6092],{"class":109,"line":140},[107,6082,3952],{"class":1147},[107,6084,3937],{"class":1151},[107,6086,3940],{"class":1154},[107,6088,1158],{"class":1147},[107,6090,6091],{"class":1161},"\"justify\"",[107,6093,1170],{"class":1147},[107,6095,6096,6098,6100,6102,6104,6107,6110,6112],{"class":109,"line":470},[107,6097,5508],{"class":1147},[107,6099,3955],{"class":1151},[107,6101,3958],{"class":1154},[107,6103,1158],{"class":1147},[107,6105,6106],{"class":1161},"\"flex-start\"",[107,6108,6109],{"class":1147},">flex-start\u003C\u002F",[107,6111,3955],{"class":1151},[107,6113,1170],{"class":1147},[107,6115,6116,6118,6120,6122,6124,6127,6130,6132],{"class":109,"line":476},[107,6117,5508],{"class":1147},[107,6119,3955],{"class":1151},[107,6121,3958],{"class":1154},[107,6123,1158],{"class":1147},[107,6125,6126],{"class":1161},"\"center\"",[107,6128,6129],{"class":1147},">center\u003C\u002F",[107,6131,3955],{"class":1151},[107,6133,1170],{"class":1147},[107,6135,6136,6138,6140,6142,6144,6147,6150,6152],{"class":109,"line":482},[107,6137,5508],{"class":1147},[107,6139,3955],{"class":1151},[107,6141,3958],{"class":1154},[107,6143,1158],{"class":1147},[107,6145,6146],{"class":1161},"\"flex-end\"",[107,6148,6149],{"class":1147},">flex-end\u003C\u002F",[107,6151,3955],{"class":1151},[107,6153,1170],{"class":1147},[107,6155,6156,6158,6160,6162,6164,6167,6170,6172],{"class":109,"line":488},[107,6157,5508],{"class":1147},[107,6159,3955],{"class":1151},[107,6161,3958],{"class":1154},[107,6163,1158],{"class":1147},[107,6165,6166],{"class":1161},"\"space-between\"",[107,6168,6169],{"class":1147},">space-between\u003C\u002F",[107,6171,3955],{"class":1151},[107,6173,1170],{"class":1147},[107,6175,6176,6178,6180,6182,6184,6187,6190,6192],{"class":109,"line":494},[107,6177,5508],{"class":1147},[107,6179,3955],{"class":1151},[107,6181,3958],{"class":1154},[107,6183,1158],{"class":1147},[107,6185,6186],{"class":1161},"\"space-around\"",[107,6188,6189],{"class":1147},">space-around\u003C\u002F",[107,6191,3955],{"class":1151},[107,6193,1170],{"class":1147},[107,6195,6196,6198,6200,6202,6204,6207,6210,6212],{"class":109,"line":500},[107,6197,5508],{"class":1147},[107,6199,3955],{"class":1151},[107,6201,3958],{"class":1154},[107,6203,1158],{"class":1147},[107,6205,6206],{"class":1161},"\"space-evenly\"",[107,6208,6209],{"class":1147},">space-evenly\u003C\u002F",[107,6211,3955],{"class":1151},[107,6213,1170],{"class":1147},[107,6215,6216,6218,6220],{"class":109,"line":506},[107,6217,5534],{"class":1147},[107,6219,3937],{"class":1151},[107,6221,1170],{"class":1147},[107,6223,6224,6226,6228],{"class":109,"line":512},[107,6225,2725],{"class":1147},[107,6227,3916],{"class":1151},[107,6229,1170],{"class":1147},[107,6231,6232,6234,6236],{"class":109,"line":518},[107,6233,2704],{"class":1147},[107,6235,3916],{"class":1151},[107,6237,1170],{"class":1147},[107,6239,6240],{"class":109,"line":524},[107,6241,6242],{"class":1147}," align-items\n",[107,6244,6245,6247,6249,6251,6253,6256],{"class":109,"line":529},[107,6246,3952],{"class":1147},[107,6248,3937],{"class":1151},[107,6250,3940],{"class":1154},[107,6252,1158],{"class":1147},[107,6254,6255],{"class":1161},"\"align\"",[107,6257,1170],{"class":1147},[107,6259,6260,6262,6264,6266,6268,6270,6272,6274],{"class":109,"line":535},[107,6261,5508],{"class":1147},[107,6263,3955],{"class":1151},[107,6265,3958],{"class":1154},[107,6267,1158],{"class":1147},[107,6269,4002],{"class":1161},[107,6271,4005],{"class":1147},[107,6273,3955],{"class":1151},[107,6275,1170],{"class":1147},[107,6277,6278,6280,6282,6284,6286,6288,6290,6292],{"class":109,"line":2481},[107,6279,5508],{"class":1147},[107,6281,3955],{"class":1151},[107,6283,3958],{"class":1154},[107,6285,1158],{"class":1147},[107,6287,6106],{"class":1161},[107,6289,6109],{"class":1147},[107,6291,3955],{"class":1151},[107,6293,1170],{"class":1147},[107,6295,6296,6298,6300,6302,6304,6306,6308,6310],{"class":109,"line":2487},[107,6297,5508],{"class":1147},[107,6299,3955],{"class":1151},[107,6301,3958],{"class":1154},[107,6303,1158],{"class":1147},[107,6305,6126],{"class":1161},[107,6307,6129],{"class":1147},[107,6309,3955],{"class":1151},[107,6311,1170],{"class":1147},[107,6313,6314,6316,6318,6320,6322,6324,6326,6328],{"class":109,"line":2495},[107,6315,5508],{"class":1147},[107,6317,3955],{"class":1151},[107,6319,3958],{"class":1154},[107,6321,1158],{"class":1147},[107,6323,6146],{"class":1161},[107,6325,6149],{"class":1147},[107,6327,3955],{"class":1151},[107,6329,1170],{"class":1147},[107,6331,6332,6334,6336,6338,6340,6343,6346,6348],{"class":109,"line":2500},[107,6333,5508],{"class":1147},[107,6335,3955],{"class":1151},[107,6337,3958],{"class":1154},[107,6339,1158],{"class":1147},[107,6341,6342],{"class":1161},"\"baseline\"",[107,6344,6345],{"class":1147},">baseline\u003C\u002F",[107,6347,3955],{"class":1151},[107,6349,1170],{"class":1147},[107,6351,6352,6354,6356],{"class":109,"line":2505},[107,6353,5534],{"class":1147},[107,6355,3937],{"class":1151},[107,6357,1170],{"class":1147},[107,6359,6360,6362,6364],{"class":109,"line":2513},[107,6361,2725],{"class":1147},[107,6363,3916],{"class":1151},[107,6365,1170],{"class":1147},[107,6367,6368,6370,6372],{"class":109,"line":2536},[107,6369,2734],{"class":1147},[107,6371,2673],{"class":1151},[107,6373,1170],{"class":1147},[107,6375,6376,6378],{"class":109,"line":2541},[107,6377,2688],{"class":1147},[107,6379,6380],{"class":1151},"div\n",[107,6382,6383,6386,6388],{"class":109,"line":2546},[107,6384,6385],{"class":1154}," class",[107,6387,1158],{"class":1147},[107,6389,6390],{"class":1161},"\"container\"\n",[107,6392,6393,6396,6398],{"class":109,"line":2556},[107,6394,6395],{"class":1154}," :style",[107,6397,1158],{"class":1147},[107,6399,6400],{"class":1161},"\"{ justifyContent: justify, alignItems: align }\"\n",[107,6402,6403],{"class":109,"line":2564},[107,6404,6405],{"class":1147}," >\n",[107,6407,6408,6410,6412,6415,6417,6420,6423,6425,6427,6429,6431,6433],{"class":109,"line":2572},[107,6409,2704],{"class":1147},[107,6411,2673],{"class":1151},[107,6413,6414],{"class":1154}," v-for",[107,6416,1158],{"class":1147},[107,6418,6419],{"class":1161},"\"item in cards\"",[107,6421,6422],{"class":1154}," :key",[107,6424,1158],{"class":1147},[107,6426,4662],{"class":1161},[107,6428,2676],{"class":1154},[107,6430,1158],{"class":1147},[107,6432,2697],{"class":1161},[107,6434,1170],{"class":1147},[107,6436,6437],{"class":109,"line":2582},[107,6438,6439],{"class":1147}," Card {{ item }}\n",[107,6441,6442,6444,6446],{"class":109,"line":2622},[107,6443,2725],{"class":1147},[107,6445,2673],{"class":1151},[107,6447,1170],{"class":1147},[107,6449,6450,6452,6454],{"class":109,"line":2627},[107,6451,2734],{"class":1147},[107,6453,2673],{"class":1151},[107,6455,1170],{"class":1147},[107,6457,6458,6460,6462],{"class":109,"line":3086},[107,6459,2743],{"class":1147},[107,6461,2673],{"class":1151},[107,6463,1170],{"class":1147},[107,6465,6466,6468,6470],{"class":109,"line":3095},[107,6467,1207],{"class":1147},[107,6469,2663],{"class":1151},[107,6471,1170],{"class":1147},[107,6473,6474],{"class":109,"line":3110},[107,6475,479],{"emptyLinePlaceholder":329},[107,6477,6478,6480,6482,6484],{"class":109,"line":3145},[107,6479,1148],{"class":1147},[107,6481,1177],{"class":1151},[107,6483,4090],{"class":1154},[107,6485,1170],{"class":1147},[107,6487,6488,6490,6493,6495],{"class":109,"line":3172},[107,6489,4097],{"class":1199},[107,6491,6492],{"class":1147}," { ref } ",[107,6494,4103],{"class":1199},[107,6496,4106],{"class":1161},[107,6498,6499],{"class":109,"line":3201},[107,6500,479],{"emptyLinePlaceholder":329},[107,6502,6503,6505,6508,6510,6512,6514,6517],{"class":109,"line":3240},[107,6504,4115],{"class":1199},[107,6506,6507],{"class":1805}," justify",[107,6509,4121],{"class":1199},[107,6511,4124],{"class":1154},[107,6513,1190],{"class":1147},[107,6515,6516],{"class":1161},"'center'",[107,6518,2478],{"class":1147},[107,6520,6521,6523,6526,6528,6530,6532,6534],{"class":109,"line":3245},[107,6522,4115],{"class":1199},[107,6524,6525],{"class":1805}," align",[107,6527,4121],{"class":1199},[107,6529,4124],{"class":1154},[107,6531,1190],{"class":1147},[107,6533,6516],{"class":1161},[107,6535,2478],{"class":1147},[107,6537,6538,6540,6543,6545,6548,6550,6552,6554,6556,6559],{"class":109,"line":3252},[107,6539,4115],{"class":1199},[107,6541,6542],{"class":1805}," cards",[107,6544,4121],{"class":1199},[107,6546,6547],{"class":1147}," [",[107,6549,2522],{"class":1805},[107,6551,2299],{"class":1147},[107,6553,2221],{"class":1805},[107,6555,2299],{"class":1147},[107,6557,6558],{"class":1805},"3",[107,6560,6561],{"class":1147},"]\n",[107,6563,6564,6566,6568],{"class":109,"line":3273},[107,6565,1207],{"class":1147},[107,6567,1177],{"class":1151},[107,6569,1170],{"class":1147},[107,6571,6572],{"class":109,"line":3281},[107,6573,479],{"emptyLinePlaceholder":329},[107,6575,6576,6578,6580,6582],{"class":109,"line":3322},[107,6577,1148],{"class":1147},[107,6579,311],{"class":1151},[107,6581,2768],{"class":1154},[107,6583,1170],{"class":1147},[107,6585,6586,6589],{"class":109,"line":3361},[107,6587,6588],{"class":1154},".wrapper",[107,6590,2125],{"class":1147},[107,6592,6593,6595,6597,6599,6601],{"class":109,"line":3389},[107,6594,2976],{"class":1805},[107,6596,2133],{"class":1147},[107,6598,2986],{"class":1805},[107,6600,1942],{"class":1199},[107,6602,2141],{"class":1147},[107,6604,6605,6607,6609,6611,6613],{"class":109,"line":3394},[107,6606,2232],{"class":1805},[107,6608,2133],{"class":1147},[107,6610,2873],{"class":1805},[107,6612,1269],{"class":1199},[107,6614,2141],{"class":1147},[107,6616,6617,6620,6622,6625],{"class":109,"line":3399},[107,6618,6619],{"class":1805}," font-family",[107,6621,2133],{"class":1147},[107,6623,6624],{"class":1805},"sans-serif",[107,6626,2141],{"class":1147},[107,6628,6629,6631,6633,6635],{"class":109,"line":3406},[107,6630,4416],{"class":1805},[107,6632,2133],{"class":1147},[107,6634,2092],{"class":1805},[107,6636,2141],{"class":1147},[107,6638,6639],{"class":109,"line":3426},[107,6640,538],{"class":1147},[107,6642,6643],{"class":109,"line":3433},[107,6644,479],{"emptyLinePlaceholder":329},[107,6646,6647,6649],{"class":109,"line":3469},[107,6648,4258],{"class":1154},[107,6650,2125],{"class":1147},[107,6652,6653,6655,6657,6659],{"class":109,"line":3504},[107,6654,2782],{"class":1805},[107,6656,2133],{"class":1147},[107,6658,4269],{"class":1805},[107,6660,2141],{"class":1147},[107,6662,6663,6666,6668,6671],{"class":109,"line":3521},[107,6664,6665],{"class":1805}," flex-wrap",[107,6667,2133],{"class":1147},[107,6669,6670],{"class":1805},"wrap",[107,6672,2141],{"class":1147},[107,6674,6675,6677,6679,6681,6683],{"class":109,"line":3526},[107,6676,4287],{"class":1805},[107,6678,2133],{"class":1147},[107,6680,4292],{"class":1805},[107,6682,1269],{"class":1199},[107,6684,2141],{"class":1147},[107,6686,6687,6689,6691,6693,6695],{"class":109,"line":3531},[107,6688,4301],{"class":1805},[107,6690,2133],{"class":1147},[107,6692,2873],{"class":1805},[107,6694,1269],{"class":1199},[107,6696,2141],{"class":1147},[107,6698,6699],{"class":109,"line":3540},[107,6700,538],{"class":1147},[107,6702,6703],{"class":109,"line":3547},[107,6704,479],{"emptyLinePlaceholder":329},[107,6706,6707,6709],{"class":109,"line":3554},[107,6708,3916],{"class":1151},[107,6710,2125],{"class":1147},[107,6712,6713,6715,6717,6719],{"class":109,"line":3563},[107,6714,2782],{"class":1805},[107,6716,2133],{"class":1147},[107,6718,4269],{"class":1805},[107,6720,2141],{"class":1147},[107,6722,6723,6726,6728,6731],{"class":109,"line":3602},[107,6724,6725],{"class":1805}," flex-direction",[107,6727,2133],{"class":1147},[107,6729,6730],{"class":1805},"column",[107,6732,2141],{"class":1147},[107,6734,6735,6737,6739,6741,6743],{"class":109,"line":3607},[107,6736,4287],{"class":1805},[107,6738,2133],{"class":1147},[107,6740,4359],{"class":1805},[107,6742,1269],{"class":1199},[107,6744,2141],{"class":1147},[107,6746,6747,6749,6751,6754,6756],{"class":109,"line":3612},[107,6748,3640],{"class":1805},[107,6750,2133],{"class":1147},[107,6752,6753],{"class":1805},"11",[107,6755,1269],{"class":1199},[107,6757,2141],{"class":1147},[107,6759,6760,6762,6764,6767],{"class":109,"line":3617},[107,6761,3668],{"class":1805},[107,6763,2133],{"class":1147},[107,6765,6766],{"class":1805},"#475569",[107,6768,2141],{"class":1147},[107,6770,6771],{"class":109,"line":3625},[107,6772,538],{"class":1147},[107,6774,6775],{"class":109,"line":3637},[107,6776,479],{"emptyLinePlaceholder":329},[107,6778,6779,6781],{"class":109,"line":3652},[107,6780,3937],{"class":1151},[107,6782,2125],{"class":1147},[107,6784,6785,6787,6789,6791,6793,6795,6798],{"class":109,"line":3665},[107,6786,2245],{"class":1805},[107,6788,2133],{"class":1147},[107,6790,2522],{"class":1805},[107,6792,1269],{"class":1199},[107,6794,3807],{"class":1805},[107,6796,6797],{"class":1805}," #cbd5e1",[107,6799,2141],{"class":1147},[107,6801,6802,6804,6806,6808,6810],{"class":109,"line":3678},[107,6803,2269],{"class":1805},[107,6805,2133],{"class":1147},[107,6807,4376],{"class":1805},[107,6809,1269],{"class":1199},[107,6811,2141],{"class":1147},[107,6813,6814,6816,6818,6820,6822,6824,6826],{"class":109,"line":3683},[107,6815,2232],{"class":1805},[107,6817,2133],{"class":1147},[107,6819,4376],{"class":1805},[107,6821,1269],{"class":1199},[107,6823,3474],{"class":1805},[107,6825,1269],{"class":1199},[107,6827,2141],{"class":1147},[107,6829,6831,6833,6835,6838],{"class":109,"line":6830},72,[107,6832,2283],{"class":1805},[107,6834,2133],{"class":1147},[107,6836,6837],{"class":1805},"white",[107,6839,2141],{"class":1147},[107,6841,6843,6845,6847,6849,6851],{"class":109,"line":6842},73,[107,6844,3640],{"class":1805},[107,6846,2133],{"class":1147},[107,6848,6753],{"class":1805},[107,6850,1269],{"class":1199},[107,6852,2141],{"class":1147},[107,6854,6856],{"class":109,"line":6855},74,[107,6857,538],{"class":1147},[107,6859,6861],{"class":109,"line":6860},75,[107,6862,479],{"emptyLinePlaceholder":329},[107,6864,6866,6868],{"class":109,"line":6865},76,[107,6867,4695],{"class":1154},[107,6869,2125],{"class":1147},[107,6871,6873,6875,6877,6879],{"class":109,"line":6872},77,[107,6874,2782],{"class":1805},[107,6876,2133],{"class":1147},[107,6878,4269],{"class":1805},[107,6880,2141],{"class":1147},[107,6882,6884,6886,6888,6891],{"class":109,"line":6883},78,[107,6885,6665],{"class":1805},[107,6887,2133],{"class":1147},[107,6889,6890],{"class":1805},"nowrap",[107,6892,2141],{"class":1147},[107,6894,6896,6898,6900,6902,6904],{"class":109,"line":6895},79,[107,6897,2976],{"class":1805},[107,6899,2133],{"class":1147},[107,6901,2986],{"class":1805},[107,6903,1942],{"class":1199},[107,6905,2141],{"class":1147},[107,6907,6909,6911,6913,6915],{"class":109,"line":6908},80,[107,6910,4416],{"class":1805},[107,6912,2133],{"class":1147},[107,6914,2092],{"class":1805},[107,6916,2141],{"class":1147},[107,6918,6920,6922,6924,6926,6928],{"class":109,"line":6919},81,[107,6921,4287],{"class":1805},[107,6923,2133],{"class":1147},[107,6925,4292],{"class":1805},[107,6927,1269],{"class":1199},[107,6929,2141],{"class":1147},[107,6931,6933,6935,6937,6940,6942],{"class":109,"line":6932},82,[107,6934,2806],{"class":1805},[107,6936,2133],{"class":1147},[107,6938,6939],{"class":1805},"160",[107,6941,1269],{"class":1199},[107,6943,2141],{"class":1147},[107,6945,6947,6949,6951,6953,6955],{"class":109,"line":6946},83,[107,6948,2232],{"class":1805},[107,6950,2133],{"class":1147},[107,6952,2873],{"class":1805},[107,6954,1269],{"class":1199},[107,6956,2141],{"class":1147},[107,6958,6960,6962,6964,6966,6968],{"class":109,"line":6959},84,[107,6961,2269],{"class":1805},[107,6963,2133],{"class":1147},[107,6965,2873],{"class":1805},[107,6967,1269],{"class":1199},[107,6969,2141],{"class":1147},[107,6971,6973,6975,6977,6980],{"class":109,"line":6972},85,[107,6974,2283],{"class":1805},[107,6976,2133],{"class":1147},[107,6978,6979],{"class":1805},"#f8fafc",[107,6981,2141],{"class":1147},[107,6983,6985,6987,6989,6991,6993,6996,6998],{"class":109,"line":6984},86,[107,6986,2245],{"class":1805},[107,6988,2133],{"class":1147},[107,6990,2522],{"class":1805},[107,6992,1269],{"class":1199},[107,6994,6995],{"class":1805}," dashed",[107,6997,6797],{"class":1805},[107,6999,2141],{"class":1147},[107,7001,7003],{"class":109,"line":7002},87,[107,7004,538],{"class":1147},[107,7006,7008],{"class":109,"line":7007},88,[107,7009,479],{"emptyLinePlaceholder":329},[107,7011,7013,7015],{"class":109,"line":7012},89,[107,7014,2122],{"class":1154},[107,7016,2125],{"class":1147},[107,7018,7020,7023,7025,7027,7029,7032],{"class":109,"line":7019},90,[107,7021,7022],{"class":1805}," flex",[107,7024,2133],{"class":1147},[107,7026,3260],{"class":1805},[107,7028,1861],{"class":1805},[107,7030,7031],{"class":1805}," auto",[107,7033,2141],{"class":1147},[107,7035,7037,7040,7042,7045,7047],{"class":109,"line":7036},91,[107,7038,7039],{"class":1805}," min-width",[107,7041,2133],{"class":1147},[107,7043,7044],{"class":1805},"56",[107,7046,1269],{"class":1199},[107,7048,2141],{"class":1147},[107,7050,7052,7054,7056,7059,7061],{"class":109,"line":7051},92,[107,7053,2806],{"class":1805},[107,7055,2133],{"class":1147},[107,7057,7058],{"class":1805},"48",[107,7060,1269],{"class":1199},[107,7062,2141],{"class":1147},[107,7064,7066,7068,7070,7072,7074,7076,7078],{"class":109,"line":7065},93,[107,7067,2232],{"class":1805},[107,7069,2133],{"class":1147},[107,7071,2873],{"class":1805},[107,7073,1269],{"class":1199},[107,7075,3287],{"class":1805},[107,7077,1269],{"class":1199},[107,7079,2141],{"class":1147},[107,7081,7083,7085,7087,7089,7091],{"class":109,"line":7082},94,[107,7084,2269],{"class":1805},[107,7086,2133],{"class":1147},[107,7088,2181],{"class":1805},[107,7090,1269],{"class":1199},[107,7092,2141],{"class":1147},[107,7094,7096,7098,7100,7102,7104,7106,7108,7110,7113,7115,7118],{"class":109,"line":7095},95,[107,7097,2283],{"class":1805},[107,7099,2133],{"class":1147},[107,7101,2836],{"class":1805},[107,7103,1190],{"class":1147},[107,7105,2841],{"class":1805},[107,7107,2324],{"class":1199},[107,7109,2299],{"class":1147},[107,7111,7112],{"class":1805},"#38bdf8",[107,7114,2299],{"class":1147},[107,7116,7117],{"class":1805},"#6366f1",[107,7119,2171],{"class":1147},[107,7121,7123,7125,7127,7129],{"class":109,"line":7122},96,[107,7124,3668],{"class":1805},[107,7126,2133],{"class":1147},[107,7128,6837],{"class":1805},[107,7130,2141],{"class":1147},[107,7132,7134,7137,7139,7142],{"class":109,"line":7133},97,[107,7135,7136],{"class":1805}," font-weight",[107,7138,2133],{"class":1147},[107,7140,7141],{"class":1805},"600",[107,7143,2141],{"class":1147},[107,7145,7147,7149,7151,7153,7155],{"class":109,"line":7146},98,[107,7148,3640],{"class":1805},[107,7150,2133],{"class":1147},[107,7152,2873],{"class":1805},[107,7154,1269],{"class":1199},[107,7156,2141],{"class":1147},[107,7158,7160,7163,7165,7167],{"class":109,"line":7159},99,[107,7161,7162],{"class":1805}," text-align",[107,7164,2133],{"class":1147},[107,7166,2799],{"class":1805},[107,7168,2141],{"class":1147},[107,7170,7172],{"class":109,"line":7171},100,[107,7173,538],{"class":1147},[107,7175,7177,7179,7181],{"class":109,"line":7176},101,[107,7178,1207],{"class":1147},[107,7180,311],{"class":1151},[107,7182,1170],{"class":1147},[37,7184,7185],{"id":7185},"实践建议",[15,7187,7188],{},"优先用 Flex 处理一维布局（行或列），二维复杂布局再考虑 Grid。",[311,7190,7191],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":85,"searchDepth":122,"depth":122,"links":7193},[7194,7195,7196],{"id":5910,"depth":116,"text":5910},{"id":6012,"depth":116,"text":6012},{"id":7185,"depth":116,"text":7185},"2026-05-01","用 Flex 实现常见的卡片居中布局，并通过代码 playground 直观感受对齐方式的变化。",{},"\u002Fblog\u002Fcss-flex-demo",{"title":5895,"description":7198},"blog\u002Fcss-flex-demo",[7204,5890],"flexbox","FnnXjd4YEFKibrBnFfTHzIEl4dfl0sklSB-hk3DMocU",{"id":7207,"title":7208,"body":7209,"category":2110,"date":8134,"description":8135,"draft":326,"extension":327,"meta":8136,"navigation":329,"path":1276,"seo":8137,"stem":8138,"tags":8139,"__hash__":8142},"blog\u002Fblog\u002Fcss-property-calculation.md","CSS 属性计算过程：从声明到最终值",{"type":8,"value":7210,"toc":8121},[7211,7214,7217,7242,7253,7259,7272,7275,7309,7322,7328,7334,7337,7343,7358,7364,7368,7374,7395,7401,7404,7408,7415,7433,7436,7439,7457,7463,7469,7505,7511,7519,7522,7528,7569,7626,7632,7638,7641,7644,7650,7703,7706,7712,7716,7727,7761,7786,7795,7801,7807,7862,7912,7923,7929,7935,7941,7945,7951,7957,7960,7966,7970,8023,8047,8053,8090,8092,8118],[11,7212,7208],{"id":7213},"css-属性计算过程从声明到最终值",[15,7215,7216],{},"写 CSS 时往往只写几行：",[77,7218,7220],{"className":2114,"code":7219,"language":2110,"meta":85,"style":85},"p {\n color: red;\n}\n",[19,7221,7222,7228,7238],{"__ignoreMap":85},[107,7223,7224,7226],{"class":109,"line":110},[107,7225,15],{"class":1151},[107,7227,2125],{"class":1147},[107,7229,7230,7232,7234,7236],{"class":109,"line":116},[107,7231,3668],{"class":1805},[107,7233,2133],{"class":1147},[107,7235,1258],{"class":1805},[107,7237,2141],{"class":1147},[107,7239,7240],{"class":109,"line":122},[107,7241,538],{"class":1147},[15,7243,7244,7245,7248,7249,7252],{},"但打开开发者工具 → 元素 → ",[24,7246,7247],{},"计算样式"," → 勾选「全部显示」，会发现每个元素都有 ",[24,7250,7251],{},"成百个属性","。它们从哪来？为什么有的没写却有值，有的写了却不是你以为的结果？",[15,7254,7255],{},[828,7256],{"alt":7257,"src":7258},"CSS 属性计算流程概览","\u002Fdemos\u002Fcss-property-calc\u002Fflow-overview.svg",[15,7260,7261,7262,7265,7266,7268,7269,7271],{},"属性值的计算大致分 ",[24,7263,7264],{},"四步","：确定声明值 → 层叠冲突 → 使用继承 → 使用默认值。算完后的结果会进入渲染流水线的 ",[264,7267,886],{"href":1670}," 阶段，再与 ",[264,7270,1289],{"href":1288}," 一起在布局里定稿几何尺寸。",[37,7273,7274],{"id":7274},"每个元素都有一套完整样式",[77,7276,7278],{"className":1139,"code":7277,"language":1135,"meta":85,"style":85},"\u003Cbody>\n \u003Ch1>这是一个 h1 标题\u003C\u002Fh1>\n\u003C\u002Fbody>\n",[19,7279,7280,7288,7301],{"__ignoreMap":85},[107,7281,7282,7284,7286],{"class":109,"line":110},[107,7283,1148],{"class":1147},[107,7285,4632],{"class":1151},[107,7287,1170],{"class":1147},[107,7289,7290,7292,7294,7297,7299],{"class":109,"line":116},[107,7291,2670],{"class":1147},[107,7293,11],{"class":1151},[107,7295,7296],{"class":1147},">这是一个 h1 标题\u003C\u002F",[107,7298,11],{"class":1151},[107,7300,1170],{"class":1147},[107,7302,7303,7305,7307],{"class":109,"line":122},[107,7304,1207],{"class":1147},[107,7306,4632],{"class":1151},[107,7308,1170],{"class":1147},[15,7310,7311,7312,7314,7315,7318,7319,309],{},"没给 ",[19,7313,11],{}," 写任何样式，它仍有默认字号、颜色等——因为 ",[24,7316,7317],{},"任意 HTML 元素都对应一整套 CSS 属性","；没写的，多数走继承或 ",[24,7320,7321],{},"用户代理样式表（浏览器默认样式）",[15,7323,7324],{},[828,7325],{"alt":7326,"src":7327},"未写样式时的 h1 外观","\u002Fdemos\u002Fcss-property-calc\u002Fh1-default.svg",[15,7329,7330],{},[828,7331],{"alt":7332,"src":7333},"元素上实际存在的全部属性","\u002Fdemos\u002Fcss-property-calc\u002Fall-props.svg",[15,7335,7336],{},"在计算样式里勾选全部显示即可验证：",[15,7338,7339],{},[828,7340],{"alt":7341,"src":7342},"计算样式面板","\u002Fdemos\u002Fcss-property-calc\u002Fcomputed-panel.svg",[15,7344,7345,7346,7349,7350,7353,7354,7357],{},"注意：没写 ",[24,7347,7348],{},"不等于"," 一定用默认值——中间还有 ",[24,7351,7352],{},"继承"," 和 ",[24,7355,7356],{},"层叠","，所以必须理解计算流程。",[15,7359,7360],{},[828,7361],{"alt":7362,"src":7363},"并非总是默认值","\u002Fdemos\u002Fcss-property-calc\u002Fnot-only-default.svg",[37,7365,7367],{"id":7366},"第一步确定声明值","第一步：确定声明值",[15,7369,7370,7373],{},[24,7371,7372],{},"声明值"," 就是样式表里写明的规则，包括：",[760,7375,7376,7382],{},[387,7377,7378,7381],{},[24,7379,7380],{},"作者样式表","（你写的 CSS）",[387,7383,7384,7387,7388,4888,7390,1027,7392,5291],{},[24,7385,7386],{},"用户代理样式表","（浏览器内置，如 ",[19,7389,11],{},[19,7391,1392],{},[19,7393,7394],{},"margin",[15,7396,7397],{},[828,7398],{"alt":7399,"src":7400},"作者样式与用户代理样式","\u002Fdemos\u002Fcss-property-calc\u002Fauthor-ua.svg",[15,7402,7403],{},"若声明之间无冲突，直接采用对应声明。",[37,7405,7407],{"id":7406},"第二步层叠冲突","第二步：层叠冲突",[15,7409,7410,7411,7414],{},"多条规则声明同一属性时，进入 ",[24,7412,7413],{},"层叠（Cascade）"," 解决，细分为：",[384,7416,7417,7423,7428],{},[387,7418,7419,7420],{},"比较 ",[24,7421,7422],{},"源的重要性",[387,7424,7419,7425],{},[24,7426,7427],{},"优先级（特异性）",[387,7429,7419,7430],{},[24,7431,7432],{},"次序",[63,7434,7435],{"id":7435},"比较源的重要性",[15,7437,7438],{},"样式来源（重要性从高到低）：",[760,7440,7441,7446,7452],{},[387,7442,7443],{},[24,7444,7445],{},"页面作者样式",[387,7447,7448,7451],{},[24,7449,7450],{},"用户样式","（用户自定义）",[387,7453,7454],{},[24,7455,7456],{},"用户代理样式",[15,7458,7459],{},[828,7460],{"alt":7461,"src":7462},"样式源重要性","\u002Fdemos\u002Fcss-property-calc\u002Fsource-priority.svg",[15,7464,7465,7466,7468],{},"作者与用户代理同时声明 ",[19,7467,1392],{}," 时，作者胜出：",[77,7470,7472],{"className":2114,"code":7471,"language":2110,"meta":85,"style":85},"p {\n color: red;\n display: inline-block;\n}\n",[19,7473,7474,7480,7490,7501],{"__ignoreMap":85},[107,7475,7476,7478],{"class":109,"line":110},[107,7477,15],{"class":1151},[107,7479,2125],{"class":1147},[107,7481,7482,7484,7486,7488],{"class":109,"line":116},[107,7483,3668],{"class":1805},[107,7485,2133],{"class":1147},[107,7487,1258],{"class":1805},[107,7489,2141],{"class":1147},[107,7491,7492,7494,7496,7499],{"class":109,"line":122},[107,7493,2782],{"class":1805},[107,7495,2133],{"class":1147},[107,7497,7498],{"class":1805},"inline-block",[107,7500,2141],{"class":1147},[107,7502,7503],{"class":109,"line":128},[107,7504,538],{"class":1147},[15,7506,7507],{},[828,7508],{"alt":7509,"src":7510},"display 由作者样式决定","\u002Fdemos\u002Fcss-property-calc\u002Fcascade-display.svg",[15,7512,7513,7514],{},"详见 MDN：",[264,7515,7518],{"href":7516,"rel":7517},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCascade",[4599],"Cascade",[63,7520,7521],{"id":7521},"比较优先级",[15,7523,7524,7525,738],{},"同一源内冲突，比 ",[24,7526,7527],{},"选择器权重",[77,7529,7531],{"className":1139,"code":7530,"language":1135,"meta":85,"style":85},"\u003Cdiv class=\"test\">\n \u003Ch1>test\u003C\u002Fh1>\n\u003C\u002Fdiv>\n",[19,7532,7533,7548,7561],{"__ignoreMap":85},[107,7534,7535,7537,7539,7541,7543,7546],{"class":109,"line":110},[107,7536,1148],{"class":1147},[107,7538,2673],{"class":1151},[107,7540,2676],{"class":1154},[107,7542,1158],{"class":1147},[107,7544,7545],{"class":1161},"\"test\"",[107,7547,1170],{"class":1147},[107,7549,7550,7552,7554,7557,7559],{"class":109,"line":116},[107,7551,2670],{"class":1147},[107,7553,11],{"class":1151},[107,7555,7556],{"class":1147},">test\u003C\u002F",[107,7558,11],{"class":1151},[107,7560,1170],{"class":1147},[107,7562,7563,7565,7567],{"class":109,"line":122},[107,7564,1207],{"class":1147},[107,7566,2673],{"class":1151},[107,7568,1170],{"class":1147},[77,7570,7572],{"className":2114,"code":7571,"language":2110,"meta":85,"style":85},".test h1 {\n font-size: 50px;\n}\n\nh1 {\n font-size: 20px;\n}\n",[19,7573,7574,7584,7596,7600,7604,7610,7622],{"__ignoreMap":85},[107,7575,7576,7579,7582],{"class":109,"line":110},[107,7577,7578],{"class":1154},".test",[107,7580,7581],{"class":1151}," h1",[107,7583,2125],{"class":1147},[107,7585,7586,7588,7590,7592,7594],{"class":109,"line":116},[107,7587,3640],{"class":1805},[107,7589,2133],{"class":1147},[107,7591,3802],{"class":1805},[107,7593,1269],{"class":1199},[107,7595,2141],{"class":1147},[107,7597,7598],{"class":109,"line":122},[107,7599,538],{"class":1147},[107,7601,7602],{"class":109,"line":128},[107,7603,479],{"emptyLinePlaceholder":329},[107,7605,7606,7608],{"class":109,"line":134},[107,7607,11],{"class":1151},[107,7609,2125],{"class":1147},[107,7611,7612,7614,7616,7618,7620],{"class":109,"line":140},[107,7613,3640],{"class":1805},[107,7615,2133],{"class":1147},[107,7617,3865],{"class":1805},[107,7619,1269],{"class":1199},[107,7621,2141],{"class":1147},[107,7623,7624],{"class":109,"line":470},[107,7625,538],{"class":1147},[15,7627,7628,7631],{},[19,7629,7630],{},".test h1"," 权重更高 → 50px：",[15,7633,7634],{},[828,7635],{"alt":7636,"src":7637},"权重较高规则生效","\u002Fdemos\u002Fcss-property-calc\u002Fspecificity.svg",[15,7639,7640],{},"落败规则在 Styles 面板中会被划掉。",[63,7642,7643],{"id":7643},"比较次序",[15,7645,7646,7647,738],{},"同源、同权重时，",[24,7648,7649],{},"后面的规则覆盖前面的",[77,7651,7653],{"className":2114,"code":7652,"language":2110,"meta":85,"style":85},"h1 {\n font-size: 50px;\n}\n\nh1 {\n font-size: 20px;\n}\n",[19,7654,7655,7661,7673,7677,7681,7687,7699],{"__ignoreMap":85},[107,7656,7657,7659],{"class":109,"line":110},[107,7658,11],{"class":1151},[107,7660,2125],{"class":1147},[107,7662,7663,7665,7667,7669,7671],{"class":109,"line":116},[107,7664,3640],{"class":1805},[107,7666,2133],{"class":1147},[107,7668,3802],{"class":1805},[107,7670,1269],{"class":1199},[107,7672,2141],{"class":1147},[107,7674,7675],{"class":109,"line":122},[107,7676,538],{"class":1147},[107,7678,7679],{"class":109,"line":128},[107,7680,479],{"emptyLinePlaceholder":329},[107,7682,7683,7685],{"class":109,"line":134},[107,7684,11],{"class":1151},[107,7686,2125],{"class":1147},[107,7688,7689,7691,7693,7695,7697],{"class":109,"line":140},[107,7690,3640],{"class":1805},[107,7692,2133],{"class":1147},[107,7694,3865],{"class":1805},[107,7696,1269],{"class":1199},[107,7698,2141],{"class":1147},[107,7700,7701],{"class":109,"line":470},[107,7702,538],{"class":1147},[15,7704,7705],{},"最终 20px：",[15,7707,7708],{},[828,7709],{"alt":7710,"src":7711},"同权重时后者胜出","\u002Fdemos\u002Fcss-property-calc\u002Fsource-order.svg",[37,7713,7715],{"id":7714},"第三步使用继承","第三步：使用继承",[15,7717,7718,7719,7722,7723,7726],{},"没有声明的属性，若该属性 ",[24,7720,7721],{},"可继承","，则从 ",[24,7724,7725],{},"最近的祖先"," 取值：",[77,7728,7730],{"className":1139,"code":7729,"language":1135,"meta":85,"style":85},"\u003Cdiv>\n \u003Cp>Lorem ipsum dolor sit amet.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[19,7731,7732,7740,7753],{"__ignoreMap":85},[107,7733,7734,7736,7738],{"class":109,"line":110},[107,7735,1148],{"class":1147},[107,7737,2673],{"class":1151},[107,7739,1170],{"class":1147},[107,7741,7742,7744,7746,7749,7751],{"class":109,"line":116},[107,7743,2670],{"class":1147},[107,7745,15],{"class":1151},[107,7747,7748],{"class":1147},">Lorem ipsum dolor sit amet.\u003C\u002F",[107,7750,15],{"class":1151},[107,7752,1170],{"class":1147},[107,7754,7755,7757,7759],{"class":109,"line":122},[107,7756,1207],{"class":1147},[107,7758,2673],{"class":1151},[107,7760,1170],{"class":1147},[77,7762,7764],{"className":2114,"code":7763,"language":2110,"meta":85,"style":85},"div {\n color: red;\n}\n",[19,7765,7766,7772,7782],{"__ignoreMap":85},[107,7767,7768,7770],{"class":109,"line":110},[107,7769,2673],{"class":1151},[107,7771,2125],{"class":1147},[107,7773,7774,7776,7778,7780],{"class":109,"line":116},[107,7775,3668],{"class":1805},[107,7777,2133],{"class":1147},[107,7779,1258],{"class":1805},[107,7781,2141],{"class":1147},[107,7783,7784],{"class":109,"line":122},[107,7785,538],{"class":1147},[15,7787,7788,4888,7790,7792,7793,738],{},[19,7789,15],{},[19,7791,1494],{}," 来自 ",[19,7794,2673],{},[15,7796,7797],{},[828,7798],{"alt":7799,"src":7800},"color 继承","\u002Fdemos\u002Fcss-property-calc\u002Finherit-basic.svg",[15,7802,7803,7804,738],{},"强调 ",[24,7805,7806],{},"最近祖先",[77,7808,7810],{"className":1139,"code":7809,"language":1135,"meta":85,"style":85},"\u003Cdiv class=\"test\">\n \u003Cdiv>\n \u003Cp>Lorem ipsum dolor sit amet.\u003C\u002Fp>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[19,7811,7812,7826,7834,7846,7854],{"__ignoreMap":85},[107,7813,7814,7816,7818,7820,7822,7824],{"class":109,"line":110},[107,7815,1148],{"class":1147},[107,7817,2673],{"class":1151},[107,7819,2676],{"class":1154},[107,7821,1158],{"class":1147},[107,7823,7545],{"class":1161},[107,7825,1170],{"class":1147},[107,7827,7828,7830,7832],{"class":109,"line":116},[107,7829,2670],{"class":1147},[107,7831,2673],{"class":1151},[107,7833,1170],{"class":1147},[107,7835,7836,7838,7840,7842,7844],{"class":109,"line":122},[107,7837,2688],{"class":1147},[107,7839,15],{"class":1151},[107,7841,7748],{"class":1147},[107,7843,15],{"class":1151},[107,7845,1170],{"class":1147},[107,7847,7848,7850,7852],{"class":109,"line":128},[107,7849,2743],{"class":1147},[107,7851,2673],{"class":1151},[107,7853,1170],{"class":1147},[107,7855,7856,7858,7860],{"class":109,"line":134},[107,7857,1207],{"class":1147},[107,7859,2673],{"class":1151},[107,7861,1170],{"class":1147},[77,7863,7865],{"className":2114,"code":7864,"language":2110,"meta":85,"style":85},"div {\n color: red;\n}\n\n.test {\n color: blue;\n}\n",[19,7866,7867,7873,7883,7887,7891,7897,7908],{"__ignoreMap":85},[107,7868,7869,7871],{"class":109,"line":110},[107,7870,2673],{"class":1151},[107,7872,2125],{"class":1147},[107,7874,7875,7877,7879,7881],{"class":109,"line":116},[107,7876,3668],{"class":1805},[107,7878,2133],{"class":1147},[107,7880,1258],{"class":1805},[107,7882,2141],{"class":1147},[107,7884,7885],{"class":109,"line":122},[107,7886,538],{"class":1147},[107,7888,7889],{"class":109,"line":128},[107,7890,479],{"emptyLinePlaceholder":329},[107,7892,7893,7895],{"class":109,"line":134},[107,7894,7578],{"class":1154},[107,7896,2125],{"class":1147},[107,7898,7899,7901,7903,7906],{"class":109,"line":140},[107,7900,3668],{"class":1805},[107,7902,2133],{"class":1147},[107,7904,7905],{"class":1805},"blue",[107,7907,2141],{"class":1147},[107,7909,7910],{"class":109,"line":470},[107,7911,538],{"class":1147},[15,7913,7914,7915,7917,7918,7920,7921,2093],{},"内层 ",[19,7916,2673],{}," 更近 → ",[19,7919,15],{}," 继承蓝色（这里不比权重，因为根本没选中 ",[19,7922,15],{},[15,7924,7925],{},[828,7926],{"alt":7927,"src":7928},"继承听最近的祖先","\u002Fdemos\u002Fcss-property-calc\u002Finherit-nearest.svg",[15,7930,7931,7932,738],{},"哪些属性可继承？查 MDN 各属性页，例如 ",[19,7933,7934],{},"text-align",[15,7936,7937],{},[828,7938],{"alt":7939,"src":7940},"MDN 上的 inherits 说明","\u002Fdemos\u002Fcss-property-calc\u002Finherits-hint.svg",[37,7942,7944],{"id":7943},"第四步使用默认值","第四步：使用默认值",[15,7946,7947,7948,738],{},"仍无法确定的，用 ",[24,7949,7950],{},"initial \u002F 用户代理默认值",[15,7952,7953],{},[828,7954],{"alt":7955,"src":7956},"最终落到默认值","\u002Fdemos\u002Fcss-property-calc\u002Finitial-default.svg",[15,7958,7959],{},"元素要在浏览器里渲染，必须具备完整属性集；大量属性既未声明、也无法继承，就靠这一步补齐。",[15,7961,7962],{},[828,7963],{"alt":7964,"src":7965},"四步流程回顾","\u002Fdemos\u002Fcss-property-calc\u002Fsteps-summary.svg",[37,7967,7969],{"id":7968},"面试题a-和-p-各是什么颜色","面试题：a 和 p 各是什么颜色？",[77,7971,7973],{"className":1139,"code":7972,"language":1135,"meta":85,"style":85},"\u003Cdiv>\n \u003Ca href=\"\">test\u003C\u002Fa>\n \u003Cp>test\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[19,7974,7975,7983,8003,8015],{"__ignoreMap":85},[107,7976,7977,7979,7981],{"class":109,"line":110},[107,7978,1148],{"class":1147},[107,7980,2673],{"class":1151},[107,7982,1170],{"class":1147},[107,7984,7985,7987,7989,7992,7994,7997,7999,8001],{"class":109,"line":116},[107,7986,2670],{"class":1147},[107,7988,264],{"class":1151},[107,7990,7991],{"class":1154}," href",[107,7993,1158],{"class":1147},[107,7995,7996],{"class":1161},"\"\"",[107,7998,7556],{"class":1147},[107,8000,264],{"class":1151},[107,8002,1170],{"class":1147},[107,8004,8005,8007,8009,8011,8013],{"class":109,"line":122},[107,8006,2670],{"class":1147},[107,8008,15],{"class":1151},[107,8010,7556],{"class":1147},[107,8012,15],{"class":1151},[107,8014,1170],{"class":1147},[107,8016,8017,8019,8021],{"class":109,"line":128},[107,8018,1207],{"class":1147},[107,8020,2673],{"class":1151},[107,8022,1170],{"class":1147},[77,8024,8025],{"className":2114,"code":7763,"language":2110,"meta":85,"style":85},[19,8026,8027,8033,8043],{"__ignoreMap":85},[107,8028,8029,8031],{"class":109,"line":110},[107,8030,2673],{"class":1151},[107,8032,2125],{"class":1147},[107,8034,8035,8037,8039,8041],{"class":109,"line":116},[107,8036,3668],{"class":1805},[107,8038,2133],{"class":1147},[107,8040,1258],{"class":1805},[107,8042,2141],{"class":1147},[107,8044,8045],{"class":109,"line":122},[107,8046,538],{"class":1147},[15,8048,8049],{},[828,8050],{"alt":8051,"src":8052},"面试题解答","\u002Fdemos\u002Fcss-property-calc\u002Finterview-a-p.svg",[760,8054,8055,8071],{},[387,8056,8057,8061,8062,8064,8065,1092,8068,8070],{},[24,8058,8059],{},[19,8060,264],{},"：用户代理样式表里已为链接声明了 ",[19,8063,1494],{},"，有声明值，",[24,8066,8067],{},"不继承",[19,8069,2673],{}," 的红色。",[387,8072,8073,8077,8078,8080,8081,8083,8084,8086,8087,8089],{},[24,8074,8075],{},[19,8076,15],{},"：作者与 UA 都未给 ",[19,8079,15],{}," 声明 ",[19,8082,1494],{},"，而 ",[19,8085,1494],{}," 可继承 → 从 ",[19,8088,2673],{}," 继承红色。",[37,8091,274],{"id":274},[760,8093,8094,8100,8106,8112],{},[387,8095,8096,8097,309],{},"计算样式四步：",[24,8098,8099],{},"声明 → 层叠 → 继承 → 默认",[387,8101,8102,8103,309],{},"层叠内部：",[24,8104,8105],{},"源 > 权重 > 次序",[387,8107,8108,8109,8111],{},"继承看 ",[24,8110,7806],{},"，与选择器权重无关。",[387,8113,8114,8115,309],{},"算出的 Computed Style 是渲染流水线「样式计算」的输入；百分比尺寸还要等 ",[264,8116,8117],{"href":1288},"布局与包含块",[311,8119,8120],{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":85,"searchDepth":122,"depth":122,"links":8122},[8123,8124,8125,8130,8131,8132,8133],{"id":7274,"depth":116,"text":7274},{"id":7366,"depth":116,"text":7367},{"id":7406,"depth":116,"text":7407,"children":8126},[8127,8128,8129],{"id":7435,"depth":122,"text":7435},{"id":7521,"depth":122,"text":7521},{"id":7643,"depth":122,"text":7643},{"id":7714,"depth":116,"text":7715},{"id":7943,"depth":116,"text":7944},{"id":7968,"depth":116,"text":7969},{"id":274,"depth":116,"text":274},"2026-06-27","确定声明值、层叠冲突、继承与默认值——搞懂 Computed 面板里那一长串属性是怎么来的。",{},{"title":7208,"description":8135},"blog\u002Fcss-property-calculation",[8140,8141,799],"cascade","computed-style","VHFx82BlHxxsO9OMlz7Mo-xU23maWSskailB9o960y8",{"id":8144,"title":8145,"body":8146,"category":2110,"date":11160,"description":11161,"draft":326,"extension":327,"meta":11162,"navigation":329,"path":11163,"seo":11164,"stem":11165,"tags":11166,"__hash__":11170},"blog\u002Fblog\u002Fcss-responsive-text.md","纯 CSS 响应式文字切换",{"type":8,"value":8147,"toc":11153},[8148,8151,8162,8165,8176,8180,8187,8219,8228,8231,8498,8501,8624,8640,8644,8650,8772,8949,8958,8961,9007,9014,9016,9030,9033,11113,11119,11121,11150],[11,8149,8145],{"id":8150},"纯-css-响应式文字切换",[15,8152,8153,8154,8157,8158,8161],{},"响应式页面里，同一位置有时需要展示不同文案：窄屏写「手机端」，宽屏写「桌面端」。第一反应往往是 ",[19,8155,8156],{},"window.resize"," 监听加 JS 改 DOM——其实用 ",[24,8159,8160],{},"CSS 媒体查询"," 就能做到，无需脚本、不阻塞渲染，对 SEO 和首屏也更友好。",[15,8163,8164],{},"本文对比两种纯 CSS 写法，并说明各自适用场景。示例断点统一为：",[760,8166,8167,8170,8173],{},[387,8168,8169],{},"手机：\u003C 640px",[387,8171,8172],{},"平板：640px ~ 1023px",[387,8174,8175],{},"桌面：≥ 1024px",[37,8177,8179],{"id":8178},"方案一伪元素-content","方案一：伪元素 + content",[15,8181,8182,8183,8186],{},"HTML 里放一个空元素（或只有装饰性内容），真正显示的文案写在 CSS ",[19,8184,8185],{},"content"," 里，按断点覆盖：",[77,8188,8190],{"className":1139,"code":8189,"language":1135,"meta":85,"style":85},"\u003Cp class=\"responsive-text\" aria-label=\"随视口变化的提示文字\">\u003C\u002Fp>\n",[19,8191,8192],{"__ignoreMap":85},[107,8193,8194,8196,8198,8200,8202,8205,8208,8210,8213,8215,8217],{"class":109,"line":110},[107,8195,1148],{"class":1147},[107,8197,15],{"class":1151},[107,8199,2676],{"class":1154},[107,8201,1158],{"class":1147},[107,8203,8204],{"class":1161},"\"responsive-text\"",[107,8206,8207],{"class":1154}," aria-label",[107,8209,1158],{"class":1147},[107,8211,8212],{"class":1161},"\"随视口变化的提示文字\"",[107,8214,4665],{"class":1147},[107,8216,15],{"class":1151},[107,8218,1170],{"class":1147},[15,8220,8221,8224,8225,8227],{},[19,8222,8223],{},"aria-label"," 给读屏软件提供可访问的固定描述；视觉文案由 ",[19,8226,1356],{}," 承担。",[15,8229,8230],{},"用 SCSS mixin 可以避免重复写媒体查询：",[430,8232,8235],{"lang":8233,"title":8234},"scss","responsive-text mixin",[77,8236,8239],{"className":8237,"code":8238,"language":8233,"meta":85,"style":85},"language-scss shiki shiki-themes github-light github-dark","$bp-tablet: 640px;\n$bp-desktop: 1024px;\n\n@mixin responsive-text($mobile, $tablet: null, $desktop: null) {\n &::before {\n content: $mobile;\n }\n\n @if $tablet {\n @media (min-width: $bp-tablet) {\n &::before {\n content: $tablet;\n }\n }\n }\n\n @if $desktop {\n @media (min-width: $bp-desktop) {\n &::before {\n content: $desktop;\n }\n }\n }\n}\n\n.responsive-text {\n @include responsive-text(\n \"📱 手机端：窄屏阅读体验\",\n \"📟 平板端：中等宽度布局\",\n \"🖥️ 桌面端：宽屏完整展示\"\n );\n}\n",[19,8240,8241,8255,8269,8273,8300,8309,8320,8324,8328,8338,8355,8364,8375,8380,8385,8389,8393,8402,8416,8424,8434,8438,8442,8446,8450,8454,8461,8470,8477,8484,8489,8494],{"__ignoreMap":85},[107,8242,8243,8246,8248,8251,8253],{"class":109,"line":110},[107,8244,8245],{"class":1768},"$bp-tablet",[107,8247,2133],{"class":1147},[107,8249,8250],{"class":1805},"640",[107,8252,1269],{"class":1199},[107,8254,2141],{"class":1147},[107,8256,8257,8260,8262,8265,8267],{"class":109,"line":116},[107,8258,8259],{"class":1768},"$bp-desktop",[107,8261,2133],{"class":1147},[107,8263,8264],{"class":1805},"1024",[107,8266,1269],{"class":1199},[107,8268,2141],{"class":1147},[107,8270,8271],{"class":109,"line":122},[107,8272,479],{"emptyLinePlaceholder":329},[107,8274,8275,8278,8281,8283,8286,8288,8291,8294,8297],{"class":109,"line":128},[107,8276,8277],{"class":1199},"@mixin",[107,8279,8280],{"class":1154}," responsive-text",[107,8282,1190],{"class":1147},[107,8284,8285],{"class":1768},"$mobile",[107,8287,2299],{"class":1147},[107,8289,8290],{"class":1768},"$tablet",[107,8292,8293],{"class":1147},": null, ",[107,8295,8296],{"class":1768},"$desktop",[107,8298,8299],{"class":1147},": null) {\n",[107,8301,8302,8305,8307],{"class":109,"line":134},[107,8303,8304],{"class":1151}," &",[107,8306,1356],{"class":1154},[107,8308,2125],{"class":1147},[107,8310,8311,8314,8316,8318],{"class":109,"line":140},[107,8312,8313],{"class":1151}," content",[107,8315,2133],{"class":1147},[107,8317,8285],{"class":1768},[107,8319,2141],{"class":1147},[107,8321,8322],{"class":109,"line":470},[107,8323,521],{"class":1147},[107,8325,8326],{"class":109,"line":476},[107,8327,479],{"emptyLinePlaceholder":329},[107,8329,8330,8333,8336],{"class":109,"line":482},[107,8331,8332],{"class":1199}," @if",[107,8334,8335],{"class":1768}," $tablet",[107,8337,2125],{"class":1147},[107,8339,8340,8343,8346,8349,8351,8353],{"class":109,"line":488},[107,8341,8342],{"class":1199}," @media",[107,8344,8345],{"class":1147}," (",[107,8347,8348],{"class":1805},"min-width",[107,8350,2133],{"class":1147},[107,8352,8245],{"class":1768},[107,8354,1772],{"class":1147},[107,8356,8357,8360,8362],{"class":109,"line":494},[107,8358,8359],{"class":1151}," &",[107,8361,1356],{"class":1154},[107,8363,2125],{"class":1147},[107,8365,8366,8369,8371,8373],{"class":109,"line":500},[107,8367,8368],{"class":1151}," content",[107,8370,2133],{"class":1147},[107,8372,8290],{"class":1768},[107,8374,2141],{"class":1147},[107,8376,8377],{"class":109,"line":506},[107,8378,8379],{"class":1147}," }\n",[107,8381,8382],{"class":109,"line":512},[107,8383,8384],{"class":1147}," }\n",[107,8386,8387],{"class":109,"line":518},[107,8388,521],{"class":1147},[107,8390,8391],{"class":109,"line":524},[107,8392,479],{"emptyLinePlaceholder":329},[107,8394,8395,8397,8400],{"class":109,"line":529},[107,8396,8332],{"class":1199},[107,8398,8399],{"class":1768}," $desktop",[107,8401,2125],{"class":1147},[107,8403,8404,8406,8408,8410,8412,8414],{"class":109,"line":535},[107,8405,8342],{"class":1199},[107,8407,8345],{"class":1147},[107,8409,8348],{"class":1805},[107,8411,2133],{"class":1147},[107,8413,8259],{"class":1768},[107,8415,1772],{"class":1147},[107,8417,8418,8420,8422],{"class":109,"line":2481},[107,8419,8359],{"class":1151},[107,8421,1356],{"class":1154},[107,8423,2125],{"class":1147},[107,8425,8426,8428,8430,8432],{"class":109,"line":2487},[107,8427,8368],{"class":1151},[107,8429,2133],{"class":1147},[107,8431,8296],{"class":1768},[107,8433,2141],{"class":1147},[107,8435,8436],{"class":109,"line":2495},[107,8437,8379],{"class":1147},[107,8439,8440],{"class":109,"line":2500},[107,8441,8384],{"class":1147},[107,8443,8444],{"class":109,"line":2505},[107,8445,521],{"class":1147},[107,8447,8448],{"class":109,"line":2513},[107,8449,538],{"class":1147},[107,8451,8452],{"class":109,"line":2536},[107,8453,479],{"emptyLinePlaceholder":329},[107,8455,8456,8459],{"class":109,"line":2541},[107,8457,8458],{"class":1154},".responsive-text",[107,8460,2125],{"class":1147},[107,8462,8463,8466,8468],{"class":109,"line":2546},[107,8464,8465],{"class":1199}," @include",[107,8467,8280],{"class":1154},[107,8469,2316],{"class":1147},[107,8471,8472,8475],{"class":109,"line":2556},[107,8473,8474],{"class":1161}," \"📱 手机端：窄屏阅读体验\"",[107,8476,2308],{"class":1147},[107,8478,8479,8482],{"class":109,"line":2564},[107,8480,8481],{"class":1161}," \"📟 平板端：中等宽度布局\"",[107,8483,2308],{"class":1147},[107,8485,8486],{"class":109,"line":2572},[107,8487,8488],{"class":1161}," \"🖥️ 桌面端：宽屏完整展示\"\n",[107,8490,8491],{"class":109,"line":2582},[107,8492,8493],{"class":1147}," );\n",[107,8495,8496],{"class":109,"line":2622},[107,8497,538],{"class":1147},[15,8499,8500],{},"编译后的核心 CSS 等价于：",[430,8502,8504],{"lang":2110,"title":8503},"编译结果（纯 CSS）",[77,8505,8507],{"className":2114,"code":8506,"language":2110,"meta":85,"style":85},".responsive-text::before {\n content: \"📱 手机端：窄屏阅读体验\";\n}\n\n@media (min-width: 640px) {\n .responsive-text::before {\n content: \"📟 平板端：中等宽度布局\";\n }\n}\n\n@media (min-width: 1024px) {\n .responsive-text::before {\n content: \"🖥️ 桌面端：宽屏完整展示\";\n }\n}\n",[19,8508,8509,8516,8528,8532,8536,8553,8560,8571,8575,8579,8583,8599,8605,8616,8620],{"__ignoreMap":85},[107,8510,8511,8514],{"class":109,"line":110},[107,8512,8513],{"class":1154},".responsive-text::before",[107,8515,2125],{"class":1147},[107,8517,8518,8521,8523,8526],{"class":109,"line":116},[107,8519,8520],{"class":1805}," content",[107,8522,2133],{"class":1147},[107,8524,8525],{"class":1161},"\"📱 手机端：窄屏阅读体验\"",[107,8527,2141],{"class":1147},[107,8529,8530],{"class":109,"line":122},[107,8531,538],{"class":1147},[107,8533,8534],{"class":109,"line":128},[107,8535,479],{"emptyLinePlaceholder":329},[107,8537,8538,8541,8543,8545,8547,8549,8551],{"class":109,"line":134},[107,8539,8540],{"class":1199},"@media",[107,8542,8345],{"class":1147},[107,8544,8348],{"class":1805},[107,8546,2133],{"class":1147},[107,8548,8250],{"class":1805},[107,8550,1269],{"class":1199},[107,8552,1772],{"class":1147},[107,8554,8555,8558],{"class":109,"line":140},[107,8556,8557],{"class":1154}," .responsive-text::before",[107,8559,2125],{"class":1147},[107,8561,8562,8564,8566,8569],{"class":109,"line":470},[107,8563,8313],{"class":1805},[107,8565,2133],{"class":1147},[107,8567,8568],{"class":1161},"\"📟 平板端：中等宽度布局\"",[107,8570,2141],{"class":1147},[107,8572,8573],{"class":109,"line":476},[107,8574,521],{"class":1147},[107,8576,8577],{"class":109,"line":482},[107,8578,538],{"class":1147},[107,8580,8581],{"class":109,"line":488},[107,8582,479],{"emptyLinePlaceholder":329},[107,8584,8585,8587,8589,8591,8593,8595,8597],{"class":109,"line":494},[107,8586,8540],{"class":1199},[107,8588,8345],{"class":1147},[107,8590,8348],{"class":1805},[107,8592,2133],{"class":1147},[107,8594,8264],{"class":1805},[107,8596,1269],{"class":1199},[107,8598,1772],{"class":1147},[107,8600,8601,8603],{"class":109,"line":500},[107,8602,8557],{"class":1154},[107,8604,2125],{"class":1147},[107,8606,8607,8609,8611,8614],{"class":109,"line":506},[107,8608,8313],{"class":1805},[107,8610,2133],{"class":1147},[107,8612,8613],{"class":1161},"\"🖥️ 桌面端：宽屏完整展示\"",[107,8615,2141],{"class":1147},[107,8617,8618],{"class":109,"line":512},[107,8619,521],{"class":1147},[107,8621,8622],{"class":109,"line":518},[107,8623,538],{"class":1147},[15,8625,8626,8629,8630,738,8633,8635,8636,8639],{},[24,8627,8628],{},"优点","：HTML 极简，改文案只动样式。",[24,8631,8632],{},"局限",[19,8634,8185],{}," 只能是字符串，无法嵌入 ",[19,8637,8638],{},"\u003Cem>"," 等富文本标签。",[37,8641,8643],{"id":8642},"方案二多段-span-display-切换","方案二：多段 span + display 切换",[15,8645,8646,8647,8649],{},"需要高亮关键词、换行或内联标签时，把各断点文案写成真实 DOM，用 ",[19,8648,1392],{}," 控制显隐：",[77,8651,8653],{"className":1139,"code":8652,"language":1135,"meta":85,"style":85},"\u003Cp class=\"responsive-spans\">\n \u003Cspan class=\"is-mobile\">当前宽度 \u003C 640px，显示\u003Cem>手机\u003C\u002Fem>文案。\u003C\u002Fspan>\n \u003Cspan class=\"is-tablet\">当前宽度 640px ~ 1023px，显示\u003Cem>平板\u003C\u002Fem>文案。\u003C\u002Fspan>\n \u003Cspan class=\"is-desktop\">当前宽度 ≥ 1024px，显示\u003Cem>桌面\u003C\u002Fem>文案。\u003C\u002Fspan>\n\u003C\u002Fp>\n",[19,8654,8655,8670,8706,8735,8764],{"__ignoreMap":85},[107,8656,8657,8659,8661,8663,8665,8668],{"class":109,"line":110},[107,8658,1148],{"class":1147},[107,8660,15],{"class":1151},[107,8662,2676],{"class":1154},[107,8664,1158],{"class":1147},[107,8666,8667],{"class":1161},"\"responsive-spans\"",[107,8669,1170],{"class":1147},[107,8671,8672,8674,8676,8678,8680,8683,8686,8689,8692,8694,8697,8699,8702,8704],{"class":109,"line":116},[107,8673,2670],{"class":1147},[107,8675,107],{"class":1151},[107,8677,2676],{"class":1154},[107,8679,1158],{"class":1147},[107,8681,8682],{"class":1161},"\"is-mobile\"",[107,8684,8685],{"class":1147},">当前宽度 ",[107,8687,1148],{"class":8688},"s7hpK",[107,8690,8691],{"class":1147}," 640px，显示\u003C",[107,8693,1266],{"class":1151},[107,8695,8696],{"class":1147},">手机\u003C\u002F",[107,8698,1266],{"class":1151},[107,8700,8701],{"class":1147},">文案。\u003C\u002F",[107,8703,107],{"class":1151},[107,8705,1170],{"class":1147},[107,8707,8708,8710,8712,8714,8716,8719,8722,8724,8727,8729,8731,8733],{"class":109,"line":122},[107,8709,2670],{"class":1147},[107,8711,107],{"class":1151},[107,8713,2676],{"class":1154},[107,8715,1158],{"class":1147},[107,8717,8718],{"class":1161},"\"is-tablet\"",[107,8720,8721],{"class":1147},">当前宽度 640px ~ 1023px，显示\u003C",[107,8723,1266],{"class":1151},[107,8725,8726],{"class":1147},">平板\u003C\u002F",[107,8728,1266],{"class":1151},[107,8730,8701],{"class":1147},[107,8732,107],{"class":1151},[107,8734,1170],{"class":1147},[107,8736,8737,8739,8741,8743,8745,8748,8751,8753,8756,8758,8760,8762],{"class":109,"line":128},[107,8738,2670],{"class":1147},[107,8740,107],{"class":1151},[107,8742,2676],{"class":1154},[107,8744,1158],{"class":1147},[107,8746,8747],{"class":1161},"\"is-desktop\"",[107,8749,8750],{"class":1147},">当前宽度 ≥ 1024px，显示\u003C",[107,8752,1266],{"class":1151},[107,8754,8755],{"class":1147},">桌面\u003C\u002F",[107,8757,1266],{"class":1151},[107,8759,8701],{"class":1147},[107,8761,107],{"class":1151},[107,8763,1170],{"class":1147},[107,8765,8766,8768,8770],{"class":109,"line":134},[107,8767,1207],{"class":1147},[107,8769,15],{"class":1151},[107,8771,1170],{"class":1147},[430,8773,8775],{"lang":8233,"title":8774},"按断点显示\u002F隐藏",[77,8776,8778],{"className":8237,"code":8777,"language":8233,"meta":85,"style":85},".responsive-spans {\n span {\n display: none;\n }\n\n .is-mobile {\n display: inline;\n }\n\n @media (min-width: 640px) {\n .is-mobile { display: none; }\n .is-tablet { display: inline; }\n }\n\n @media (min-width: 1024px) {\n .is-tablet { display: none; }\n .is-desktop { display: inline; }\n }\n}\n",[19,8779,8780,8787,8794,8805,8809,8813,8820,8831,8835,8839,8856,8873,8888,8892,8896,8912,8926,8941,8945],{"__ignoreMap":85},[107,8781,8782,8785],{"class":109,"line":110},[107,8783,8784],{"class":1154},".responsive-spans",[107,8786,2125],{"class":1147},[107,8788,8789,8792],{"class":109,"line":116},[107,8790,8791],{"class":1151}," span",[107,8793,2125],{"class":1147},[107,8795,8796,8799,8801,8803],{"class":109,"line":122},[107,8797,8798],{"class":1805}," display",[107,8800,2133],{"class":1147},[107,8802,5270],{"class":1805},[107,8804,2141],{"class":1147},[107,8806,8807],{"class":109,"line":128},[107,8808,521],{"class":1147},[107,8810,8811],{"class":109,"line":134},[107,8812,479],{"emptyLinePlaceholder":329},[107,8814,8815,8818],{"class":109,"line":140},[107,8816,8817],{"class":1154}," .is-mobile",[107,8819,2125],{"class":1147},[107,8821,8822,8824,8826,8829],{"class":109,"line":470},[107,8823,8798],{"class":1805},[107,8825,2133],{"class":1147},[107,8827,8828],{"class":1805},"inline",[107,8830,2141],{"class":1147},[107,8832,8833],{"class":109,"line":476},[107,8834,521],{"class":1147},[107,8836,8837],{"class":109,"line":482},[107,8838,479],{"emptyLinePlaceholder":329},[107,8840,8841,8844,8846,8848,8850,8852,8854],{"class":109,"line":488},[107,8842,8843],{"class":1199}," @media",[107,8845,8345],{"class":1147},[107,8847,8348],{"class":1805},[107,8849,2133],{"class":1147},[107,8851,8250],{"class":1805},[107,8853,1269],{"class":1199},[107,8855,1772],{"class":1147},[107,8857,8858,8861,8864,8866,8868,8870],{"class":109,"line":494},[107,8859,8860],{"class":1154}," .is-mobile",[107,8862,8863],{"class":1147}," { ",[107,8865,1392],{"class":1805},[107,8867,2133],{"class":1147},[107,8869,5270],{"class":1805},[107,8871,8872],{"class":1147},"; }\n",[107,8874,8875,8878,8880,8882,8884,8886],{"class":109,"line":500},[107,8876,8877],{"class":1154}," .is-tablet",[107,8879,8863],{"class":1147},[107,8881,1392],{"class":1805},[107,8883,2133],{"class":1147},[107,8885,8828],{"class":1805},[107,8887,8872],{"class":1147},[107,8889,8890],{"class":109,"line":506},[107,8891,521],{"class":1147},[107,8893,8894],{"class":109,"line":512},[107,8895,479],{"emptyLinePlaceholder":329},[107,8897,8898,8900,8902,8904,8906,8908,8910],{"class":109,"line":518},[107,8899,8843],{"class":1199},[107,8901,8345],{"class":1147},[107,8903,8348],{"class":1805},[107,8905,2133],{"class":1147},[107,8907,8264],{"class":1805},[107,8909,1269],{"class":1199},[107,8911,1772],{"class":1147},[107,8913,8914,8916,8918,8920,8922,8924],{"class":109,"line":524},[107,8915,8877],{"class":1154},[107,8917,8863],{"class":1147},[107,8919,1392],{"class":1805},[107,8921,2133],{"class":1147},[107,8923,5270],{"class":1805},[107,8925,8872],{"class":1147},[107,8927,8928,8931,8933,8935,8937,8939],{"class":109,"line":529},[107,8929,8930],{"class":1154}," .is-desktop",[107,8932,8863],{"class":1147},[107,8934,1392],{"class":1805},[107,8936,2133],{"class":1147},[107,8938,8828],{"class":1805},[107,8940,8872],{"class":1147},[107,8942,8943],{"class":109,"line":535},[107,8944,521],{"class":1147},[107,8946,8947],{"class":109,"line":2481},[107,8948,538],{"class":1147},[15,8950,8951,8953,8954,8957],{},[24,8952,8628],{},"：支持富文本、SEO 友好的真实文本（爬虫能索引到当前可见段）。",[24,8955,8956],{},"代价","：HTML 略冗长，三份文案都要维护。",[37,8959,8960],{"id":8960},"如何选择",[173,8962,8963,8973],{},[176,8964,8965],{},[179,8966,8967,8970],{},[182,8968,8969],{},"场景",[182,8971,8972],{},"推荐方案",[192,8974,8975,8985,8995],{},[179,8976,8977,8980],{},[197,8978,8979],{},"纯装饰性标语、emoji 提示",[197,8981,8982,8983],{},"伪元素 ",[19,8984,8185],{},[179,8986,8987,8990],{},[197,8988,8989],{},"带强调、链接、多行排版",[197,8991,8992,8993],{},"多段 ",[19,8994,107],{},[179,8996,8997,9000],{},[197,8998,8999],{},"强 SEO \u002F 无障碍",[197,9001,9002,9004,9005],{},[19,9003,107],{}," + 语义标签；伪元素方案记得加 ",[19,9006,8223],{},[15,9008,9009,9010,9013],{},"两种方案都",[24,9011,9012],{},"不触发回流中的脚本","，性能友好，也适合 SSR 静态页。",[37,9015,6012],{"id":6012},[15,9017,9018,9019,9029],{},"博客内的 REPL 预览区只有约 300px 宽，",[24,9020,9021,9022,9024,9025,9028],{},"视口 ",[19,9023,8540],{}," 与容器 ",[19,9026,9027],{},"@container"," 的 640 \u002F 1024 断点都凑不齐","。下方用滑块设定「逻辑宽度」，由 CSS 按档位切换文案（断点已缩小为 180px \u002F 260px 以适配预览区；正文方案仍为 640 \u002F 1024）。",[15,9031,9032],{},"拖动滑块或点预设按钮，观察文字与「当前档位」变化：",[2648,9034,9036],{"title":9035},"响应式文字切换",[77,9037,9039],{"className":2653,"code":9038,"language":337,"meta":85,"style":85},"\u003Ctemplate>\n \u003Cdiv class=\"playground\">\n \u003Cdiv class=\"toolbar\">\n \u003Cdiv class=\"segmented\" role=\"group\" aria-label=\"选择档位\">\n \u003Cbutton\n type=\"button\"\n :class=\"{ active: tier === 'mobile' }\"\n @click=\"width = 150\"\n >\n 手机\n \u003C\u002Fbutton>\n \u003Cbutton\n type=\"button\"\n :class=\"{ active: tier === 'tablet' }\"\n @click=\"width = 220\"\n >\n 平板\n \u003C\u002Fbutton>\n \u003Cbutton\n type=\"button\"\n :class=\"{ active: tier === 'desktop' }\"\n @click=\"width = 320\"\n >\n 桌面\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"slider-row\">\n \u003Cspan>宽度\u003C\u002Fspan>\n \u003Cinput\n v-model.number=\"width\"\n type=\"range\"\n min=\"120\"\n max=\"400\"\n step=\"10\"\n >\n \u003Cspan class=\"width-readout\">{{ width }}px\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv\n class=\"viewport\"\n :class=\"`tier-${tier}`\"\n :style=\"{ width: `${width}px` }\"\n >\n \u003Cmain class=\"demo\">\n \u003Cp class=\"demo-label\">预览\u003C\u002Fp>\n \u003Cp class=\"responsive-text\" aria-label=\"随容器宽度变化的提示文字\" \u002F>\n \u003Cp class=\"responsive-spans\">\n \u003Cspan class=\"is-mobile\">窄容器，显示\u003Cem>手机\u003C\u002Fem>文案。\u003C\u002Fspan>\n \u003Cspan class=\"is-tablet\">中等容器，显示\u003Cem>平板\u003C\u002Fem>文案。\u003C\u002Fspan>\n \u003Cspan class=\"is-desktop\">宽容器，显示\u003Cem>桌面\u003C\u002Fem>文案。\u003C\u002Fspan>\n \u003C\u002Fp>\n \u003C\u002Fmain>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\nconst width = ref(150)\n\nconst tier = computed(() => {\n if (width.value >= 260) return 'desktop'\n if (width.value >= 180) return 'tablet'\n return 'mobile'\n})\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.playground {\n box-sizing: border-box;\n width: 100%;\n padding: 12px;\n font-family: system-ui, -apple-system, \"Segoe UI\", sans-serif;\n}\n\n.toolbar {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-bottom: 12px;\n}\n\n.segmented {\n display: flex;\n gap: 2px;\n padding: 3px;\n border-radius: 8px;\n background: #e2e8f0;\n}\n\n.segmented button {\n flex: 1;\n border: none;\n border-radius: 6px;\n padding: 7px 0;\n font-size: 12px;\n font-weight: 500;\n color: #64748b;\n background: transparent;\n cursor: pointer;\n transition: background 0.15s, color 0.15s, box-shadow 0.15s;\n}\n\n.segmented button:hover {\n color: #334155;\n}\n\n.segmented button.active {\n background: #fff;\n color: #0f172a;\n box-shadow: 0 1px 2px rgb(15 23 42 \u002F 0.08);\n}\n\n.slider-row {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 11px;\n color: #64748b;\n}\n\n.slider-row input {\n flex: 1;\n accent-color: #0ea5e9;\n}\n\n.width-readout {\n min-width: 3rem;\n font-variant-numeric: tabular-nums;\n text-align: right;\n color: #334155;\n}\n\n.viewport {\n max-width: 100%;\n border: 1px solid #334155;\n border-radius: 10px;\n transition: width 0.15s ease;\n overflow: hidden;\n}\n\n.demo {\n padding: 16px;\n background: #1e293b;\n color: #e2e8f0;\n}\n\n.demo-label {\n margin: 0 0 12px;\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n color: #64748b;\n}\n\n.responsive-text {\n margin: 0 0 12px;\n font-size: 18px;\n font-weight: 700;\n line-height: 1.4;\n color: #38bdf8;\n}\n\n.tier-mobile .responsive-text::before {\n content: \"📱 手机端：窄屏阅读体验\";\n}\n\n.tier-tablet .responsive-text::before {\n content: \"📟 平板端：中等宽度布局\";\n}\n\n.tier-desktop .responsive-text::before {\n content: \"🖥️ 桌面端：宽屏完整展示\";\n}\n\n.responsive-spans {\n margin: 0;\n font-size: 13px;\n line-height: 1.6;\n color: #cbd5e1;\n}\n\n.responsive-spans span {\n display: none;\n}\n\n.tier-mobile .responsive-spans .is-mobile {\n display: inline;\n}\n\n.tier-tablet .responsive-spans .is-tablet {\n display: inline;\n}\n\n.tier-desktop .responsive-spans .is-desktop {\n display: inline;\n}\n\n.responsive-spans em {\n font-style: normal;\n color: #f472b6;\n font-weight: 600;\n}\n\u003C\u002Fstyle>\n",[19,9040,9041,9049,9064,9078,9108,9115,9125,9135,9145,9150,9155,9164,9170,9178,9187,9196,9200,9205,9213,9219,9227,9236,9245,9249,9254,9262,9270,9274,9289,9302,9309,9319,9328,9338,9348,9358,9362,9382,9390,9398,9402,9408,9417,9427,9436,9440,9456,9476,9500,9514,9541,9568,9595,9603,9611,9619,9627,9635,9639,9649,9659,9663,9680,9684,9701,9722,9740,9747,9752,9760,9764,9774,9781,9791,9803,9815,9840,9844,9848,9854,9864,9874,9886,9898,9902,9906,9913,9923,9935,9947,9959,9970,9974,9978,9987,9997,10007,10019,10034,10046,10056,10067,10079,10090,10121,10126,10131,10143,10155,10160,10165,10177,10188,10200,10236,10241,10246,10254,10265,10276,10289,10302,10313,10318,10323,10333,10344,10357,10362,10367,10375,10389,10402,10414,10425,10430,10435,10443,10457,10475,10488,10504,10517,10522,10527,10535,10548,10560,10571,10576,10581,10589,10606,10619,10630,10645,10658,10669,10674,10679,10686,10703,10717,10729,10741,10752,10757,10762,10773,10784,10789,10794,10804,10815,10820,10825,10835,10846,10851,10856,10863,10874,10888,10900,10912,10917,10922,10932,10943,10948,10953,10966,10977,10982,10987,10999,11010,11015,11020,11032,11043,11048,11053,11063,11076,11088,11099,11104],{"__ignoreMap":85},[107,9042,9043,9045,9047],{"class":109,"line":110},[107,9044,1148],{"class":1147},[107,9046,2663],{"class":1151},[107,9048,1170],{"class":1147},[107,9050,9051,9053,9055,9057,9059,9062],{"class":109,"line":116},[107,9052,2670],{"class":1147},[107,9054,2673],{"class":1151},[107,9056,2676],{"class":1154},[107,9058,1158],{"class":1147},[107,9060,9061],{"class":1161},"\"playground\"",[107,9063,1170],{"class":1147},[107,9065,9066,9068,9070,9072,9074,9076],{"class":109,"line":122},[107,9067,2688],{"class":1147},[107,9069,2673],{"class":1151},[107,9071,2676],{"class":1154},[107,9073,1158],{"class":1147},[107,9075,3923],{"class":1161},[107,9077,1170],{"class":1147},[107,9079,9080,9082,9084,9086,9088,9091,9094,9096,9099,9101,9103,9106],{"class":109,"line":128},[107,9081,2704],{"class":1147},[107,9083,2673],{"class":1151},[107,9085,2676],{"class":1154},[107,9087,1158],{"class":1147},[107,9089,9090],{"class":1161},"\"segmented\"",[107,9092,9093],{"class":1154}," role",[107,9095,1158],{"class":1147},[107,9097,9098],{"class":1161},"\"group\"",[107,9100,8207],{"class":1154},[107,9102,1158],{"class":1147},[107,9104,9105],{"class":1161},"\"选择档位\"",[107,9107,1170],{"class":1147},[107,9109,9110,9112],{"class":109,"line":134},[107,9111,3952],{"class":1147},[107,9113,9114],{"class":1151},"button\n",[107,9116,9117,9120,9122],{"class":109,"line":140},[107,9118,9119],{"class":1154}," type",[107,9121,1158],{"class":1147},[107,9123,9124],{"class":1161},"\"button\"\n",[107,9126,9127,9130,9132],{"class":109,"line":470},[107,9128,9129],{"class":1154}," :class",[107,9131,1158],{"class":1147},[107,9133,9134],{"class":1161},"\"{ active: tier === 'mobile' }\"\n",[107,9136,9137,9140,9142],{"class":109,"line":476},[107,9138,9139],{"class":1154}," @click",[107,9141,1158],{"class":1147},[107,9143,9144],{"class":1161},"\"width = 150\"\n",[107,9146,9147],{"class":109,"line":482},[107,9148,9149],{"class":1147}," >\n",[107,9151,9152],{"class":109,"line":488},[107,9153,9154],{"class":1147}," 手机\n",[107,9156,9157,9159,9162],{"class":109,"line":494},[107,9158,5534],{"class":1147},[107,9160,9161],{"class":1151},"button",[107,9163,1170],{"class":1147},[107,9165,9166,9168],{"class":109,"line":500},[107,9167,3952],{"class":1147},[107,9169,9114],{"class":1151},[107,9171,9172,9174,9176],{"class":109,"line":506},[107,9173,9119],{"class":1154},[107,9175,1158],{"class":1147},[107,9177,9124],{"class":1161},[107,9179,9180,9182,9184],{"class":109,"line":512},[107,9181,9129],{"class":1154},[107,9183,1158],{"class":1147},[107,9185,9186],{"class":1161},"\"{ active: tier === 'tablet' }\"\n",[107,9188,9189,9191,9193],{"class":109,"line":518},[107,9190,9139],{"class":1154},[107,9192,1158],{"class":1147},[107,9194,9195],{"class":1161},"\"width = 220\"\n",[107,9197,9198],{"class":109,"line":524},[107,9199,9149],{"class":1147},[107,9201,9202],{"class":109,"line":529},[107,9203,9204],{"class":1147}," 平板\n",[107,9206,9207,9209,9211],{"class":109,"line":535},[107,9208,5534],{"class":1147},[107,9210,9161],{"class":1151},[107,9212,1170],{"class":1147},[107,9214,9215,9217],{"class":109,"line":2481},[107,9216,3952],{"class":1147},[107,9218,9114],{"class":1151},[107,9220,9221,9223,9225],{"class":109,"line":2487},[107,9222,9119],{"class":1154},[107,9224,1158],{"class":1147},[107,9226,9124],{"class":1161},[107,9228,9229,9231,9233],{"class":109,"line":2495},[107,9230,9129],{"class":1154},[107,9232,1158],{"class":1147},[107,9234,9235],{"class":1161},"\"{ active: tier === 'desktop' }\"\n",[107,9237,9238,9240,9242],{"class":109,"line":2500},[107,9239,9139],{"class":1154},[107,9241,1158],{"class":1147},[107,9243,9244],{"class":1161},"\"width = 320\"\n",[107,9246,9247],{"class":109,"line":2505},[107,9248,9149],{"class":1147},[107,9250,9251],{"class":109,"line":2513},[107,9252,9253],{"class":1147}," 桌面\n",[107,9255,9256,9258,9260],{"class":109,"line":2536},[107,9257,5534],{"class":1147},[107,9259,9161],{"class":1151},[107,9261,1170],{"class":1147},[107,9263,9264,9266,9268],{"class":109,"line":2541},[107,9265,2725],{"class":1147},[107,9267,2673],{"class":1151},[107,9269,1170],{"class":1147},[107,9271,9272],{"class":109,"line":2546},[107,9273,479],{"emptyLinePlaceholder":329},[107,9275,9276,9278,9280,9282,9284,9287],{"class":109,"line":2556},[107,9277,2704],{"class":1147},[107,9279,2673],{"class":1151},[107,9281,2676],{"class":1154},[107,9283,1158],{"class":1147},[107,9285,9286],{"class":1161},"\"slider-row\"",[107,9288,1170],{"class":1147},[107,9290,9291,9293,9295,9298,9300],{"class":109,"line":2564},[107,9292,3952],{"class":1147},[107,9294,107],{"class":1151},[107,9296,9297],{"class":1147},">宽度\u003C\u002F",[107,9299,107],{"class":1151},[107,9301,1170],{"class":1147},[107,9303,9304,9306],{"class":109,"line":2572},[107,9305,3952],{"class":1147},[107,9307,9308],{"class":1151},"input\n",[107,9310,9311,9314,9316],{"class":109,"line":2582},[107,9312,9313],{"class":1154}," v-model.number",[107,9315,1158],{"class":1147},[107,9317,9318],{"class":1161},"\"width\"\n",[107,9320,9321,9323,9325],{"class":109,"line":2622},[107,9322,9119],{"class":1154},[107,9324,1158],{"class":1147},[107,9326,9327],{"class":1161},"\"range\"\n",[107,9329,9330,9333,9335],{"class":109,"line":2627},[107,9331,9332],{"class":1154}," min",[107,9334,1158],{"class":1147},[107,9336,9337],{"class":1161},"\"120\"\n",[107,9339,9340,9343,9345],{"class":109,"line":3086},[107,9341,9342],{"class":1154}," max",[107,9344,1158],{"class":1147},[107,9346,9347],{"class":1161},"\"400\"\n",[107,9349,9350,9353,9355],{"class":109,"line":3095},[107,9351,9352],{"class":1154}," step",[107,9354,1158],{"class":1147},[107,9356,9357],{"class":1161},"\"10\"\n",[107,9359,9360],{"class":109,"line":3110},[107,9361,9149],{"class":1147},[107,9363,9364,9366,9368,9370,9372,9375,9378,9380],{"class":109,"line":3145},[107,9365,3952],{"class":1147},[107,9367,107],{"class":1151},[107,9369,2676],{"class":1154},[107,9371,1158],{"class":1147},[107,9373,9374],{"class":1161},"\"width-readout\"",[107,9376,9377],{"class":1147},">{{ width }}px\u003C\u002F",[107,9379,107],{"class":1151},[107,9381,1170],{"class":1147},[107,9383,9384,9386,9388],{"class":109,"line":3172},[107,9385,2725],{"class":1147},[107,9387,2673],{"class":1151},[107,9389,1170],{"class":1147},[107,9391,9392,9394,9396],{"class":109,"line":3201},[107,9393,2734],{"class":1147},[107,9395,2673],{"class":1151},[107,9397,1170],{"class":1147},[107,9399,9400],{"class":109,"line":3240},[107,9401,479],{"emptyLinePlaceholder":329},[107,9403,9404,9406],{"class":109,"line":3245},[107,9405,2688],{"class":1147},[107,9407,6380],{"class":1151},[107,9409,9410,9412,9414],{"class":109,"line":3252},[107,9411,6385],{"class":1154},[107,9413,1158],{"class":1147},[107,9415,9416],{"class":1161},"\"viewport\"\n",[107,9418,9419,9422,9424],{"class":109,"line":3273},[107,9420,9421],{"class":1154}," :class",[107,9423,1158],{"class":1147},[107,9425,9426],{"class":1161},"\"`tier-${tier}`\"\n",[107,9428,9429,9431,9433],{"class":109,"line":3281},[107,9430,6395],{"class":1154},[107,9432,1158],{"class":1147},[107,9434,9435],{"class":1161},"\"{ width: `${width}px` }\"\n",[107,9437,9438],{"class":109,"line":3322},[107,9439,6405],{"class":1147},[107,9441,9442,9444,9447,9449,9451,9454],{"class":109,"line":3361},[107,9443,2704],{"class":1147},[107,9445,9446],{"class":1151},"main",[107,9448,2676],{"class":1154},[107,9450,1158],{"class":1147},[107,9452,9453],{"class":1161},"\"demo\"",[107,9455,1170],{"class":1147},[107,9457,9458,9460,9462,9464,9466,9469,9472,9474],{"class":109,"line":3389},[107,9459,3952],{"class":1147},[107,9461,15],{"class":1151},[107,9463,2676],{"class":1154},[107,9465,1158],{"class":1147},[107,9467,9468],{"class":1161},"\"demo-label\"",[107,9470,9471],{"class":1147},">预览\u003C\u002F",[107,9473,15],{"class":1151},[107,9475,1170],{"class":1147},[107,9477,9478,9480,9482,9484,9486,9488,9490,9492,9495,9498],{"class":109,"line":3394},[107,9479,3952],{"class":1147},[107,9481,15],{"class":1151},[107,9483,2676],{"class":1154},[107,9485,1158],{"class":1147},[107,9487,8204],{"class":1161},[107,9489,8207],{"class":1154},[107,9491,1158],{"class":1147},[107,9493,9494],{"class":1161},"\"随容器宽度变化的提示文字\"",[107,9496,9497],{"class":8688}," \u002F",[107,9499,1170],{"class":1147},[107,9501,9502,9504,9506,9508,9510,9512],{"class":109,"line":3399},[107,9503,3952],{"class":1147},[107,9505,15],{"class":1151},[107,9507,2676],{"class":1154},[107,9509,1158],{"class":1147},[107,9511,8667],{"class":1161},[107,9513,1170],{"class":1147},[107,9515,9516,9518,9520,9522,9524,9526,9529,9531,9533,9535,9537,9539],{"class":109,"line":3406},[107,9517,5508],{"class":1147},[107,9519,107],{"class":1151},[107,9521,2676],{"class":1154},[107,9523,1158],{"class":1147},[107,9525,8682],{"class":1161},[107,9527,9528],{"class":1147},">窄容器，显示\u003C",[107,9530,1266],{"class":1151},[107,9532,8696],{"class":1147},[107,9534,1266],{"class":1151},[107,9536,8701],{"class":1147},[107,9538,107],{"class":1151},[107,9540,1170],{"class":1147},[107,9542,9543,9545,9547,9549,9551,9553,9556,9558,9560,9562,9564,9566],{"class":109,"line":3426},[107,9544,5508],{"class":1147},[107,9546,107],{"class":1151},[107,9548,2676],{"class":1154},[107,9550,1158],{"class":1147},[107,9552,8718],{"class":1161},[107,9554,9555],{"class":1147},">中等容器，显示\u003C",[107,9557,1266],{"class":1151},[107,9559,8726],{"class":1147},[107,9561,1266],{"class":1151},[107,9563,8701],{"class":1147},[107,9565,107],{"class":1151},[107,9567,1170],{"class":1147},[107,9569,9570,9572,9574,9576,9578,9580,9583,9585,9587,9589,9591,9593],{"class":109,"line":3433},[107,9571,5508],{"class":1147},[107,9573,107],{"class":1151},[107,9575,2676],{"class":1154},[107,9577,1158],{"class":1147},[107,9579,8747],{"class":1161},[107,9581,9582],{"class":1147},">宽容器，显示\u003C",[107,9584,1266],{"class":1151},[107,9586,8755],{"class":1147},[107,9588,1266],{"class":1151},[107,9590,8701],{"class":1147},[107,9592,107],{"class":1151},[107,9594,1170],{"class":1147},[107,9596,9597,9599,9601],{"class":109,"line":3469},[107,9598,5534],{"class":1147},[107,9600,15],{"class":1151},[107,9602,1170],{"class":1147},[107,9604,9605,9607,9609],{"class":109,"line":3504},[107,9606,2725],{"class":1147},[107,9608,9446],{"class":1151},[107,9610,1170],{"class":1147},[107,9612,9613,9615,9617],{"class":109,"line":3521},[107,9614,2734],{"class":1147},[107,9616,2673],{"class":1151},[107,9618,1170],{"class":1147},[107,9620,9621,9623,9625],{"class":109,"line":3526},[107,9622,2743],{"class":1147},[107,9624,2673],{"class":1151},[107,9626,1170],{"class":1147},[107,9628,9629,9631,9633],{"class":109,"line":3531},[107,9630,1207],{"class":1147},[107,9632,2663],{"class":1151},[107,9634,1170],{"class":1147},[107,9636,9637],{"class":109,"line":3540},[107,9638,479],{"emptyLinePlaceholder":329},[107,9640,9641,9643,9645,9647],{"class":109,"line":3547},[107,9642,1148],{"class":1147},[107,9644,1177],{"class":1151},[107,9646,4090],{"class":1154},[107,9648,1170],{"class":1147},[107,9650,9651,9653,9655,9657],{"class":109,"line":3554},[107,9652,4097],{"class":1199},[107,9654,4100],{"class":1147},[107,9656,4103],{"class":1199},[107,9658,4106],{"class":1161},[107,9660,9661],{"class":109,"line":3563},[107,9662,479],{"emptyLinePlaceholder":329},[107,9664,9665,9667,9670,9672,9674,9676,9678],{"class":109,"line":3602},[107,9666,4115],{"class":1199},[107,9668,9669],{"class":1805}," width",[107,9671,4121],{"class":1199},[107,9673,4124],{"class":1154},[107,9675,1190],{"class":1147},[107,9677,5099],{"class":1805},[107,9679,2478],{"class":1147},[107,9681,9682],{"class":109,"line":3607},[107,9683,479],{"emptyLinePlaceholder":329},[107,9685,9686,9688,9691,9693,9695,9697,9699],{"class":109,"line":3612},[107,9687,4115],{"class":1199},[107,9689,9690],{"class":1805}," tier",[107,9692,4121],{"class":1199},[107,9694,4147],{"class":1154},[107,9696,4150],{"class":1147},[107,9698,4153],{"class":1199},[107,9700,2125],{"class":1147},[107,9702,9703,9705,9708,9711,9714,9716,9719],{"class":109,"line":3617},[107,9704,1854],{"class":1199},[107,9706,9707],{"class":1147}," (width.value ",[107,9709,9710],{"class":1199},">=",[107,9712,9713],{"class":1805}," 260",[107,9715,1939],{"class":1147},[107,9717,9718],{"class":1199},"return",[107,9720,9721],{"class":1161}," 'desktop'\n",[107,9723,9724,9726,9728,9730,9733,9735,9737],{"class":109,"line":3625},[107,9725,1854],{"class":1199},[107,9727,9707],{"class":1147},[107,9729,9710],{"class":1199},[107,9731,9732],{"class":1805}," 180",[107,9734,1939],{"class":1147},[107,9736,9718],{"class":1199},[107,9738,9739],{"class":1161}," 'tablet'\n",[107,9741,9742,9744],{"class":109,"line":3637},[107,9743,1875],{"class":1199},[107,9745,9746],{"class":1161}," 'mobile'\n",[107,9748,9749],{"class":109,"line":3652},[107,9750,9751],{"class":1147},"})\n",[107,9753,9754,9756,9758],{"class":109,"line":3665},[107,9755,1207],{"class":1147},[107,9757,1177],{"class":1151},[107,9759,1170],{"class":1147},[107,9761,9762],{"class":109,"line":3678},[107,9763,479],{"emptyLinePlaceholder":329},[107,9765,9766,9768,9770,9772],{"class":109,"line":3683},[107,9767,1148],{"class":1147},[107,9769,311],{"class":1151},[107,9771,2768],{"class":1154},[107,9773,1170],{"class":1147},[107,9775,9776,9779],{"class":109,"line":6830},[107,9777,9778],{"class":1154},".playground",[107,9780,2125],{"class":1147},[107,9782,9783,9785,9787,9789],{"class":109,"line":6842},[107,9784,4416],{"class":1805},[107,9786,2133],{"class":1147},[107,9788,2092],{"class":1805},[107,9790,2141],{"class":1147},[107,9792,9793,9795,9797,9799,9801],{"class":109,"line":6855},[107,9794,2976],{"class":1805},[107,9796,2133],{"class":1147},[107,9798,2986],{"class":1805},[107,9800,1942],{"class":1199},[107,9802,2141],{"class":1147},[107,9804,9805,9807,9809,9811,9813],{"class":109,"line":6860},[107,9806,2232],{"class":1805},[107,9808,2133],{"class":1147},[107,9810,2873],{"class":1805},[107,9812,1269],{"class":1199},[107,9814,2141],{"class":1147},[107,9816,9817,9819,9821,9824,9826,9829,9831,9834,9836,9838],{"class":109,"line":6865},[107,9818,6619],{"class":1805},[107,9820,2133],{"class":1147},[107,9822,9823],{"class":1805},"system-ui",[107,9825,2299],{"class":1147},[107,9827,9828],{"class":1805},"-apple-system",[107,9830,2299],{"class":1147},[107,9832,9833],{"class":1161},"\"Segoe UI\"",[107,9835,2299],{"class":1147},[107,9837,6624],{"class":1805},[107,9839,2141],{"class":1147},[107,9841,9842],{"class":109,"line":6872},[107,9843,538],{"class":1147},[107,9845,9846],{"class":109,"line":6883},[107,9847,479],{"emptyLinePlaceholder":329},[107,9849,9850,9852],{"class":109,"line":6895},[107,9851,4258],{"class":1154},[107,9853,2125],{"class":1147},[107,9855,9856,9858,9860,9862],{"class":109,"line":6908},[107,9857,2782],{"class":1805},[107,9859,2133],{"class":1147},[107,9861,4269],{"class":1805},[107,9863,2141],{"class":1147},[107,9865,9866,9868,9870,9872],{"class":109,"line":6919},[107,9867,6725],{"class":1805},[107,9869,2133],{"class":1147},[107,9871,6730],{"class":1805},[107,9873,2141],{"class":1147},[107,9875,9876,9878,9880,9882,9884],{"class":109,"line":6932},[107,9877,4287],{"class":1805},[107,9879,2133],{"class":1147},[107,9881,2181],{"class":1805},[107,9883,1269],{"class":1199},[107,9885,2141],{"class":1147},[107,9887,9888,9890,9892,9894,9896],{"class":109,"line":6946},[107,9889,4301],{"class":1805},[107,9891,2133],{"class":1147},[107,9893,2873],{"class":1805},[107,9895,1269],{"class":1199},[107,9897,2141],{"class":1147},[107,9899,9900],{"class":109,"line":6959},[107,9901,538],{"class":1147},[107,9903,9904],{"class":109,"line":6972},[107,9905,479],{"emptyLinePlaceholder":329},[107,9907,9908,9911],{"class":109,"line":6984},[107,9909,9910],{"class":1154},".segmented",[107,9912,2125],{"class":1147},[107,9914,9915,9917,9919,9921],{"class":109,"line":7002},[107,9916,2782],{"class":1805},[107,9918,2133],{"class":1147},[107,9920,4269],{"class":1805},[107,9922,2141],{"class":1147},[107,9924,9925,9927,9929,9931,9933],{"class":109,"line":7007},[107,9926,4287],{"class":1805},[107,9928,2133],{"class":1147},[107,9930,2221],{"class":1805},[107,9932,1269],{"class":1199},[107,9934,2141],{"class":1147},[107,9936,9937,9939,9941,9943,9945],{"class":109,"line":7012},[107,9938,2232],{"class":1805},[107,9940,2133],{"class":1147},[107,9942,6558],{"class":1805},[107,9944,1269],{"class":1199},[107,9946,2141],{"class":1147},[107,9948,9949,9951,9953,9955,9957],{"class":109,"line":7019},[107,9950,2269],{"class":1805},[107,9952,2133],{"class":1147},[107,9954,4292],{"class":1805},[107,9956,1269],{"class":1199},[107,9958,2141],{"class":1147},[107,9960,9961,9963,9965,9968],{"class":109,"line":7036},[107,9962,2283],{"class":1805},[107,9964,2133],{"class":1147},[107,9966,9967],{"class":1805},"#e2e8f0",[107,9969,2141],{"class":1147},[107,9971,9972],{"class":109,"line":7051},[107,9973,538],{"class":1147},[107,9975,9976],{"class":109,"line":7065},[107,9977,479],{"emptyLinePlaceholder":329},[107,9979,9980,9982,9985],{"class":109,"line":7082},[107,9981,9910],{"class":1154},[107,9983,9984],{"class":1151}," button",[107,9986,2125],{"class":1147},[107,9988,9989,9991,9993,9995],{"class":109,"line":7095},[107,9990,7022],{"class":1805},[107,9992,2133],{"class":1147},[107,9994,2522],{"class":1805},[107,9996,2141],{"class":1147},[107,9998,9999,10001,10003,10005],{"class":109,"line":7122},[107,10000,2245],{"class":1805},[107,10002,2133],{"class":1147},[107,10004,5270],{"class":1805},[107,10006,2141],{"class":1147},[107,10008,10009,10011,10013,10015,10017],{"class":109,"line":7133},[107,10010,2269],{"class":1805},[107,10012,2133],{"class":1147},[107,10014,4376],{"class":1805},[107,10016,1269],{"class":1199},[107,10018,2141],{"class":1147},[107,10020,10021,10023,10025,10028,10030,10032],{"class":109,"line":7146},[107,10022,2232],{"class":1805},[107,10024,2133],{"class":1147},[107,10026,10027],{"class":1805},"7",[107,10029,1269],{"class":1199},[107,10031,1861],{"class":1805},[107,10033,2141],{"class":1147},[107,10035,10036,10038,10040,10042,10044],{"class":109,"line":7159},[107,10037,3640],{"class":1805},[107,10039,2133],{"class":1147},[107,10041,2873],{"class":1805},[107,10043,1269],{"class":1199},[107,10045,2141],{"class":1147},[107,10047,10048,10050,10052,10054],{"class":109,"line":7171},[107,10049,7136],{"class":1805},[107,10051,2133],{"class":1147},[107,10053,4706],{"class":1805},[107,10055,2141],{"class":1147},[107,10057,10058,10060,10062,10065],{"class":109,"line":7176},[107,10059,3668],{"class":1805},[107,10061,2133],{"class":1147},[107,10063,10064],{"class":1805},"#64748b",[107,10066,2141],{"class":1147},[107,10068,10070,10072,10074,10077],{"class":109,"line":10069},102,[107,10071,2283],{"class":1805},[107,10073,2133],{"class":1147},[107,10075,10076],{"class":1805},"transparent",[107,10078,2141],{"class":1147},[107,10080,10082,10084,10086,10088],{"class":109,"line":10081},103,[107,10083,3046],{"class":1805},[107,10085,2133],{"class":1147},[107,10087,3051],{"class":1805},[107,10089,2141],{"class":1147},[107,10091,10093,10095,10097,10099,10102,10104,10106,10108,10110,10112,10114,10117,10119],{"class":109,"line":10092},104,[107,10094,3364],{"class":1805},[107,10096,2133],{"class":1147},[107,10098,1497],{"class":8688},[107,10100,10101],{"class":1805}," 0.15",[107,10103,2525],{"class":1199},[107,10105,2299],{"class":1147},[107,10107,1494],{"class":1805},[107,10109,10101],{"class":1805},[107,10111,2525],{"class":1199},[107,10113,3378],{"class":1147},[107,10115,10116],{"class":1805},"0.15",[107,10118,2525],{"class":1199},[107,10120,2141],{"class":1147},[107,10122,10124],{"class":109,"line":10123},105,[107,10125,538],{"class":1147},[107,10127,10129],{"class":109,"line":10128},106,[107,10130,479],{"emptyLinePlaceholder":329},[107,10132,10134,10136,10138,10141],{"class":109,"line":10133},107,[107,10135,9910],{"class":1154},[107,10137,9984],{"class":1151},[107,10139,10140],{"class":1154},":hover",[107,10142,2125],{"class":1147},[107,10144,10146,10148,10150,10153],{"class":109,"line":10145},108,[107,10147,3668],{"class":1805},[107,10149,2133],{"class":1147},[107,10151,10152],{"class":1805},"#334155",[107,10154,2141],{"class":1147},[107,10156,10158],{"class":109,"line":10157},109,[107,10159,538],{"class":1147},[107,10161,10163],{"class":109,"line":10162},110,[107,10164,479],{"emptyLinePlaceholder":329},[107,10166,10168,10170,10172,10175],{"class":109,"line":10167},111,[107,10169,9910],{"class":1154},[107,10171,9984],{"class":1151},[107,10173,10174],{"class":1154},".active",[107,10176,2125],{"class":1147},[107,10178,10180,10182,10184,10186],{"class":109,"line":10179},112,[107,10181,2283],{"class":1805},[107,10183,2133],{"class":1147},[107,10185,2296],{"class":1805},[107,10187,2141],{"class":1147},[107,10189,10191,10193,10195,10198],{"class":109,"line":10190},113,[107,10192,3668],{"class":1805},[107,10194,2133],{"class":1147},[107,10196,10197],{"class":1805},"#0f172a",[107,10199,2141],{"class":1147},[107,10201,10203,10205,10207,10209,10211,10213,10215,10217,10220,10222,10224,10227,10230,10232,10234],{"class":109,"line":10202},114,[107,10204,3276],{"class":1805},[107,10206,2133],{"class":1147},[107,10208,3260],{"class":1805},[107,10210,1957],{"class":1805},[107,10212,1269],{"class":1199},[107,10214,2427],{"class":1805},[107,10216,1269],{"class":1199},[107,10218,10219],{"class":1805}," rgb",[107,10221,1190],{"class":1147},[107,10223,3645],{"class":1805},[107,10225,10226],{"class":1805}," 23",[107,10228,10229],{"class":1805}," 42",[107,10231,1357],{"class":1147},[107,10233,3356],{"class":1805},[107,10235,2171],{"class":1147},[107,10237,10239],{"class":109,"line":10238},115,[107,10240,538],{"class":1147},[107,10242,10244],{"class":109,"line":10243},116,[107,10245,479],{"emptyLinePlaceholder":329},[107,10247,10249,10252],{"class":109,"line":10248},117,[107,10250,10251],{"class":1154},".slider-row",[107,10253,2125],{"class":1147},[107,10255,10257,10259,10261,10263],{"class":109,"line":10256},118,[107,10258,2782],{"class":1805},[107,10260,2133],{"class":1147},[107,10262,4269],{"class":1805},[107,10264,2141],{"class":1147},[107,10266,10268,10270,10272,10274],{"class":109,"line":10267},119,[107,10269,4276],{"class":1805},[107,10271,2133],{"class":1147},[107,10273,2799],{"class":1805},[107,10275,2141],{"class":1147},[107,10277,10279,10281,10283,10285,10287],{"class":109,"line":10278},120,[107,10280,4287],{"class":1805},[107,10282,2133],{"class":1147},[107,10284,4292],{"class":1805},[107,10286,1269],{"class":1199},[107,10288,2141],{"class":1147},[107,10290,10292,10294,10296,10298,10300],{"class":109,"line":10291},121,[107,10293,3640],{"class":1805},[107,10295,2133],{"class":1147},[107,10297,6753],{"class":1805},[107,10299,1269],{"class":1199},[107,10301,2141],{"class":1147},[107,10303,10305,10307,10309,10311],{"class":109,"line":10304},122,[107,10306,3668],{"class":1805},[107,10308,2133],{"class":1147},[107,10310,10064],{"class":1805},[107,10312,2141],{"class":1147},[107,10314,10316],{"class":109,"line":10315},123,[107,10317,538],{"class":1147},[107,10319,10321],{"class":109,"line":10320},124,[107,10322,479],{"emptyLinePlaceholder":329},[107,10324,10326,10328,10331],{"class":109,"line":10325},125,[107,10327,10251],{"class":1154},[107,10329,10330],{"class":1151}," input",[107,10332,2125],{"class":1147},[107,10334,10336,10338,10340,10342],{"class":109,"line":10335},126,[107,10337,7022],{"class":1805},[107,10339,2133],{"class":1147},[107,10341,2522],{"class":1805},[107,10343,2141],{"class":1147},[107,10345,10347,10350,10352,10355],{"class":109,"line":10346},127,[107,10348,10349],{"class":1805}," accent-color",[107,10351,2133],{"class":1147},[107,10353,10354],{"class":1805},"#0ea5e9",[107,10356,2141],{"class":1147},[107,10358,10360],{"class":109,"line":10359},128,[107,10361,538],{"class":1147},[107,10363,10365],{"class":109,"line":10364},129,[107,10366,479],{"emptyLinePlaceholder":329},[107,10368,10370,10373],{"class":109,"line":10369},130,[107,10371,10372],{"class":1154},".width-readout",[107,10374,2125],{"class":1147},[107,10376,10378,10380,10382,10384,10387],{"class":109,"line":10377},131,[107,10379,7039],{"class":1805},[107,10381,2133],{"class":1147},[107,10383,6558],{"class":1805},[107,10385,10386],{"class":1199},"rem",[107,10388,2141],{"class":1147},[107,10390,10392,10395,10397,10400],{"class":109,"line":10391},132,[107,10393,10394],{"class":1805}," font-variant-numeric",[107,10396,2133],{"class":1147},[107,10398,10399],{"class":1805},"tabular-nums",[107,10401,2141],{"class":1147},[107,10403,10405,10407,10409,10412],{"class":109,"line":10404},133,[107,10406,7162],{"class":1805},[107,10408,2133],{"class":1147},[107,10410,10411],{"class":1805},"right",[107,10413,2141],{"class":1147},[107,10415,10417,10419,10421,10423],{"class":109,"line":10416},134,[107,10418,3668],{"class":1805},[107,10420,2133],{"class":1147},[107,10422,10152],{"class":1805},[107,10424,2141],{"class":1147},[107,10426,10428],{"class":109,"line":10427},135,[107,10429,538],{"class":1147},[107,10431,10433],{"class":109,"line":10432},136,[107,10434,479],{"emptyLinePlaceholder":329},[107,10436,10438,10441],{"class":109,"line":10437},137,[107,10439,10440],{"class":1154},".viewport",[107,10442,2125],{"class":1147},[107,10444,10446,10449,10451,10453,10455],{"class":109,"line":10445},138,[107,10447,10448],{"class":1805}," max-width",[107,10450,2133],{"class":1147},[107,10452,2986],{"class":1805},[107,10454,1942],{"class":1199},[107,10456,2141],{"class":1147},[107,10458,10460,10462,10464,10466,10468,10470,10473],{"class":109,"line":10459},139,[107,10461,2245],{"class":1805},[107,10463,2133],{"class":1147},[107,10465,2522],{"class":1805},[107,10467,1269],{"class":1199},[107,10469,3807],{"class":1805},[107,10471,10472],{"class":1805}," #334155",[107,10474,2141],{"class":1147},[107,10476,10478,10480,10482,10484,10486],{"class":109,"line":10477},140,[107,10479,2269],{"class":1805},[107,10481,2133],{"class":1147},[107,10483,2181],{"class":1805},[107,10485,1269],{"class":1199},[107,10487,2141],{"class":1147},[107,10489,10491,10493,10496,10498,10500,10502],{"class":109,"line":10490},141,[107,10492,3364],{"class":1805},[107,10494,10495],{"class":1147},": width ",[107,10497,10116],{"class":1805},[107,10499,2525],{"class":1199},[107,10501,3375],{"class":1805},[107,10503,2141],{"class":1147},[107,10505,10507,10510,10512,10515],{"class":109,"line":10506},142,[107,10508,10509],{"class":1805}," overflow",[107,10511,2133],{"class":1147},[107,10513,10514],{"class":1805},"hidden",[107,10516,2141],{"class":1147},[107,10518,10520],{"class":109,"line":10519},143,[107,10521,538],{"class":1147},[107,10523,10525],{"class":109,"line":10524},144,[107,10526,479],{"emptyLinePlaceholder":329},[107,10528,10530,10533],{"class":109,"line":10529},145,[107,10531,10532],{"class":1154},".demo",[107,10534,2125],{"class":1147},[107,10536,10538,10540,10542,10544,10546],{"class":109,"line":10537},146,[107,10539,2232],{"class":1805},[107,10541,2133],{"class":1147},[107,10543,4306],{"class":1805},[107,10545,1269],{"class":1199},[107,10547,2141],{"class":1147},[107,10549,10551,10553,10555,10558],{"class":109,"line":10550},147,[107,10552,2283],{"class":1805},[107,10554,2133],{"class":1147},[107,10556,10557],{"class":1805},"#1e293b",[107,10559,2141],{"class":1147},[107,10561,10563,10565,10567,10569],{"class":109,"line":10562},148,[107,10564,3668],{"class":1805},[107,10566,2133],{"class":1147},[107,10568,9967],{"class":1805},[107,10570,2141],{"class":1147},[107,10572,10574],{"class":109,"line":10573},149,[107,10575,538],{"class":1147},[107,10577,10579],{"class":109,"line":10578},150,[107,10580,479],{"emptyLinePlaceholder":329},[107,10582,10584,10587],{"class":109,"line":10583},151,[107,10585,10586],{"class":1154},".demo-label",[107,10588,2125],{"class":1147},[107,10590,10592,10594,10596,10598,10600,10602,10604],{"class":109,"line":10591},152,[107,10593,3628],{"class":1805},[107,10595,2133],{"class":1147},[107,10597,3260],{"class":1805},[107,10599,1861],{"class":1805},[107,10601,3332],{"class":1805},[107,10603,1269],{"class":1199},[107,10605,2141],{"class":1147},[107,10607,10609,10611,10613,10615,10617],{"class":109,"line":10608},153,[107,10610,3640],{"class":1805},[107,10612,2133],{"class":1147},[107,10614,6753],{"class":1805},[107,10616,1269],{"class":1199},[107,10618,2141],{"class":1147},[107,10620,10622,10624,10626,10628],{"class":109,"line":10621},154,[107,10623,7136],{"class":1805},[107,10625,2133],{"class":1147},[107,10627,4706],{"class":1805},[107,10629,2141],{"class":1147},[107,10631,10633,10636,10638,10641,10643],{"class":109,"line":10632},155,[107,10634,10635],{"class":1805}," letter-spacing",[107,10637,2133],{"class":1147},[107,10639,10640],{"class":1805},"0.04",[107,10642,1266],{"class":1199},[107,10644,2141],{"class":1147},[107,10646,10648,10651,10653,10656],{"class":109,"line":10647},156,[107,10649,10650],{"class":1805}," text-transform",[107,10652,2133],{"class":1147},[107,10654,10655],{"class":1805},"uppercase",[107,10657,2141],{"class":1147},[107,10659,10661,10663,10665,10667],{"class":109,"line":10660},157,[107,10662,3668],{"class":1805},[107,10664,2133],{"class":1147},[107,10666,10064],{"class":1805},[107,10668,2141],{"class":1147},[107,10670,10672],{"class":109,"line":10671},158,[107,10673,538],{"class":1147},[107,10675,10677],{"class":109,"line":10676},159,[107,10678,479],{"emptyLinePlaceholder":329},[107,10680,10682,10684],{"class":109,"line":10681},160,[107,10683,8458],{"class":1154},[107,10685,2125],{"class":1147},[107,10687,10689,10691,10693,10695,10697,10699,10701],{"class":109,"line":10688},161,[107,10690,3628],{"class":1805},[107,10692,2133],{"class":1147},[107,10694,3260],{"class":1805},[107,10696,1861],{"class":1805},[107,10698,3332],{"class":1805},[107,10700,1269],{"class":1199},[107,10702,2141],{"class":1147},[107,10704,10706,10708,10710,10713,10715],{"class":109,"line":10705},162,[107,10707,3640],{"class":1805},[107,10709,2133],{"class":1147},[107,10711,10712],{"class":1805},"18",[107,10714,1269],{"class":1199},[107,10716,2141],{"class":1147},[107,10718,10720,10722,10724,10727],{"class":109,"line":10719},163,[107,10721,7136],{"class":1805},[107,10723,2133],{"class":1147},[107,10725,10726],{"class":1805},"700",[107,10728,2141],{"class":1147},[107,10730,10732,10734,10736,10739],{"class":109,"line":10731},164,[107,10733,3655],{"class":1805},[107,10735,2133],{"class":1147},[107,10737,10738],{"class":1805},"1.4",[107,10740,2141],{"class":1147},[107,10742,10744,10746,10748,10750],{"class":109,"line":10743},165,[107,10745,3668],{"class":1805},[107,10747,2133],{"class":1147},[107,10749,7112],{"class":1805},[107,10751,2141],{"class":1147},[107,10753,10755],{"class":109,"line":10754},166,[107,10756,538],{"class":1147},[107,10758,10760],{"class":109,"line":10759},167,[107,10761,479],{"emptyLinePlaceholder":329},[107,10763,10765,10768,10771],{"class":109,"line":10764},168,[107,10766,10767],{"class":1154},".tier-mobile",[107,10769,10770],{"class":1154}," .responsive-text::before",[107,10772,2125],{"class":1147},[107,10774,10776,10778,10780,10782],{"class":109,"line":10775},169,[107,10777,8520],{"class":1805},[107,10779,2133],{"class":1147},[107,10781,8525],{"class":1161},[107,10783,2141],{"class":1147},[107,10785,10787],{"class":109,"line":10786},170,[107,10788,538],{"class":1147},[107,10790,10792],{"class":109,"line":10791},171,[107,10793,479],{"emptyLinePlaceholder":329},[107,10795,10797,10800,10802],{"class":109,"line":10796},172,[107,10798,10799],{"class":1154},".tier-tablet",[107,10801,10770],{"class":1154},[107,10803,2125],{"class":1147},[107,10805,10807,10809,10811,10813],{"class":109,"line":10806},173,[107,10808,8520],{"class":1805},[107,10810,2133],{"class":1147},[107,10812,8568],{"class":1161},[107,10814,2141],{"class":1147},[107,10816,10818],{"class":109,"line":10817},174,[107,10819,538],{"class":1147},[107,10821,10823],{"class":109,"line":10822},175,[107,10824,479],{"emptyLinePlaceholder":329},[107,10826,10828,10831,10833],{"class":109,"line":10827},176,[107,10829,10830],{"class":1154},".tier-desktop",[107,10832,10770],{"class":1154},[107,10834,2125],{"class":1147},[107,10836,10838,10840,10842,10844],{"class":109,"line":10837},177,[107,10839,8520],{"class":1805},[107,10841,2133],{"class":1147},[107,10843,8613],{"class":1161},[107,10845,2141],{"class":1147},[107,10847,10849],{"class":109,"line":10848},178,[107,10850,538],{"class":1147},[107,10852,10854],{"class":109,"line":10853},179,[107,10855,479],{"emptyLinePlaceholder":329},[107,10857,10859,10861],{"class":109,"line":10858},180,[107,10860,8784],{"class":1154},[107,10862,2125],{"class":1147},[107,10864,10866,10868,10870,10872],{"class":109,"line":10865},181,[107,10867,3628],{"class":1805},[107,10869,2133],{"class":1147},[107,10871,3260],{"class":1805},[107,10873,2141],{"class":1147},[107,10875,10877,10879,10881,10884,10886],{"class":109,"line":10876},182,[107,10878,3640],{"class":1805},[107,10880,2133],{"class":1147},[107,10882,10883],{"class":1805},"13",[107,10885,1269],{"class":1199},[107,10887,2141],{"class":1147},[107,10889,10891,10893,10895,10898],{"class":109,"line":10890},183,[107,10892,3655],{"class":1805},[107,10894,2133],{"class":1147},[107,10896,10897],{"class":1805},"1.6",[107,10899,2141],{"class":1147},[107,10901,10903,10905,10907,10910],{"class":109,"line":10902},184,[107,10904,3668],{"class":1805},[107,10906,2133],{"class":1147},[107,10908,10909],{"class":1805},"#cbd5e1",[107,10911,2141],{"class":1147},[107,10913,10915],{"class":109,"line":10914},185,[107,10916,538],{"class":1147},[107,10918,10920],{"class":109,"line":10919},186,[107,10921,479],{"emptyLinePlaceholder":329},[107,10923,10925,10927,10930],{"class":109,"line":10924},187,[107,10926,8784],{"class":1154},[107,10928,10929],{"class":1151}," span",[107,10931,2125],{"class":1147},[107,10933,10935,10937,10939,10941],{"class":109,"line":10934},188,[107,10936,2782],{"class":1805},[107,10938,2133],{"class":1147},[107,10940,5270],{"class":1805},[107,10942,2141],{"class":1147},[107,10944,10946],{"class":109,"line":10945},189,[107,10947,538],{"class":1147},[107,10949,10951],{"class":109,"line":10950},190,[107,10952,479],{"emptyLinePlaceholder":329},[107,10954,10956,10958,10961,10964],{"class":109,"line":10955},191,[107,10957,10767],{"class":1154},[107,10959,10960],{"class":1154}," .responsive-spans",[107,10962,10963],{"class":1154}," .is-mobile",[107,10965,2125],{"class":1147},[107,10967,10969,10971,10973,10975],{"class":109,"line":10968},192,[107,10970,2782],{"class":1805},[107,10972,2133],{"class":1147},[107,10974,8828],{"class":1805},[107,10976,2141],{"class":1147},[107,10978,10980],{"class":109,"line":10979},193,[107,10981,538],{"class":1147},[107,10983,10985],{"class":109,"line":10984},194,[107,10986,479],{"emptyLinePlaceholder":329},[107,10988,10990,10992,10994,10997],{"class":109,"line":10989},195,[107,10991,10799],{"class":1154},[107,10993,10960],{"class":1154},[107,10995,10996],{"class":1154}," .is-tablet",[107,10998,2125],{"class":1147},[107,11000,11002,11004,11006,11008],{"class":109,"line":11001},196,[107,11003,2782],{"class":1805},[107,11005,2133],{"class":1147},[107,11007,8828],{"class":1805},[107,11009,2141],{"class":1147},[107,11011,11013],{"class":109,"line":11012},197,[107,11014,538],{"class":1147},[107,11016,11018],{"class":109,"line":11017},198,[107,11019,479],{"emptyLinePlaceholder":329},[107,11021,11023,11025,11027,11030],{"class":109,"line":11022},199,[107,11024,10830],{"class":1154},[107,11026,10960],{"class":1154},[107,11028,11029],{"class":1154}," .is-desktop",[107,11031,2125],{"class":1147},[107,11033,11035,11037,11039,11041],{"class":109,"line":11034},200,[107,11036,2782],{"class":1805},[107,11038,2133],{"class":1147},[107,11040,8828],{"class":1805},[107,11042,2141],{"class":1147},[107,11044,11046],{"class":109,"line":11045},201,[107,11047,538],{"class":1147},[107,11049,11051],{"class":109,"line":11050},202,[107,11052,479],{"emptyLinePlaceholder":329},[107,11054,11056,11058,11061],{"class":109,"line":11055},203,[107,11057,8784],{"class":1154},[107,11059,11060],{"class":1151}," em",[107,11062,2125],{"class":1147},[107,11064,11066,11069,11071,11074],{"class":109,"line":11065},204,[107,11067,11068],{"class":1805}," font-style",[107,11070,2133],{"class":1147},[107,11072,11073],{"class":1805},"normal",[107,11075,2141],{"class":1147},[107,11077,11079,11081,11083,11086],{"class":109,"line":11078},205,[107,11080,3668],{"class":1805},[107,11082,2133],{"class":1147},[107,11084,11085],{"class":1805},"#f472b6",[107,11087,2141],{"class":1147},[107,11089,11091,11093,11095,11097],{"class":109,"line":11090},206,[107,11092,7136],{"class":1805},[107,11094,2133],{"class":1147},[107,11096,7141],{"class":1805},[107,11098,2141],{"class":1147},[107,11100,11102],{"class":109,"line":11101},207,[107,11103,538],{"class":1147},[107,11105,11107,11109,11111],{"class":109,"line":11106},208,[107,11108,1207],{"class":1147},[107,11110,311],{"class":1151},[107,11112,1170],{"class":1147},[15,11114,11115,11116,11118],{},"将上文代码接入你的页面并部署后，拖窄浏览器窗口，或使用开发者工具的设备模拟，即可验证真实视口的 ",[19,11117,8540],{}," 断点效果。",[37,11120,274],{"id":274},[760,11122,11123,11136,11144],{},[387,11124,11125,11126,11129,11130,11132,11133,11135],{},"用 ",[19,11127,11128],{},"@media (min-width)"," 按断点覆盖 ",[19,11131,8185],{}," 或切换 ",[19,11134,1392],{},"，即可实现无 JS 的响应式文案",[387,11137,11138,11139,11141,11142],{},"纯字符串标语用 ",[19,11140,1356],{}," + mixin 最省事；富文本用多段 ",[19,11143,107],{},[387,11145,11146,11147,11149],{},"伪元素内容对读屏不友好，务必补充 ",[19,11148,8223],{}," 或选用真实 DOM 方案",[311,11151,11152],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":85,"searchDepth":122,"depth":122,"links":11154},[11155,11156,11157,11158,11159],{"id":8178,"depth":116,"text":8179},{"id":8642,"depth":116,"text":8643},{"id":8960,"depth":116,"text":8960},{"id":6012,"depth":116,"text":6012},{"id":274,"depth":116,"text":274},"2026-05-12","不依赖 JavaScript，用媒体查询配合伪元素 content 或多段 span 显示\u002F隐藏，随视口宽度自动切换文案。",{},"\u002Fblog\u002Fcss-responsive-text",{"title":8145,"description":11161},"blog\u002Fcss-responsive-text",[11167,11168,11169],"responsive","media-queries","pseudo-element","DeEdWkyNdRu8JUinAkU4L1nVNQUpWqvb9ku3Q6Mc1CY",{"id":11172,"title":11173,"body":11174,"category":337,"date":11766,"description":11767,"draft":326,"extension":327,"meta":11768,"navigation":329,"path":11769,"seo":11770,"stem":11771,"tags":11772,"__hash__":11775},"blog\u002Fblog\u002Fhello-vue3.md","Vue 3 组合式 API 入门",{"type":8,"value":11175,"toc":11761},[11176,11179,11182,11185,11288,11291,11294,11739,11741,11758],[11,11177,11173],{"id":11178},"vue-3-组合式-api-入门",[15,11180,11181],{},"Vue 3 的组合式 API 让逻辑组织更灵活。下面是一个最小可运行的计数器示例。",[37,11183,11184],{"id":11184},"静态代码展示",[77,11186,11188],{"className":2653,"code":11187,"language":337,"meta":85,"style":85},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cbutton @click=\"count++\">\n 点击次数：{{ count }}\n \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[19,11189,11190,11200,11210,11214,11231,11239,11243,11251,11267,11272,11280],{"__ignoreMap":85},[107,11191,11192,11194,11196,11198],{"class":109,"line":110},[107,11193,1148],{"class":1147},[107,11195,1177],{"class":1151},[107,11197,4090],{"class":1154},[107,11199,1170],{"class":1147},[107,11201,11202,11204,11206,11208],{"class":109,"line":116},[107,11203,4097],{"class":1199},[107,11205,6492],{"class":1147},[107,11207,4103],{"class":1199},[107,11209,4106],{"class":1161},[107,11211,11212],{"class":109,"line":122},[107,11213,479],{"emptyLinePlaceholder":329},[107,11215,11216,11218,11221,11223,11225,11227,11229],{"class":109,"line":128},[107,11217,4115],{"class":1199},[107,11219,11220],{"class":1805}," count",[107,11222,4121],{"class":1199},[107,11224,4124],{"class":1154},[107,11226,1190],{"class":1147},[107,11228,3260],{"class":1805},[107,11230,2478],{"class":1147},[107,11232,11233,11235,11237],{"class":109,"line":134},[107,11234,1207],{"class":1147},[107,11236,1177],{"class":1151},[107,11238,1170],{"class":1147},[107,11240,11241],{"class":109,"line":140},[107,11242,479],{"emptyLinePlaceholder":329},[107,11244,11245,11247,11249],{"class":109,"line":470},[107,11246,1148],{"class":1147},[107,11248,2663],{"class":1151},[107,11250,1170],{"class":1147},[107,11252,11253,11255,11257,11260,11262,11265],{"class":109,"line":476},[107,11254,2670],{"class":1147},[107,11256,9161],{"class":1151},[107,11258,11259],{"class":1154}," @click",[107,11261,1158],{"class":1147},[107,11263,11264],{"class":1161},"\"count++\"",[107,11266,1170],{"class":1147},[107,11268,11269],{"class":109,"line":482},[107,11270,11271],{"class":1147}," 点击次数：{{ count }}\n",[107,11273,11274,11276,11278],{"class":109,"line":488},[107,11275,2743],{"class":1147},[107,11277,9161],{"class":1151},[107,11279,1170],{"class":1147},[107,11281,11282,11284,11286],{"class":109,"line":494},[107,11283,1207],{"class":1147},[107,11285,2663],{"class":1151},[107,11287,1170],{"class":1147},[37,11289,11290],{"id":11290},"实时预览",[15,11292,11293],{},"试着修改下面的代码，右侧会即时渲染效果：",[2648,11295,11297],{"title":11296},"计数器示例",[77,11298,11300],{"className":2653,"code":11299,"language":337,"meta":85,"style":85},"\u003Ctemplate>\n \u003Cdiv class=\"demo\">\n \u003Cp class=\"count\">点击次数：{{ count }}\u003C\u002Fp>\n \u003Cbutton class=\"btn\" @click=\"count++\">点我 +1\u003C\u002Fbutton>\n \u003Cbutton class=\"btn secondary\" @click=\"count = 0\">重置\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.demo {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 24px;\n font-family: sans-serif;\n}\n\n.count {\n font-size: 20px;\n font-weight: 600;\n color: #0f172a;\n}\n\n.btn {\n cursor: pointer;\n border: none;\n border-radius: 999px;\n padding: 10px 18px;\n background: #38bdf8;\n color: #0f1419;\n font-weight: 600;\n}\n\n.btn.secondary {\n background: #e2e8f0;\n color: #334155;\n}\n\u003C\u002Fstyle>\n",[19,11301,11302,11310,11324,11344,11370,11397,11405,11413,11417,11427,11437,11441,11457,11465,11469,11479,11485,11495,11505,11515,11527,11539,11549,11553,11557,11564,11576,11586,11596,11600,11604,11611,11621,11631,11644,11661,11671,11682,11692,11696,11700,11707,11717,11727,11731],{"__ignoreMap":85},[107,11303,11304,11306,11308],{"class":109,"line":110},[107,11305,1148],{"class":1147},[107,11307,2663],{"class":1151},[107,11309,1170],{"class":1147},[107,11311,11312,11314,11316,11318,11320,11322],{"class":109,"line":116},[107,11313,2670],{"class":1147},[107,11315,2673],{"class":1151},[107,11317,2676],{"class":1154},[107,11319,1158],{"class":1147},[107,11321,9453],{"class":1161},[107,11323,1170],{"class":1147},[107,11325,11326,11328,11330,11332,11334,11337,11340,11342],{"class":109,"line":122},[107,11327,2688],{"class":1147},[107,11329,15],{"class":1151},[107,11331,2676],{"class":1154},[107,11333,1158],{"class":1147},[107,11335,11336],{"class":1161},"\"count\"",[107,11338,11339],{"class":1147},">点击次数：{{ count }}\u003C\u002F",[107,11341,15],{"class":1151},[107,11343,1170],{"class":1147},[107,11345,11346,11348,11350,11352,11354,11357,11359,11361,11363,11366,11368],{"class":109,"line":128},[107,11347,2688],{"class":1147},[107,11349,9161],{"class":1151},[107,11351,2676],{"class":1154},[107,11353,1158],{"class":1147},[107,11355,11356],{"class":1161},"\"btn\"",[107,11358,11259],{"class":1154},[107,11360,1158],{"class":1147},[107,11362,11264],{"class":1161},[107,11364,11365],{"class":1147},">点我 +1\u003C\u002F",[107,11367,9161],{"class":1151},[107,11369,1170],{"class":1147},[107,11371,11372,11374,11376,11378,11380,11383,11385,11387,11390,11393,11395],{"class":109,"line":134},[107,11373,2688],{"class":1147},[107,11375,9161],{"class":1151},[107,11377,2676],{"class":1154},[107,11379,1158],{"class":1147},[107,11381,11382],{"class":1161},"\"btn secondary\"",[107,11384,11259],{"class":1154},[107,11386,1158],{"class":1147},[107,11388,11389],{"class":1161},"\"count = 0\"",[107,11391,11392],{"class":1147},">重置\u003C\u002F",[107,11394,9161],{"class":1151},[107,11396,1170],{"class":1147},[107,11398,11399,11401,11403],{"class":109,"line":140},[107,11400,2743],{"class":1147},[107,11402,2673],{"class":1151},[107,11404,1170],{"class":1147},[107,11406,11407,11409,11411],{"class":109,"line":470},[107,11408,1207],{"class":1147},[107,11410,2663],{"class":1151},[107,11412,1170],{"class":1147},[107,11414,11415],{"class":109,"line":476},[107,11416,479],{"emptyLinePlaceholder":329},[107,11418,11419,11421,11423,11425],{"class":109,"line":482},[107,11420,1148],{"class":1147},[107,11422,1177],{"class":1151},[107,11424,4090],{"class":1154},[107,11426,1170],{"class":1147},[107,11428,11429,11431,11433,11435],{"class":109,"line":488},[107,11430,4097],{"class":1199},[107,11432,6492],{"class":1147},[107,11434,4103],{"class":1199},[107,11436,4106],{"class":1161},[107,11438,11439],{"class":109,"line":494},[107,11440,479],{"emptyLinePlaceholder":329},[107,11442,11443,11445,11447,11449,11451,11453,11455],{"class":109,"line":500},[107,11444,4115],{"class":1199},[107,11446,11220],{"class":1805},[107,11448,4121],{"class":1199},[107,11450,4124],{"class":1154},[107,11452,1190],{"class":1147},[107,11454,3260],{"class":1805},[107,11456,2478],{"class":1147},[107,11458,11459,11461,11463],{"class":109,"line":506},[107,11460,1207],{"class":1147},[107,11462,1177],{"class":1151},[107,11464,1170],{"class":1147},[107,11466,11467],{"class":109,"line":512},[107,11468,479],{"emptyLinePlaceholder":329},[107,11470,11471,11473,11475,11477],{"class":109,"line":518},[107,11472,1148],{"class":1147},[107,11474,311],{"class":1151},[107,11476,2768],{"class":1154},[107,11478,1170],{"class":1147},[107,11480,11481,11483],{"class":109,"line":524},[107,11482,10532],{"class":1154},[107,11484,2125],{"class":1147},[107,11486,11487,11489,11491,11493],{"class":109,"line":529},[107,11488,2782],{"class":1805},[107,11490,2133],{"class":1147},[107,11492,4269],{"class":1805},[107,11494,2141],{"class":1147},[107,11496,11497,11499,11501,11503],{"class":109,"line":535},[107,11498,6725],{"class":1805},[107,11500,2133],{"class":1147},[107,11502,6730],{"class":1805},[107,11504,2141],{"class":1147},[107,11506,11507,11509,11511,11513],{"class":109,"line":2481},[107,11508,4276],{"class":1805},[107,11510,2133],{"class":1147},[107,11512,2799],{"class":1805},[107,11514,2141],{"class":1147},[107,11516,11517,11519,11521,11523,11525],{"class":109,"line":2487},[107,11518,4287],{"class":1805},[107,11520,2133],{"class":1147},[107,11522,2873],{"class":1805},[107,11524,1269],{"class":1199},[107,11526,2141],{"class":1147},[107,11528,11529,11531,11533,11535,11537],{"class":109,"line":2495},[107,11530,2232],{"class":1805},[107,11532,2133],{"class":1147},[107,11534,2136],{"class":1805},[107,11536,1269],{"class":1199},[107,11538,2141],{"class":1147},[107,11540,11541,11543,11545,11547],{"class":109,"line":2500},[107,11542,6619],{"class":1805},[107,11544,2133],{"class":1147},[107,11546,6624],{"class":1805},[107,11548,2141],{"class":1147},[107,11550,11551],{"class":109,"line":2505},[107,11552,538],{"class":1147},[107,11554,11555],{"class":109,"line":2513},[107,11556,479],{"emptyLinePlaceholder":329},[107,11558,11559,11562],{"class":109,"line":2536},[107,11560,11561],{"class":1154},".count",[107,11563,2125],{"class":1147},[107,11565,11566,11568,11570,11572,11574],{"class":109,"line":2541},[107,11567,3640],{"class":1805},[107,11569,2133],{"class":1147},[107,11571,3865],{"class":1805},[107,11573,1269],{"class":1199},[107,11575,2141],{"class":1147},[107,11577,11578,11580,11582,11584],{"class":109,"line":2546},[107,11579,7136],{"class":1805},[107,11581,2133],{"class":1147},[107,11583,7141],{"class":1805},[107,11585,2141],{"class":1147},[107,11587,11588,11590,11592,11594],{"class":109,"line":2556},[107,11589,3668],{"class":1805},[107,11591,2133],{"class":1147},[107,11593,10197],{"class":1805},[107,11595,2141],{"class":1147},[107,11597,11598],{"class":109,"line":2564},[107,11599,538],{"class":1147},[107,11601,11602],{"class":109,"line":2572},[107,11603,479],{"emptyLinePlaceholder":329},[107,11605,11606,11609],{"class":109,"line":2582},[107,11607,11608],{"class":1154},".btn",[107,11610,2125],{"class":1147},[107,11612,11613,11615,11617,11619],{"class":109,"line":2622},[107,11614,3046],{"class":1805},[107,11616,2133],{"class":1147},[107,11618,3051],{"class":1805},[107,11620,2141],{"class":1147},[107,11622,11623,11625,11627,11629],{"class":109,"line":2627},[107,11624,2245],{"class":1805},[107,11626,2133],{"class":1147},[107,11628,5270],{"class":1805},[107,11630,2141],{"class":1147},[107,11632,11633,11635,11637,11640,11642],{"class":109,"line":3086},[107,11634,2269],{"class":1805},[107,11636,2133],{"class":1147},[107,11638,11639],{"class":1805},"999",[107,11641,1269],{"class":1199},[107,11643,2141],{"class":1147},[107,11645,11646,11648,11650,11652,11654,11657,11659],{"class":109,"line":3095},[107,11647,2232],{"class":1805},[107,11649,2133],{"class":1147},[107,11651,2181],{"class":1805},[107,11653,1269],{"class":1199},[107,11655,11656],{"class":1805}," 18",[107,11658,1269],{"class":1199},[107,11660,2141],{"class":1147},[107,11662,11663,11665,11667,11669],{"class":109,"line":3110},[107,11664,2283],{"class":1805},[107,11666,2133],{"class":1147},[107,11668,7112],{"class":1805},[107,11670,2141],{"class":1147},[107,11672,11673,11675,11677,11680],{"class":109,"line":3145},[107,11674,3668],{"class":1805},[107,11676,2133],{"class":1147},[107,11678,11679],{"class":1805},"#0f1419",[107,11681,2141],{"class":1147},[107,11683,11684,11686,11688,11690],{"class":109,"line":3172},[107,11685,7136],{"class":1805},[107,11687,2133],{"class":1147},[107,11689,7141],{"class":1805},[107,11691,2141],{"class":1147},[107,11693,11694],{"class":109,"line":3201},[107,11695,538],{"class":1147},[107,11697,11698],{"class":109,"line":3240},[107,11699,479],{"emptyLinePlaceholder":329},[107,11701,11702,11705],{"class":109,"line":3245},[107,11703,11704],{"class":1154},".btn.secondary",[107,11706,2125],{"class":1147},[107,11708,11709,11711,11713,11715],{"class":109,"line":3252},[107,11710,2283],{"class":1805},[107,11712,2133],{"class":1147},[107,11714,9967],{"class":1805},[107,11716,2141],{"class":1147},[107,11718,11719,11721,11723,11725],{"class":109,"line":3273},[107,11720,3668],{"class":1805},[107,11722,2133],{"class":1147},[107,11724,10152],{"class":1805},[107,11726,2141],{"class":1147},[107,11728,11729],{"class":109,"line":3281},[107,11730,538],{"class":1147},[107,11732,11733,11735,11737],{"class":109,"line":3322},[107,11734,1207],{"class":1147},[107,11736,311],{"class":1151},[107,11738,1170],{"class":1147},[37,11740,274],{"id":274},[760,11742,11743,11749,11755],{},[387,11744,11745,11748],{},[19,11746,11747],{},"ref"," 创建响应式基本类型",[387,11750,11751,11754],{},[19,11752,11753],{},"\u003Cscript setup>"," 减少样板代码",[387,11756,11757],{},"模板中可直接使用响应式变量",[311,11759,11760],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":85,"searchDepth":122,"depth":122,"links":11762},[11763,11764,11765],{"id":11184,"depth":116,"text":11184},{"id":11290,"depth":116,"text":11290},{"id":274,"depth":116,"text":274},"2026-05-05","通过一个简单的计数器示例，了解 ref、响应式与事件处理，并可在下方实时编辑预览。",{},"\u002Fblog\u002Fhello-vue3",{"title":11173,"description":11767},"blog\u002Fhello-vue3",[11773,11774],"vue3","composition-api","oJ481NqFU2a5mD3yV0ikqu37vdc4cHiK-jdLf7hi-94",{"id":11777,"title":11778,"body":11779,"category":1666,"date":12019,"description":12020,"draft":326,"extension":327,"meta":12021,"navigation":329,"path":12022,"seo":12023,"stem":12024,"tags":12025,"__hash__":12028},"blog\u002Fblog\u002Finfinite-parallax-scroll.md","无限视差全屏滚动",{"type":8,"value":11780,"toc":12009},[11781,11783,11797,11799,11803,11816,11822,11843,11847,11876,11880,11891,11960,11964,11978,11980,11987,11990,11992],[11,11782,11778],{"id":11778},[15,11784,11785,11786,7353,11789,11792,11793,11796],{},"全屏图片轮播不一定要用 Swiper。把原生滚动禁掉，自己接管 ",[19,11787,11788],{},"wheel",[19,11790,11791],{},"touch","，用 ",[24,11794,11795],{},"prev \u002F cur \u002F next 三个 DOM 窗口","循环展示图片，配合遮罩高度动画和视差位移，就能做出无限滚动的切屏效果。下方 demo 可滚轮或滑动切换。",[37,11798,39],{"id":39},[63,11800,11802],{"id":11801},"_1-禁原生滚动统一输入","1. 禁原生滚动，统一输入",[15,11804,11805,11808,11809,11812,11813,738],{},[19,11806,11807],{},"html, body { overflow: hidden }","（全屏页）或容器 ",[19,11810,11811],{},"touch-action: none","，所有滚动意图都转成 ",[19,11814,11815],{},"pixelDelta",[77,11817,11820],{"className":11818,"code":11819,"language":82},[80],"wheel \u002F touch → applyScrollDelta → targetProgress ± step\n ↓\n rAF lerp → progress → render()\n",[19,11821,11819],{"__ignoreMap":85},[15,11823,11824,7353,11826,1092,11828,11834,11835,11838,11839,11842],{},[19,11825,11788],{},[19,11827,11791],{},[24,11829,11830,11831],{},"只改 ",[19,11832,11833],{},"targetProgress","，不直接改 ",[19,11836,11837],{},"progress","，中间用 ",[19,11840,11841],{},"LERP"," 平滑追赶，手感更跟手。",[63,11844,11846],{"id":11845},"_2-三屏窗口-循环索引","2. 三屏窗口 + 循环索引",[15,11848,11849,11850,1027,11853,1027,11856,11859,11860,11863,11864,11867,11868,11871,11872,11875],{},"DOM 里始终只有三张 slide：",[19,11851,11852],{},"prev",[19,11854,11855],{},"cur",[19,11857,11858],{},"next","。当前 ",[19,11861,11862],{},"index"," 指向居中那张；切屏完成后 ",[19,11865,11866],{},"index ± 1","，重新 ",[19,11869,11870],{},"bindImages"," 绑定 ",[19,11873,11874],{},"(index-1, index, index+1)"," 取模后的图片 URL。图片列表再长，DOM 节点数也不变。",[63,11877,11879],{"id":11878},"_3-mask-高度实现切屏","3. mask 高度实现切屏",[15,11881,11882,11883,11886,11887,11890],{},"每张 slide 内有一层 ",[19,11884,11885],{},"slide__mask","，通过改 ",[19,11888,11889],{},"height"," 控制图片可见区域：",[173,11892,11893,11906],{},[176,11894,11895],{},[179,11896,11897,11900,11903],{},[182,11898,11899],{},"方向",[182,11901,11902],{},"动画",[182,11904,11905],{},"mask 变化",[192,11907,11908,11930,11949],{},[179,11909,11910,11913,11918],{},[197,11911,11912],{},"向下滚",[197,11914,11915],{},[19,11916,11917],{},"scroll-down",[197,11919,11920,11922,11923,661,11926,11929],{},[19,11921,11858],{}," 的 mask 从 ",[19,11924,11925],{},"0%",[19,11927,11928],{},"100%","，新图从上落下",[179,11931,11932,11935,11940],{},[197,11933,11934],{},"向上滚",[197,11936,11937],{},[19,11938,11939],{},"scroll-up",[197,11941,11942,11922,11944,661,11946,11948],{},[19,11943,11855],{},[19,11945,11928],{},[19,11947,11925],{},"，当前图收起露出上一张",[179,11950,11951,11954,11957],{},[197,11952,11953],{},"静止",[197,11955,11956],{},"idle",[197,11958,11959],{},"prev\u002Fcur 全显，next 隐藏",[63,11961,11963],{"id":11962},"_4-视差位移","4. 视差位移",[15,11965,11966,11967,11970,11971,11973,11974,11977],{},"新图落下前，图片先 ",[19,11968,11969],{},"translateY(PARALLAX_SHIFT%)"," 偏上一点；",[19,11972,11837],{}," 从 0→1 时逐渐回到 0。绝对值越大，下落感越强。位移由 JS 每帧写入，不用 CSS ",[19,11975,11976],{},"transition","，和 lerp 进度同步。",[37,11979,256],{"id":256},[15,11981,11982,11983,309],{},"在 demo 区域内滚轮或上下滑动切换图片。全屏体验可打开 ",[264,11984,11986],{"href":11985},"\u002Fdemos\u002Fparallax-scroll","独立预览页",[11988,11989],"parallax-scroll-demo",{},[37,11991,274],{"id":274},[15,11993,11994,11995,11998,11999,12002,12003,7353,12006,12008],{},"无限视差滚动的本质是 ",[24,11996,11997],{},"有限 DOM + 循环索引 + 自定义进度","。难点不在图片数量，而在输入统一（wheel 行\u002F页模式、触控板、触摸）、进度可逆（滚到一半往回滚能取消）、以及 ",[19,12000,12001],{},"prefers-reduced-motion"," 时关掉 lerp 拖尾。如果你要做类似效果，建议先把三屏窗口和 mask 动画跑通，再调 ",[19,12004,12005],{},"SCROLL_THRESHOLD",[19,12007,11841],{}," 找手感。",{"title":85,"searchDepth":122,"depth":122,"links":12010},[12011,12017,12018],{"id":39,"depth":116,"text":39,"children":12012},[12013,12014,12015,12016],{"id":11801,"depth":122,"text":11802},{"id":11845,"depth":122,"text":11846},{"id":11878,"depth":122,"text":11879},{"id":11962,"depth":122,"text":11963},{"id":256,"depth":116,"text":256},{"id":274,"depth":116,"text":274},"2026-06-15","禁用原生滚动，用 wheel 与 touch 驱动 prev\u002Fcur\u002Fnext 三屏窗口，mask 高度动画与 rAF lerp 实现无限视差切屏。",{},"\u002Fblog\u002Finfinite-parallax-scroll",{"title":11778,"description":12020},"blog\u002Finfinite-parallax-scroll",[12026,12027,4555,11791],"scroll","parallax","HTL-V7yHnEHTcmos1lrSu5suLz2IHx5hmawb99kBb-0",{"id":12030,"title":12031,"body":12032,"category":103,"date":13282,"description":13283,"draft":326,"extension":327,"meta":13284,"navigation":329,"path":822,"seo":13285,"stem":13286,"tags":13287,"__hash__":13289},"blog\u002Fblog\u002Fjs-event-loop.md","浏览器事件循环：从进程模型到任务队列",{"type":8,"value":12033,"toc":13264},[12034,12037,12047,12050,12053,12057,12064,12070,12074,12084,12090,12094,12100,12106,12122,12126,12129,12146,12149,12155,12161,12184,12192,12201,12205,12212,12238,12241,12247,12257,12263,12269,12273,12288,12292,12299,12501,12516,12519,13023,13027,13037,13045,13064,13073,13076,13136,13139,13188,13191,13195,13206,13210,13216,13230,13232,13261],[11,12035,12031],{"id":12036},"浏览器事件循环从进程模型到任务队列",[15,12038,12039,12040,12042,12043,12046],{},"JavaScript 常被说成「单线程」，但真正决定页面是否流畅的，是浏览器里那条繁忙的 ",[24,12041,814],{},"。它既要解析 HTML\u002FCSS、布局绘制，又要执行 JS 与事件回调——这些任务如何排队、谁先谁后，就是 ",[24,12044,12045],{},"事件循环（消息循环）"," 要回答的问题。",[15,12048,12049],{},"下文从浏览器进程模型讲起，再到异步模型、阻塞渲染的实测，以及 W3C 与 Chrome 对任务队列的最新理解。",[37,12051,12052],{"id":12052},"浏览器的进程与线程",[63,12054,12056],{"id":12055},"进程是什么","进程是什么？",[15,12058,12059,12060,12063],{},"程序运行需要专属的内存空间，这块空间可以理解为 ",[24,12061,12062],{},"进程","。每个应用至少有一个进程；进程之间相互独立，若要通信也需要双方同意。",[15,12065,12066],{},[828,12067],{"alt":12068,"src":12069},"进程与内存空间示意图","\u002Fdemos\u002Fevent-loop\u002Fprocess.png",[63,12071,12073],{"id":12072},"线程是什么","线程是什么？",[15,12075,12076,12077,12080,12081,12083],{},"有了进程，才能在其中运行代码。执行代码的单元叫 ",[24,12078,12079],{},"线程","。进程启动后会自动创建一个线程运行代码，称为 ",[24,12082,985],{},"；若需并行执行多段代码，进程内还可再开更多线程。",[15,12085,12086],{},[828,12087],{"alt":12088,"src":12089},"进程内的主线程与额外线程","\u002Fdemos\u002Fevent-loop\u002Fthread.png",[63,12091,12093],{"id":12092},"浏览器有哪些进程","浏览器有哪些进程？",[15,12095,12096,12099],{},[24,12097,12098],{},"浏览器是多进程、多线程应用。"," 启动后会拉起多个进程，以降低相互影响和连环崩溃的风险。可在浏览器任务管理器中查看当前进程列表。",[15,12101,12102],{},[828,12103],{"alt":12104,"src":12105},"浏览器主要进程示意","\u002Fdemos\u002Fevent-loop\u002Fbrowser.png",[15,12107,12108,12109,12112,12113,12115,12116,12121],{},"与前端开发最相关的是 ",[24,12110,12111],{},"渲染进程","：启动后会开启 ",[24,12114,814],{},"，负责执行 HTML、CSS、JavaScript。默认情况下，每个标签页对应一个渲染进程，标签页之间互不影响。（Chrome 的进程模型仍在演进，详见 ",[264,12117,12120],{"href":12118,"rel":12119},"https:\u002F\u002Fchromium.googlesource.com\u002Fchromium\u002Fsrc\u002F+\u002Fmain\u002Fdocs\u002Fprocess_model_and_site_isolation.md#Modes-and-Availability",[4599],"Chrome 官方说明","。）",[37,12123,12125],{"id":12124},"渲染主线程如何工作","渲染主线程如何工作？",[15,12127,12128],{},"渲染主线程是浏览器中最繁忙的线程，典型工作包括：",[760,12130,12131,12134,12137,12140,12143],{},[387,12132,12133],{},"解析 HTML、CSS",[387,12135,12136],{},"计算样式、布局、处理图层",[387,12138,12139],{},"以约 60fps 重绘页面",[387,12141,12142],{},"执行全局 JS、事件处理函数、计时器回调",[387,12144,12145],{},"……",[15,12147,12148],{},"这么多任务如何调度？例如：JS 执行到一半时用户点了按钮，要立即处理点击吗？计时器到时了，要立即跑回调吗？点击与计时器同时到来，先处理谁？",[15,12150,12151,12152,309],{},"主线程的做法是：",[24,12153,12154],{},"排队",[15,12156,12157],{},[828,12158],{"alt":12159,"src":12160},"事件循环与消息队列","\u002Fdemos\u002Fevent-loop\u002Fqueue.png",[384,12162,12163,12170,12177],{},[387,12164,12165,12166,12169],{},"渲染主线程进入一个 ",[24,12167,12168],{},"不会结束的循环","（事件循环）。",[387,12171,12172,12173,12176],{},"每次循环检查 ",[24,12174,12175],{},"消息队列","：有任务则取出第一个执行，执行完再进入下一轮；没有任务则休眠。",[387,12178,12179,12180,12183],{},"其他线程（含其他进程的线程）可随时把任务加到队列 ",[24,12181,12182],{},"末尾","；若主线程在休眠，会被唤醒继续取任务。",[15,12185,12186,12187,368,12189,309],{},"整条链路也叫 ",[24,12188,823],{},[24,12190,12191],{},"消息循环",[1582,12193,12194],{},[15,12195,12196,12197,12200],{},"思考题：为什么渲染进程不用多个线程并行做解析、布局、绘制？",[12198,12199],"br",{},"\n简答：DOM 与样式状态需要一致的可预测顺序；多线程并行改同一棵 DOM 树会带来同步与竞态难题，单主线程 + 队列调度是更稳妥的工程取舍（GPU 合成等仍可由其他线程辅助）。",[37,12202,12204],{"id":12203},"异步主线程不能阻塞","异步：主线程不能阻塞",[15,12206,12207,12208,12211],{},"有些任务 ",[24,12209,12210],{},"无法立刻完成","，例如：",[760,12213,12214,12223,12232],{},[387,12215,12216,12217,1027,12220],{},"计时器：",[19,12218,12219],{},"setTimeout",[19,12221,12222],{},"setInterval",[387,12224,12225,12226,1027,12229],{},"网络：",[19,12227,12228],{},"XHR",[19,12230,12231],{},"Fetch",[387,12233,12234,12235],{},"用户操作：",[19,12236,12237],{},"addEventListener",[15,12239,12240],{},"若主线程一直等到「时间到了」「请求返回」「用户点击」，就会长期阻塞，页面卡死：",[15,12242,12243],{},[828,12244],{"alt":12245,"src":12246},"同步等待导致主线程阻塞","\u002Fdemos\u002Fevent-loop\u002Fsync.png",[15,12248,12249,12250,12253,12254,738],{},"渲染主线程承担页面更新与交互，",[24,12251,12252],{},"绝不能被长时间阻塞","。浏览器因此采用 ",[24,12255,12256],{},"异步",[15,12258,12259],{},[828,12260],{"alt":12261,"src":12262},"异步模型：其他线程处理，回调入队","\u002Fdemos\u002Fevent-loop\u002Fasync.png",[15,12264,12265,12266],{},"主线程把计时、网络、监听等交给其他线程，自己继续执行后续代码；待时机成熟，将回调包装成任务加入消息队列末尾，由主线程在空闲时调度。",[24,12267,12268],{},"异步模式下，主线程不会因等待 I\u002FO 而空转阻塞。",[63,12270,12272],{"id":12271},"如何理解-js-的异步面试要点","如何理解 JS 的异步？（面试要点）",[760,12274,12275,12282,12285],{},[387,12276,12277,12278,12281],{},"JS 运行在渲染主线程中，",[24,12279,12280],{},"同一时刻只有一条执行栈","，故常被称为单线程语言。",[387,12283,12284],{},"主线程还要负责渲染；若大量任务同步等待，队列里其他任务无法执行，页面无法及时更新。",[387,12286,12287],{},"异步做法：计时、网络、事件等交由其他线程；完成后把回调入队，主线程按序执行。",[37,12289,12291],{"id":12290},"js-为何会阻碍渲染","JS 为何会阻碍渲染？",[15,12293,12294,12295,12298],{},"改 DOM 与真正画到屏幕上并非同一瞬间完成。若主线程正在执行一段 ",[24,12296,12297],{},"长时间占用的 JS","，渲染任务只能等在队列后面。",[430,12300,12302],{"lang":1135,"title":12301},"主线程阻塞导致画面延迟更新",[77,12303,12305],{"className":1139,"code":12304,"language":1135,"meta":85,"style":85},"\u003Ch1>Hello, Event Loop!\u003C\u002Fh1>\n\u003Cbutton>change\u003C\u002Fbutton>\n\u003Cscript>\n const h1 = document.querySelector('h1')\n const btn = document.querySelector('button')\n\n function delay(duration) {\n const start = Date.now()\n while (Date.now() - start \u003C duration) {}\n }\n\n btn.onclick = function () {\n h1.textContent = '页面已更新！'\n delay(3000)\n }\n\u003C\u002Fscript>\n",[19,12306,12307,12320,12333,12341,12362,12382,12386,12401,12420,12443,12447,12451,12467,12477,12489,12493],{"__ignoreMap":85},[107,12308,12309,12311,12313,12316,12318],{"class":109,"line":110},[107,12310,1148],{"class":1147},[107,12312,11],{"class":1151},[107,12314,12315],{"class":1147},">Hello, Event Loop!\u003C\u002F",[107,12317,11],{"class":1151},[107,12319,1170],{"class":1147},[107,12321,12322,12324,12326,12329,12331],{"class":109,"line":116},[107,12323,1148],{"class":1147},[107,12325,9161],{"class":1151},[107,12327,12328],{"class":1147},">change\u003C\u002F",[107,12330,9161],{"class":1151},[107,12332,1170],{"class":1147},[107,12334,12335,12337,12339],{"class":109,"line":122},[107,12336,1148],{"class":1147},[107,12338,1177],{"class":1151},[107,12340,1170],{"class":1147},[107,12342,12343,12346,12348,12350,12353,12355,12357,12360],{"class":109,"line":128},[107,12344,12345],{"class":1199}," const",[107,12347,7581],{"class":1805},[107,12349,4121],{"class":1199},[107,12351,12352],{"class":1147}," document.",[107,12354,1187],{"class":1154},[107,12356,1190],{"class":1147},[107,12358,12359],{"class":1161},"'h1'",[107,12361,2478],{"class":1147},[107,12363,12364,12366,12369,12371,12373,12375,12377,12380],{"class":109,"line":134},[107,12365,12345],{"class":1199},[107,12367,12368],{"class":1805}," btn",[107,12370,4121],{"class":1199},[107,12372,12352],{"class":1147},[107,12374,1187],{"class":1154},[107,12376,1190],{"class":1147},[107,12378,12379],{"class":1161},"'button'",[107,12381,2478],{"class":1147},[107,12383,12384],{"class":109,"line":140},[107,12385,479],{"emptyLinePlaceholder":329},[107,12387,12388,12391,12394,12396,12399],{"class":109,"line":470},[107,12389,12390],{"class":1199}," function",[107,12392,12393],{"class":1154}," delay",[107,12395,1190],{"class":1147},[107,12397,12398],{"class":1768},"duration",[107,12400,1772],{"class":1147},[107,12402,12403,12406,12409,12411,12414,12417],{"class":109,"line":476},[107,12404,12405],{"class":1199}," const",[107,12407,12408],{"class":1805}," start",[107,12410,4121],{"class":1199},[107,12412,12413],{"class":1147}," Date.",[107,12415,12416],{"class":1154},"now",[107,12418,12419],{"class":1147},"()\n",[107,12421,12422,12425,12428,12430,12433,12435,12438,12440],{"class":109,"line":482},[107,12423,12424],{"class":1199}," while",[107,12426,12427],{"class":1147}," (Date.",[107,12429,12416],{"class":1154},[107,12431,12432],{"class":1147},"() ",[107,12434,1954],{"class":1199},[107,12436,12437],{"class":1147}," start ",[107,12439,1148],{"class":1199},[107,12441,12442],{"class":1147}," duration) {}\n",[107,12444,12445],{"class":109,"line":488},[107,12446,521],{"class":1147},[107,12448,12449],{"class":109,"line":494},[107,12450,479],{"emptyLinePlaceholder":329},[107,12452,12453,12456,12459,12461,12464],{"class":109,"line":500},[107,12454,12455],{"class":1147}," btn.",[107,12457,12458],{"class":1154},"onclick",[107,12460,4121],{"class":1199},[107,12462,12463],{"class":1199}," function",[107,12465,12466],{"class":1147}," () {\n",[107,12468,12469,12472,12474],{"class":109,"line":506},[107,12470,12471],{"class":1147}," h1.textContent ",[107,12473,1158],{"class":1199},[107,12475,12476],{"class":1161}," '页面已更新！'\n",[107,12478,12479,12482,12484,12487],{"class":109,"line":512},[107,12480,12481],{"class":1154}," delay",[107,12483,1190],{"class":1147},[107,12485,12486],{"class":1805},"3000",[107,12488,2478],{"class":1147},[107,12490,12491],{"class":109,"line":518},[107,12492,521],{"class":1147},[107,12494,12495,12497,12499],{"class":109,"line":524},[107,12496,1207],{"class":1147},[107,12498,1177],{"class":1151},[107,12500,1170],{"class":1147},[15,12502,12503,12504,12507,12508,12515],{},"点击按钮后：",[19,12505,12506],{},"textContent"," 虽已修改，但 ",[24,12509,12510,12511,12514],{},"画面要等 ",[19,12512,12513],{},"delay(3000)"," 跑完"," 才会更新——因为渲染步骤也要主线程空闲才能执行。",[15,12517,12518],{},"下方可亲自点击体验（约 3 秒内标题不会变，之后才刷新）：",[2648,12520,12522],{"title":12521},"JS 阻塞渲染",[77,12523,12525],{"className":2653,"code":12524,"language":337,"meta":85,"style":85},"\u003Ctemplate>\n \u003Cdiv class=\"demo\">\n \u003Ch1>{{ title }}\u003C\u002Fh1>\n \u003Cp class=\"hint\">点击按钮后，标题会延迟约 3 秒才变化。\u003C\u002Fp>\n \u003Cbutton class=\"btn\" @click=\"onChange\">change\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst title = ref('Hello, Event Loop!')\n\nfunction delay(duration) {\n const start = Date.now()\n while (Date.now() - start \u003C duration) {}\n}\n\nfunction onChange() {\n title.value = '页面已更新！'\n delay(3000)\n}\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.demo {\n padding: 24px;\n font-family: system-ui, sans-serif;\n text-align: center;\n}\n\nh1 {\n margin: 0 0 12px;\n font-size: 1.5rem;\n}\n\n.hint {\n margin: 0 0 16px;\n color: #64748b;\n font-size: 0.9rem;\n}\n\n.btn {\n padding: 10px 20px;\n border: none;\n border-radius: 8px;\n background: #6366f1;\n color: white;\n font-weight: 600;\n cursor: pointer;\n}\n\u003C\u002Fstyle>\n",[19,12526,12527,12535,12549,12562,12582,12607,12615,12623,12627,12637,12647,12651,12669,12673,12685,12699,12717,12721,12725,12734,12743,12754,12758,12766,12770,12780,12786,12798,12812,12822,12826,12830,12836,12852,12865,12869,12873,12880,12896,12906,12919,12923,12927,12933,12949,12959,12971,12981,12991,13001,13011,13015],{"__ignoreMap":85},[107,12528,12529,12531,12533],{"class":109,"line":110},[107,12530,1148],{"class":1147},[107,12532,2663],{"class":1151},[107,12534,1170],{"class":1147},[107,12536,12537,12539,12541,12543,12545,12547],{"class":109,"line":116},[107,12538,2670],{"class":1147},[107,12540,2673],{"class":1151},[107,12542,2676],{"class":1154},[107,12544,1158],{"class":1147},[107,12546,9453],{"class":1161},[107,12548,1170],{"class":1147},[107,12550,12551,12553,12555,12558,12560],{"class":109,"line":122},[107,12552,2688],{"class":1147},[107,12554,11],{"class":1151},[107,12556,12557],{"class":1147},">{{ title }}\u003C\u002F",[107,12559,11],{"class":1151},[107,12561,1170],{"class":1147},[107,12563,12564,12566,12568,12570,12572,12575,12578,12580],{"class":109,"line":128},[107,12565,2688],{"class":1147},[107,12567,15],{"class":1151},[107,12569,2676],{"class":1154},[107,12571,1158],{"class":1147},[107,12573,12574],{"class":1161},"\"hint\"",[107,12576,12577],{"class":1147},">点击按钮后，标题会延迟约 3 秒才变化。\u003C\u002F",[107,12579,15],{"class":1151},[107,12581,1170],{"class":1147},[107,12583,12584,12586,12588,12590,12592,12594,12596,12598,12601,12603,12605],{"class":109,"line":134},[107,12585,2688],{"class":1147},[107,12587,9161],{"class":1151},[107,12589,2676],{"class":1154},[107,12591,1158],{"class":1147},[107,12593,11356],{"class":1161},[107,12595,11259],{"class":1154},[107,12597,1158],{"class":1147},[107,12599,12600],{"class":1161},"\"onChange\"",[107,12602,12328],{"class":1147},[107,12604,9161],{"class":1151},[107,12606,1170],{"class":1147},[107,12608,12609,12611,12613],{"class":109,"line":140},[107,12610,2743],{"class":1147},[107,12612,2673],{"class":1151},[107,12614,1170],{"class":1147},[107,12616,12617,12619,12621],{"class":109,"line":470},[107,12618,1207],{"class":1147},[107,12620,2663],{"class":1151},[107,12622,1170],{"class":1147},[107,12624,12625],{"class":109,"line":476},[107,12626,479],{"emptyLinePlaceholder":329},[107,12628,12629,12631,12633,12635],{"class":109,"line":482},[107,12630,1148],{"class":1147},[107,12632,1177],{"class":1151},[107,12634,4090],{"class":1154},[107,12636,1170],{"class":1147},[107,12638,12639,12641,12643,12645],{"class":109,"line":488},[107,12640,4097],{"class":1199},[107,12642,6492],{"class":1147},[107,12644,4103],{"class":1199},[107,12646,4106],{"class":1161},[107,12648,12649],{"class":109,"line":494},[107,12650,479],{"emptyLinePlaceholder":329},[107,12652,12653,12655,12658,12660,12662,12664,12667],{"class":109,"line":500},[107,12654,4115],{"class":1199},[107,12656,12657],{"class":1805}," title",[107,12659,4121],{"class":1199},[107,12661,4124],{"class":1154},[107,12663,1190],{"class":1147},[107,12665,12666],{"class":1161},"'Hello, Event Loop!'",[107,12668,2478],{"class":1147},[107,12670,12671],{"class":109,"line":506},[107,12672,479],{"emptyLinePlaceholder":329},[107,12674,12675,12677,12679,12681,12683],{"class":109,"line":512},[107,12676,1760],{"class":1199},[107,12678,12393],{"class":1154},[107,12680,1190],{"class":1147},[107,12682,12398],{"class":1768},[107,12684,1772],{"class":1147},[107,12686,12687,12689,12691,12693,12695,12697],{"class":109,"line":518},[107,12688,12345],{"class":1199},[107,12690,12408],{"class":1805},[107,12692,4121],{"class":1199},[107,12694,12413],{"class":1147},[107,12696,12416],{"class":1154},[107,12698,12419],{"class":1147},[107,12700,12701,12703,12705,12707,12709,12711,12713,12715],{"class":109,"line":524},[107,12702,1790],{"class":1199},[107,12704,12427],{"class":1147},[107,12706,12416],{"class":1154},[107,12708,12432],{"class":1147},[107,12710,1954],{"class":1199},[107,12712,12437],{"class":1147},[107,12714,1148],{"class":1199},[107,12716,12442],{"class":1147},[107,12718,12719],{"class":109,"line":529},[107,12720,538],{"class":1147},[107,12722,12723],{"class":109,"line":535},[107,12724,479],{"emptyLinePlaceholder":329},[107,12726,12727,12729,12732],{"class":109,"line":2481},[107,12728,1760],{"class":1199},[107,12730,12731],{"class":1154}," onChange",[107,12733,1915],{"class":1147},[107,12735,12736,12739,12741],{"class":109,"line":2487},[107,12737,12738],{"class":1147}," title.value ",[107,12740,1158],{"class":1199},[107,12742,12476],{"class":1161},[107,12744,12745,12748,12750,12752],{"class":109,"line":2495},[107,12746,12747],{"class":1154}," delay",[107,12749,1190],{"class":1147},[107,12751,12486],{"class":1805},[107,12753,2478],{"class":1147},[107,12755,12756],{"class":109,"line":2500},[107,12757,538],{"class":1147},[107,12759,12760,12762,12764],{"class":109,"line":2505},[107,12761,1207],{"class":1147},[107,12763,1177],{"class":1151},[107,12765,1170],{"class":1147},[107,12767,12768],{"class":109,"line":2513},[107,12769,479],{"emptyLinePlaceholder":329},[107,12771,12772,12774,12776,12778],{"class":109,"line":2536},[107,12773,1148],{"class":1147},[107,12775,311],{"class":1151},[107,12777,2768],{"class":1154},[107,12779,1170],{"class":1147},[107,12781,12782,12784],{"class":109,"line":2541},[107,12783,10532],{"class":1154},[107,12785,2125],{"class":1147},[107,12787,12788,12790,12792,12794,12796],{"class":109,"line":2546},[107,12789,2232],{"class":1805},[107,12791,2133],{"class":1147},[107,12793,2136],{"class":1805},[107,12795,1269],{"class":1199},[107,12797,2141],{"class":1147},[107,12799,12800,12802,12804,12806,12808,12810],{"class":109,"line":2556},[107,12801,6619],{"class":1805},[107,12803,2133],{"class":1147},[107,12805,9823],{"class":1805},[107,12807,2299],{"class":1147},[107,12809,6624],{"class":1805},[107,12811,2141],{"class":1147},[107,12813,12814,12816,12818,12820],{"class":109,"line":2564},[107,12815,7162],{"class":1805},[107,12817,2133],{"class":1147},[107,12819,2799],{"class":1805},[107,12821,2141],{"class":1147},[107,12823,12824],{"class":109,"line":2572},[107,12825,538],{"class":1147},[107,12827,12828],{"class":109,"line":2582},[107,12829,479],{"emptyLinePlaceholder":329},[107,12831,12832,12834],{"class":109,"line":2622},[107,12833,11],{"class":1151},[107,12835,2125],{"class":1147},[107,12837,12838,12840,12842,12844,12846,12848,12850],{"class":109,"line":2627},[107,12839,3628],{"class":1805},[107,12841,2133],{"class":1147},[107,12843,3260],{"class":1805},[107,12845,1861],{"class":1805},[107,12847,3332],{"class":1805},[107,12849,1269],{"class":1199},[107,12851,2141],{"class":1147},[107,12853,12854,12856,12858,12861,12863],{"class":109,"line":3086},[107,12855,3640],{"class":1805},[107,12857,2133],{"class":1147},[107,12859,12860],{"class":1805},"1.5",[107,12862,10386],{"class":1199},[107,12864,2141],{"class":1147},[107,12866,12867],{"class":109,"line":3095},[107,12868,538],{"class":1147},[107,12870,12871],{"class":109,"line":3110},[107,12872,479],{"emptyLinePlaceholder":329},[107,12874,12875,12878],{"class":109,"line":3145},[107,12876,12877],{"class":1154},".hint",[107,12879,2125],{"class":1147},[107,12881,12882,12884,12886,12888,12890,12892,12894],{"class":109,"line":3172},[107,12883,3628],{"class":1805},[107,12885,2133],{"class":1147},[107,12887,3260],{"class":1805},[107,12889,1861],{"class":1805},[107,12891,3438],{"class":1805},[107,12893,1269],{"class":1199},[107,12895,2141],{"class":1147},[107,12897,12898,12900,12902,12904],{"class":109,"line":3201},[107,12899,3668],{"class":1805},[107,12901,2133],{"class":1147},[107,12903,10064],{"class":1805},[107,12905,2141],{"class":1147},[107,12907,12908,12910,12912,12915,12917],{"class":109,"line":3240},[107,12909,3640],{"class":1805},[107,12911,2133],{"class":1147},[107,12913,12914],{"class":1805},"0.9",[107,12916,10386],{"class":1199},[107,12918,2141],{"class":1147},[107,12920,12921],{"class":109,"line":3245},[107,12922,538],{"class":1147},[107,12924,12925],{"class":109,"line":3252},[107,12926,479],{"emptyLinePlaceholder":329},[107,12928,12929,12931],{"class":109,"line":3273},[107,12930,11608],{"class":1154},[107,12932,2125],{"class":1147},[107,12934,12935,12937,12939,12941,12943,12945,12947],{"class":109,"line":3281},[107,12936,2232],{"class":1805},[107,12938,2133],{"class":1147},[107,12940,2181],{"class":1805},[107,12942,1269],{"class":1199},[107,12944,3479],{"class":1805},[107,12946,1269],{"class":1199},[107,12948,2141],{"class":1147},[107,12950,12951,12953,12955,12957],{"class":109,"line":3322},[107,12952,2245],{"class":1805},[107,12954,2133],{"class":1147},[107,12956,5270],{"class":1805},[107,12958,2141],{"class":1147},[107,12960,12961,12963,12965,12967,12969],{"class":109,"line":3361},[107,12962,2269],{"class":1805},[107,12964,2133],{"class":1147},[107,12966,4292],{"class":1805},[107,12968,1269],{"class":1199},[107,12970,2141],{"class":1147},[107,12972,12973,12975,12977,12979],{"class":109,"line":3389},[107,12974,2283],{"class":1805},[107,12976,2133],{"class":1147},[107,12978,7117],{"class":1805},[107,12980,2141],{"class":1147},[107,12982,12983,12985,12987,12989],{"class":109,"line":3394},[107,12984,3668],{"class":1805},[107,12986,2133],{"class":1147},[107,12988,6837],{"class":1805},[107,12990,2141],{"class":1147},[107,12992,12993,12995,12997,12999],{"class":109,"line":3399},[107,12994,7136],{"class":1805},[107,12996,2133],{"class":1147},[107,12998,7141],{"class":1805},[107,13000,2141],{"class":1147},[107,13002,13003,13005,13007,13009],{"class":109,"line":3406},[107,13004,3046],{"class":1805},[107,13006,2133],{"class":1147},[107,13008,3051],{"class":1805},[107,13010,2141],{"class":1147},[107,13012,13013],{"class":109,"line":3426},[107,13014,538],{"class":1147},[107,13016,13017,13019,13021],{"class":109,"line":3433},[107,13018,1207],{"class":1147},[107,13020,311],{"class":1151},[107,13022,1170],{"class":1147},[37,13024,13026],{"id":13025},"任务有优先级吗","任务有优先级吗？",[15,13028,13029,13032,13033,13036],{},[24,13030,13031],{},"单个任务","在所属队列里通常是先进先出，没有「插队」；但 ",[24,13034,13035],{},"队列之间"," 有优先级差异。",[15,13038,13039,13040,2093],{},"W3C 现行表述要点（",[264,13041,13044],{"href":13042,"rel":13043},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fwebappapis.html#perform-a-microtask-checkpoint",[4599],"Perform a microtask checkpoint",[760,13046,13047,13054,13057],{},[387,13048,13049,13050,13053],{},"每个任务有 ",[24,13051,13052],{},"任务类型","；同类型任务在同一队列，不同类型可分到不同队列。",[387,13055,13056],{},"一次事件循环中，浏览器可按情况从不同队列取任务。",[387,13058,13059,13060,13063],{},"浏览器必须维护 ",[24,13061,13062],{},"微队列（microtask queue）","，其中任务优先于其他队列执行。",[1582,13065,13066],{},[15,13067,13068,13069,13072],{},"随着浏览器复杂度提升，简单区分「宏队列 \u002F 微队列」已不足以描述全部行为，但 ",[24,13070,13071],{},"微任务优先清空"," 仍是硬性要求。",[15,13074,13075],{},"在 Chrome 实现中，至少包括：",[173,13077,13078,13091],{},[176,13079,13080],{},[179,13081,13082,13085,13088],{},[182,13083,13084],{},"队列",[182,13086,13087],{},"典型内容",[182,13089,13090],{},"优先级（相对）",[192,13092,13093,13110,13121],{},[179,13094,13095,13098,13107],{},[197,13096,13097],{},"微队列",[197,13099,13100,1027,13103,13106],{},[19,13101,13102],{},"Promise.then",[19,13104,13105],{},"MutationObserver"," 等",[197,13108,13109],{},"最高",[179,13111,13112,13115,13118],{},[197,13113,13114],{},"交互队列",[197,13116,13117],{},"用户操作产生的事件处理",[197,13119,13120],{},"高",[179,13122,13123,13126,13133],{},[197,13124,13125],{},"延时队列",[197,13127,13128,1357,13130,13132],{},[19,13129,12219],{},[19,13131,12222],{}," 到期回调",[197,13134,13135],{},"中",[15,13137,13138],{},"立即把函数放进微队列的常见写法：",[430,13140,13142],{"lang":103,"title":13141},"Promise 入微队列",[77,13143,13145],{"className":101,"code":13144,"language":103,"meta":85,"style":85},"Promise.resolve().then(() => {\n console.log('microtask')\n})\n",[19,13146,13147,13169,13184],{"__ignoreMap":85},[107,13148,13149,13152,13154,13157,13160,13163,13165,13167],{"class":109,"line":110},[107,13150,13151],{"class":1805},"Promise",[107,13153,4169],{"class":1147},[107,13155,13156],{"class":1154},"resolve",[107,13158,13159],{"class":1147},"().",[107,13161,13162],{"class":1154},"then",[107,13164,4150],{"class":1147},[107,13166,4153],{"class":1199},[107,13168,2125],{"class":1147},[107,13170,13171,13174,13177,13179,13182],{"class":109,"line":116},[107,13172,13173],{"class":1147}," console.",[107,13175,13176],{"class":1154},"log",[107,13178,1190],{"class":1147},[107,13180,13181],{"class":1161},"'microtask'",[107,13183,2478],{"class":1147},[107,13185,13186],{"class":109,"line":122},[107,13187,9751],{"class":1147},[37,13189,13190],{"id":13190},"常见面试题",[63,13192,13194],{"id":13193},"阐述-js-的事件循环","阐述 JS 的事件循环",[15,13196,13197,13198,13201,13202,13205],{},"事件循环是渲染主线程的工作方式：开启不会结束的循环，每次从队列取一个任务执行；其他线程在合适时机把任务加到队列末尾。任务按类型分队列，浏览器在一次循环中决定取哪个队列；",[24,13199,13200],{},"微队列任务必须优先调度执行","。Chrome 源码层面可理解为 ",[19,13203,13204],{},"for"," 循环 + 队列取任务，而非过去教科书里单一的「宏队列」模型。",[63,13207,13209],{"id":13208},"计时器能精确计时吗","计时器能精确计时吗？",[15,13211,13212,13215],{},[24,13213,13214],{},"不能做到严格精确","，原因包括：",[384,13217,13218,13221,13224],{},[387,13219,13220],{},"硬件与 OS 计时本身存在误差，JS 计时器最终依赖系统调用。",[387,13222,13223],{},"W3C 规定：嵌套超过 5 层的计时器，最小间隔为 4ms，短于 4ms 的设定会被抬高。",[387,13225,13226,13227,309],{},"回调只在主线程空闲时执行，前面若有长任务，到期时间到了也会 ",[24,13228,13229],{},"晚跑",[37,13231,274],{"id":274},[760,13233,13234,13240,13245,13254],{},[387,13235,13236,13237,13239],{},"浏览器多进程隔离标签页；",[24,13238,814],{}," 是页面与 JS 的核心调度点。",[387,13241,13242,13244],{},[24,13243,823],{}," 用消息队列 + 无限循环保证任务有序执行。",[387,13246,13247,13249,13250,13253],{},[24,13248,12256],{}," 避免主线程等待 I\u002FO；",[24,13251,13252],{},"长同步 JS"," 仍会阻塞渲染与交互。",[387,13255,13256,13257,13260],{},"理解 ",[24,13258,13259],{},"微队列优先"," 与多队列模型，比死记「宏\u002F微」更符合当前规范与 Chrome 行为。",[311,13262,13263],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":85,"searchDepth":122,"depth":122,"links":13265},[13266,13271,13272,13275,13276,13277,13281],{"id":12052,"depth":116,"text":12052,"children":13267},[13268,13269,13270],{"id":12055,"depth":122,"text":12056},{"id":12072,"depth":122,"text":12073},{"id":12092,"depth":122,"text":12093},{"id":12124,"depth":116,"text":12125},{"id":12203,"depth":116,"text":12204,"children":13273},[13274],{"id":12271,"depth":122,"text":12272},{"id":12290,"depth":116,"text":12291},{"id":13025,"depth":116,"text":13026},{"id":13190,"depth":116,"text":13190,"children":13278},[13279,13280],{"id":13193,"depth":122,"text":13194},{"id":13208,"depth":122,"text":13209},{"id":274,"depth":116,"text":274},"2026-06-24","梳理渲染主线程如何调度任务、异步为何必要、JS 为何会阻塞渲染，以及 Chrome 中延时\u002F交互\u002F微队列的优先级。",{},{"title":12031,"description":13283},"blog\u002Fjs-event-loop",[1674,13288,799],"event-loop","zpAwwSlMoh5xOkPrZCWcA8rP62VybczZfOtCHemEflo",{"id":13291,"title":13292,"body":13293,"category":1666,"date":16110,"description":16111,"draft":326,"extension":327,"meta":16112,"navigation":329,"path":1000,"seo":16113,"stem":16114,"tags":16115,"__hash__":16117},"blog\u002Fblog\u002Freflow-repaint-transform.md","reflow、repaint 与 transform 为何高效",{"type":8,"value":13294,"toc":16101},[13295,13298,13316,13320,13325,13332,13335,13342,13348,13352,13369,13375,13437,13441,13446,13465,13471,13478,13525,13529,13545,13547,13564,13577,13593,16069,16071,16098],[11,13296,13292],{"id":13297},"reflowrepaint-与-transform-为何高效",[15,13299,13300,13301,13304,13305,13308,13309,1027,13312,13315],{},"上一篇 ",[264,13302,13303],{"href":1670},"浏览器渲染流水线"," 讲的是「从零画一页」。页面跑起来之后，改 DOM 或样式会触发 ",[24,13306,13307],{},"局部重算","。面试里常说的 ",[24,13310,13311],{},"回流（reflow）",[24,13313,13314],{},"重绘（repaint）","，指的就是流水线里哪些阶段要重跑。",[37,13317,13319],{"id":13318},"什么是-reflow回流","什么是 reflow（回流）？",[15,13321,13322],{},[24,13323,13324],{},"Reflow 的本质是重新计算布局树（Layout）。",[15,13326,13327,13328,13331],{},"凡是会影响布局树的操作——改宽高、边距、显示方式、插入删除节点等——都需要重新做 ",[24,13329,13330],{},"Layout"," 及之后的阶段（分层、绘制、分块、光栅化、合成）。",[63,13333,13334],{"id":13334},"浏览器会合并多次改动",[15,13336,13337,13338,13341],{},"连续多次改布局相关属性时，浏览器往往 ",[24,13339,13340],{},"先合并","，等当前 JS 执行块结束后再统一算布局，避免同一帧里反复 reflow。",[15,13343,13344,13345],{},"因此：",[24,13346,13347],{},"改属性触发的 reflow 常常是异步批量的。",[63,13349,13351],{"id":13350},"读布局属性会强制同步-reflow","读布局属性会强制同步 reflow",[15,13353,13354,13355,1092,13358,1027,13361,13364,13365,13368],{},"如果 JS 在改完布局后又 ",[24,13356,13357],{},"读取",[19,13359,13360],{},"offsetWidth",[19,13362,13363],{},"getBoundingClientRect()"," 等依赖最新几何信息的属性，浏览器必须 ",[24,13366,13367],{},"立刻算出最新布局","，否则会返回过期数据。",[15,13370,13371,13372],{},"所以常见性能建议：",[24,13373,13374],{},"先读后写，或批量改样式，避免读写交错。",[430,13376,13378],{"lang":103,"title":13377},"读写交错可能触发强制同步布局",[77,13379,13381],{"className":101,"code":13380,"language":103,"meta":85,"style":85},"const el = document.querySelector('.box')\nel.style.width = '200px'\n\u002F\u002F 读宽度会迫使浏览器立即 reflow\nconsole.log(el.offsetWidth)\nel.style.width = '300px'\n",[19,13382,13383,13403,13413,13418,13428],{"__ignoreMap":85},[107,13384,13385,13387,13390,13392,13394,13396,13398,13401],{"class":109,"line":110},[107,13386,4115],{"class":1199},[107,13388,13389],{"class":1805}," el",[107,13391,4121],{"class":1199},[107,13393,12352],{"class":1147},[107,13395,1187],{"class":1154},[107,13397,1190],{"class":1147},[107,13399,13400],{"class":1161},"'.box'",[107,13402,2478],{"class":1147},[107,13404,13405,13408,13410],{"class":109,"line":116},[107,13406,13407],{"class":1147},"el.style.width ",[107,13409,1158],{"class":1199},[107,13411,13412],{"class":1161}," '200px'\n",[107,13414,13415],{"class":109,"line":122},[107,13416,13417],{"class":1236},"\u002F\u002F 读宽度会迫使浏览器立即 reflow\n",[107,13419,13420,13423,13425],{"class":109,"line":128},[107,13421,13422],{"class":1147},"console.",[107,13424,13176],{"class":1154},[107,13426,13427],{"class":1147},"(el.offsetWidth)\n",[107,13429,13430,13432,13434],{"class":109,"line":134},[107,13431,13407],{"class":1147},[107,13433,1158],{"class":1199},[107,13435,13436],{"class":1161}," '300px'\n",[37,13438,13440],{"id":13439},"什么是-repaint重绘","什么是 repaint（重绘）？",[15,13442,13443],{},[24,13444,13445],{},"Repaint 的本质是重新生成绘制指令（Paint）及之后步骤。",[15,13447,13448,13449,13452,13453,1027,13455,1027,13457,13460,13461,13464],{},"改的是 ",[24,13450,13451],{},"可见样式但不改布局"," 时——例如 ",[19,13454,1494],{},[19,13456,1497],{},[19,13458,13459],{},"visibility","（在仍占位的情况下）——可能只需 ",[24,13462,13463],{},"Repaint","，不必完整 reflow。",[15,13466,1281,13467,13470],{},[24,13468,13469],{},"布局信息本身也是可见结果的一部分","，所以：",[1582,13472,13473],{},[15,13474,13475],{},[24,13476,13477],{},"Reflow 一定会引起 Repaint。",[173,13479,13480,13493],{},[176,13481,13482],{},[179,13483,13484,13487,13490],{},[182,13485,13486],{},"操作类型",[182,13488,13489],{},"典型属性",[182,13491,13492],{},"至少触发的阶段",[192,13494,13495,13512],{},[179,13496,13497,13500,13509],{},[197,13498,13499],{},"Reflow",[197,13501,13502,1027,13505,1027,13507],{},[19,13503,13504],{},"width",[19,13506,7394],{},[19,13508,1392],{},[197,13510,13511],{},"Layout → … → Draw",[179,13513,13514,13516,13522],{},[197,13515,13463],{},[197,13517,13518,1027,13520],{},[19,13519,1494],{},[19,13521,1497],{},[197,13523,13524],{},"Paint → … → Draw",[37,13526,13528],{"id":13527},"为什么-transform-效率高","为什么 transform 效率高？",[15,13530,13531,1092,13533,13536,13537,13540,13541,13544],{},[19,13532,1437],{},[24,13534,13535],{},"不改变布局树","，也 ",[24,13538,13539],{},"不改变绘制指令的生成方式","（不触发典型意义上的 layout \u002F paint 重算）。它主要影响流水线最后的 ",[24,13542,13543],{},"Draw（合成）"," 阶段：在合成线程里对已有位图做位移、旋转、缩放。",[15,13546,13344],{},[760,13548,13549,13557],{},[387,13550,13551,13553,13554,13556],{},[19,13552,1437],{}," 变化时，",[24,13555,814],{}," 往往仍很空闲",[387,13558,13559,13560,13563],{},"主线程再忙，",[24,13561,13562],{},"也不应挡住"," 合成线程上的 transform 动画",[15,13565,13566,13567,1357,13570,13573,13574,13576],{},"对比：用 ",[19,13568,13569],{},"top",[19,13571,13572],{},"left"," 做位移动画会改布局，通常走 ",[24,13575,13499],{}," 路径，代价大得多。",[15,13578,13579,13582,13583,13586,13587,13589,13590,13592],{},[24,13580,13581],{},"注意："," 对比的前提是 ",[24,13584,13585],{},"画面一样、实现不同","。下面 demo 两个小球同步左右移动，左边用 ",[19,13588,1437],{},"，右边用 ",[19,13591,13572],{},"；视觉上应一致，差别在每一帧走合成还是 Layout。",[2648,13594,13596],{"title":13595},"transform vs left：同动画、不同实现",[77,13597,13599],{"className":2653,"code":13598,"language":337,"meta":85,"style":85},"\u003Ctemplate>\n \u003Cdiv class=\"wrap\">\n \u003Cp class=\"tip\">\n 点「开始动画」：两球同步往复移动。左边 \u003Ccode>transform: translateX\u003C\u002Fcode>，右边\n \u003Ccode>left\u003C\u002Fcode>。画面应一致；右轨每帧触发布局，主线程更忙时可能更卡。\n \u003C\u002Fp>\n\n \u003Cdiv class=\"compare\">\n \u003Cdiv class=\"col\">\n \u003Cdiv class=\"col-head\">\n \u003Cspan class=\"tag good\">transform\u003C\u002Fspan>\n \u003Cspan class=\"metric\">本帧 ≈ {{ transformMs }}ms\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"track\">\n \u003Cdiv class=\"ball\" :style=\"{ transform: `translateX(${x}px)` }\" \u002F>\n \u003C\u002Fdiv>\n \u003Cp class=\"note\">合成阶段位移，不改布局树\u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"col\">\n \u003Cdiv class=\"col-head\">\n \u003Cspan class=\"tag warn\">left\u003C\u002Fspan>\n \u003Cspan class=\"metric warn-m\">{{ layoutMs }}ms\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"track\">\n \u003Cdiv ref=\"leftBall\" class=\"ball\" :style=\"{ left: `${x}px` }\" \u002F>\n \u003C\u002Fdiv>\n \u003Cp class=\"note\">每帧改几何位置 → Layout\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"actions\">\n \u003Cbutton class=\"btn\" :class=\"{ active: running }\" @click=\"toggle\">\n {{ running ? '停止动画' : '开始动画' }}\n \u003C\u002Fbutton>\n \u003Cbutton class=\"btn ghost\" @click=\"reset\">复位\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nimport { nextTick, onUnmounted, ref } from 'vue'\n\nconst running = ref(false)\nconst x = ref(0)\nconst transformMs = ref(0)\nconst layoutMs = ref(0)\nconst leftBall = ref(null)\n\nlet rafId = 0\nlet start = 0\nlet tSamples = []\nlet lSamples = []\n\nfunction tick(now) {\n if (!start) start = now\n const phase = (now - start) \u002F 420\n const value = Math.sin(phase) * 100 + 100\n\n const t0 = performance.now()\n x.value = value\n const tCost = performance.now() - t0\n tSamples.push(tCost)\n if (tSamples.length > 20) tSamples.shift()\n transformMs.value = Math.round((tSamples.reduce((a, b) => a + b, 0) \u002F tSamples.length) * 100) \u002F 100\n\n nextTick(() => {\n const l0 = performance.now()\n const el = leftBall.value\n if (el) {\n void el.offsetLeft\n void el.offsetWidth\n void el.getBoundingClientRect()\n }\n const lCost = performance.now() - l0\n lSamples.push(lCost)\n if (lSamples.length > 20) lSamples.shift()\n layoutMs.value = Math.round((lSamples.reduce((a, b) => a + b, 0) \u002F lSamples.length) * 10) \u002F 10\n\n if (running.value) {\n rafId = requestAnimationFrame(tick)\n }\n })\n}\n\nfunction resetAnim() {\n start = 0\n x.value = 0\n tSamples = []\n lSamples = []\n transformMs.value = 0\n layoutMs.value = 0\n}\n\nfunction toggle() {\n running.value = !running.value\n if (running.value) {\n resetAnim()\n rafId = requestAnimationFrame(tick)\n } else {\n cancelAnimationFrame(rafId)\n }\n}\n\nfunction reset() {\n running.value = false\n cancelAnimationFrame(rafId)\n resetAnim()\n}\n\nonUnmounted(() => cancelAnimationFrame(rafId))\n\u003C\u002Fscript>\n\n\u003Cstyle scoped>\n.wrap {\n padding: 20px;\n font-family: system-ui, sans-serif;\n}\n\n.tip {\n margin: 0 0 14px;\n color: #64748b;\n font-size: 0.85rem;\n line-height: 1.55;\n}\n\n.tip code {\n font-size: 0.8em;\n padding: 1px 4px;\n border-radius: 4px;\n background: #e2e8f0;\n}\n\n.compare {\n display: grid;\n gap: 12px;\n}\n\n@media (min-width: 520px) {\n .compare {\n grid-template-columns: 1fr 1fr;\n }\n}\n\n.col {\n padding: 10px;\n border-radius: 10px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n}\n\n.col-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 8px;\n gap: 6px;\n}\n\n.tag {\n font-size: 11px;\n font-weight: 600;\n padding: 2px 8px;\n border-radius: 999px;\n}\n\n.tag.good {\n background: #dcfce7;\n color: #166534;\n}\n\n.tag.warn {\n background: #fef3c7;\n color: #92400e;\n}\n\n.metric {\n font-size: 11px;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n color: #166534;\n}\n\n.metric.warn-m {\n color: #b45309;\n}\n\n.track {\n position: relative;\n height: 44px;\n border-radius: 8px;\n background: #e2e8f0;\n overflow: hidden;\n}\n\n.ball {\n position: absolute;\n top: 10px;\n left: 0;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background: #6366f1;\n will-change: transform, left;\n}\n\n.note {\n margin: 8px 0 0;\n font-size: 11px;\n color: #94a3b8;\n}\n\n.actions {\n display: flex;\n gap: 8px;\n margin-top: 14px;\n}\n\n.btn {\n padding: 8px 16px;\n border: none;\n border-radius: 8px;\n background: #6366f1;\n color: white;\n font-weight: 600;\n cursor: pointer;\n font-size: 13px;\n}\n\n.btn.active {\n background: #4f46e5;\n}\n\n.btn.ghost {\n background: #e2e8f0;\n color: #334155;\n}\n\u003C\u002Fstyle>\n",[19,13600,13601,13609,13624,13639,13654,13668,13676,13680,13695,13710,13725,13745,13765,13773,13788,13812,13820,13840,13848,13852,13866,13880,13899,13919,13927,13941,13971,13979,13998,14006,14014,14018,14033,14062,14067,14075,14102,14110,14118,14126,14130,14140,14151,14155,14173,14190,14207,14224,14242,14246,14259,14269,14281,14292,14296,14309,14326,14348,14373,14377,14393,14403,14423,14433,14456,14516,14520,14531,14546,14557,14565,14573,14580,14592,14596,14616,14626,14646,14704,14708,14715,14728,14732,14737,14741,14745,14754,14763,14771,14780,14789,14797,14806,14810,14814,14823,14836,14842,14849,14860,14870,14878,14882,14886,14890,14899,14908,14915,14922,14926,14930,14945,14953,14957,14967,14974,14986,15000,15004,15008,15015,15032,15042,15055,15066,15070,15074,15083,15096,15112,15124,15134,15138,15142,15149,15159,15171,15175,15179,15196,15203,15221,15225,15229,15233,15240,15252,15264,15274,15291,15295,15299,15306,15316,15326,15337,15349,15361,15365,15369,15376,15388,15398,15414,15426,15430,15434,15441,15452,15463,15467,15471,15478,15489,15500,15504,15508,15515,15527,15537,15547,15557,15561,15565,15572,15583,15587,15591,15598,15608,15621,15633,15643,15653,15657,15661,15668,15678,15690,15700,15712,15724,15736,15746,15758,15762,15766,15773,15789,15802,15814,15819,15824,15832,15843,15856,15870,15875,15880,15887,15904,15915,15928,15939,15950,15961,15972,15985,15990,15995,16003,16015,16020,16025,16033,16044,16055,16060],{"__ignoreMap":85},[107,13602,13603,13605,13607],{"class":109,"line":110},[107,13604,1148],{"class":1147},[107,13606,2663],{"class":1151},[107,13608,1170],{"class":1147},[107,13610,13611,13613,13615,13617,13619,13622],{"class":109,"line":116},[107,13612,2670],{"class":1147},[107,13614,2673],{"class":1151},[107,13616,2676],{"class":1154},[107,13618,1158],{"class":1147},[107,13620,13621],{"class":1161},"\"wrap\"",[107,13623,1170],{"class":1147},[107,13625,13626,13628,13630,13632,13634,13637],{"class":109,"line":122},[107,13627,2688],{"class":1147},[107,13629,15],{"class":1151},[107,13631,2676],{"class":1154},[107,13633,1158],{"class":1147},[107,13635,13636],{"class":1161},"\"tip\"",[107,13638,1170],{"class":1147},[107,13640,13641,13644,13646,13649,13651],{"class":109,"line":128},[107,13642,13643],{"class":1147}," 点「开始动画」：两球同步往复移动。左边 \u003C",[107,13645,19],{"class":1151},[107,13647,13648],{"class":1147},">transform: translateX\u003C\u002F",[107,13650,19],{"class":1151},[107,13652,13653],{"class":1147},">，右边\n",[107,13655,13656,13658,13660,13663,13665],{"class":109,"line":134},[107,13657,2704],{"class":1147},[107,13659,19],{"class":1151},[107,13661,13662],{"class":1147},">left\u003C\u002F",[107,13664,19],{"class":1151},[107,13666,13667],{"class":1147},">。画面应一致；右轨每帧触发布局，主线程更忙时可能更卡。\n",[107,13669,13670,13672,13674],{"class":109,"line":140},[107,13671,2734],{"class":1147},[107,13673,15],{"class":1151},[107,13675,1170],{"class":1147},[107,13677,13678],{"class":109,"line":470},[107,13679,479],{"emptyLinePlaceholder":329},[107,13681,13682,13684,13686,13688,13690,13693],{"class":109,"line":476},[107,13683,2688],{"class":1147},[107,13685,2673],{"class":1151},[107,13687,2676],{"class":1154},[107,13689,1158],{"class":1147},[107,13691,13692],{"class":1161},"\"compare\"",[107,13694,1170],{"class":1147},[107,13696,13697,13699,13701,13703,13705,13708],{"class":109,"line":482},[107,13698,2704],{"class":1147},[107,13700,2673],{"class":1151},[107,13702,2676],{"class":1154},[107,13704,1158],{"class":1147},[107,13706,13707],{"class":1161},"\"col\"",[107,13709,1170],{"class":1147},[107,13711,13712,13714,13716,13718,13720,13723],{"class":109,"line":488},[107,13713,3952],{"class":1147},[107,13715,2673],{"class":1151},[107,13717,2676],{"class":1154},[107,13719,1158],{"class":1147},[107,13721,13722],{"class":1161},"\"col-head\"",[107,13724,1170],{"class":1147},[107,13726,13727,13729,13731,13733,13735,13738,13741,13743],{"class":109,"line":494},[107,13728,5508],{"class":1147},[107,13730,107],{"class":1151},[107,13732,2676],{"class":1154},[107,13734,1158],{"class":1147},[107,13736,13737],{"class":1161},"\"tag good\"",[107,13739,13740],{"class":1147},">transform\u003C\u002F",[107,13742,107],{"class":1151},[107,13744,1170],{"class":1147},[107,13746,13747,13749,13751,13753,13755,13758,13761,13763],{"class":109,"line":500},[107,13748,5508],{"class":1147},[107,13750,107],{"class":1151},[107,13752,2676],{"class":1154},[107,13754,1158],{"class":1147},[107,13756,13757],{"class":1161},"\"metric\"",[107,13759,13760],{"class":1147},">本帧 ≈ {{ transformMs }}ms\u003C\u002F",[107,13762,107],{"class":1151},[107,13764,1170],{"class":1147},[107,13766,13767,13769,13771],{"class":109,"line":506},[107,13768,5534],{"class":1147},[107,13770,2673],{"class":1151},[107,13772,1170],{"class":1147},[107,13774,13775,13777,13779,13781,13783,13786],{"class":109,"line":512},[107,13776,3952],{"class":1147},[107,13778,2673],{"class":1151},[107,13780,2676],{"class":1154},[107,13782,1158],{"class":1147},[107,13784,13785],{"class":1161},"\"track\"",[107,13787,1170],{"class":1147},[107,13789,13790,13792,13794,13796,13798,13801,13803,13805,13808,13810],{"class":109,"line":518},[107,13791,5508],{"class":1147},[107,13793,2673],{"class":1151},[107,13795,2676],{"class":1154},[107,13797,1158],{"class":1147},[107,13799,13800],{"class":1161},"\"ball\"",[107,13802,4041],{"class":1154},[107,13804,1158],{"class":1147},[107,13806,13807],{"class":1161},"\"{ transform: `translateX(${x}px)` }\"",[107,13809,9497],{"class":8688},[107,13811,1170],{"class":1147},[107,13813,13814,13816,13818],{"class":109,"line":524},[107,13815,5534],{"class":1147},[107,13817,2673],{"class":1151},[107,13819,1170],{"class":1147},[107,13821,13822,13824,13826,13828,13830,13833,13836,13838],{"class":109,"line":529},[107,13823,3952],{"class":1147},[107,13825,15],{"class":1151},[107,13827,2676],{"class":1154},[107,13829,1158],{"class":1147},[107,13831,13832],{"class":1161},"\"note\"",[107,13834,13835],{"class":1147},">合成阶段位移，不改布局树\u003C\u002F",[107,13837,15],{"class":1151},[107,13839,1170],{"class":1147},[107,13841,13842,13844,13846],{"class":109,"line":535},[107,13843,2725],{"class":1147},[107,13845,2673],{"class":1151},[107,13847,1170],{"class":1147},[107,13849,13850],{"class":109,"line":2481},[107,13851,479],{"emptyLinePlaceholder":329},[107,13853,13854,13856,13858,13860,13862,13864],{"class":109,"line":2487},[107,13855,2704],{"class":1147},[107,13857,2673],{"class":1151},[107,13859,2676],{"class":1154},[107,13861,1158],{"class":1147},[107,13863,13707],{"class":1161},[107,13865,1170],{"class":1147},[107,13867,13868,13870,13872,13874,13876,13878],{"class":109,"line":2495},[107,13869,3952],{"class":1147},[107,13871,2673],{"class":1151},[107,13873,2676],{"class":1154},[107,13875,1158],{"class":1147},[107,13877,13722],{"class":1161},[107,13879,1170],{"class":1147},[107,13881,13882,13884,13886,13888,13890,13893,13895,13897],{"class":109,"line":2500},[107,13883,5508],{"class":1147},[107,13885,107],{"class":1151},[107,13887,2676],{"class":1154},[107,13889,1158],{"class":1147},[107,13891,13892],{"class":1161},"\"tag warn\"",[107,13894,13662],{"class":1147},[107,13896,107],{"class":1151},[107,13898,1170],{"class":1147},[107,13900,13901,13903,13905,13907,13909,13912,13915,13917],{"class":109,"line":2505},[107,13902,5508],{"class":1147},[107,13904,107],{"class":1151},[107,13906,2676],{"class":1154},[107,13908,1158],{"class":1147},[107,13910,13911],{"class":1161},"\"metric warn-m\"",[107,13913,13914],{"class":1147},">{{ layoutMs }}ms\u003C\u002F",[107,13916,107],{"class":1151},[107,13918,1170],{"class":1147},[107,13920,13921,13923,13925],{"class":109,"line":2513},[107,13922,5534],{"class":1147},[107,13924,2673],{"class":1151},[107,13926,1170],{"class":1147},[107,13928,13929,13931,13933,13935,13937,13939],{"class":109,"line":2536},[107,13930,3952],{"class":1147},[107,13932,2673],{"class":1151},[107,13934,2676],{"class":1154},[107,13936,1158],{"class":1147},[107,13938,13785],{"class":1161},[107,13940,1170],{"class":1147},[107,13942,13943,13945,13947,13949,13951,13954,13956,13958,13960,13962,13964,13967,13969],{"class":109,"line":2541},[107,13944,5508],{"class":1147},[107,13946,2673],{"class":1151},[107,13948,4124],{"class":1154},[107,13950,1158],{"class":1147},[107,13952,13953],{"class":1161},"\"leftBall\"",[107,13955,2676],{"class":1154},[107,13957,1158],{"class":1147},[107,13959,13800],{"class":1161},[107,13961,4041],{"class":1154},[107,13963,1158],{"class":1147},[107,13965,13966],{"class":1161},"\"{ left: `${x}px` }\"",[107,13968,9497],{"class":8688},[107,13970,1170],{"class":1147},[107,13972,13973,13975,13977],{"class":109,"line":2546},[107,13974,5534],{"class":1147},[107,13976,2673],{"class":1151},[107,13978,1170],{"class":1147},[107,13980,13981,13983,13985,13987,13989,13991,13994,13996],{"class":109,"line":2556},[107,13982,3952],{"class":1147},[107,13984,15],{"class":1151},[107,13986,2676],{"class":1154},[107,13988,1158],{"class":1147},[107,13990,13832],{"class":1161},[107,13992,13993],{"class":1147},">每帧改几何位置 → Layout\u003C\u002F",[107,13995,15],{"class":1151},[107,13997,1170],{"class":1147},[107,13999,14000,14002,14004],{"class":109,"line":2564},[107,14001,2725],{"class":1147},[107,14003,2673],{"class":1151},[107,14005,1170],{"class":1147},[107,14007,14008,14010,14012],{"class":109,"line":2572},[107,14009,2734],{"class":1147},[107,14011,2673],{"class":1151},[107,14013,1170],{"class":1147},[107,14015,14016],{"class":109,"line":2582},[107,14017,479],{"emptyLinePlaceholder":329},[107,14019,14020,14022,14024,14026,14028,14031],{"class":109,"line":2622},[107,14021,2688],{"class":1147},[107,14023,2673],{"class":1151},[107,14025,2676],{"class":1154},[107,14027,1158],{"class":1147},[107,14029,14030],{"class":1161},"\"actions\"",[107,14032,1170],{"class":1147},[107,14034,14035,14037,14039,14041,14043,14045,14048,14050,14053,14055,14057,14060],{"class":109,"line":2627},[107,14036,2704],{"class":1147},[107,14038,9161],{"class":1151},[107,14040,2676],{"class":1154},[107,14042,1158],{"class":1147},[107,14044,11356],{"class":1161},[107,14046,14047],{"class":1154}," :class",[107,14049,1158],{"class":1147},[107,14051,14052],{"class":1161},"\"{ active: running }\"",[107,14054,11259],{"class":1154},[107,14056,1158],{"class":1147},[107,14058,14059],{"class":1161},"\"toggle\"",[107,14061,1170],{"class":1147},[107,14063,14064],{"class":109,"line":3086},[107,14065,14066],{"class":1147}," {{ running ? '停止动画' : '开始动画' }}\n",[107,14068,14069,14071,14073],{"class":109,"line":3095},[107,14070,2725],{"class":1147},[107,14072,9161],{"class":1151},[107,14074,1170],{"class":1147},[107,14076,14077,14079,14081,14083,14085,14088,14090,14092,14095,14098,14100],{"class":109,"line":3110},[107,14078,2704],{"class":1147},[107,14080,9161],{"class":1151},[107,14082,2676],{"class":1154},[107,14084,1158],{"class":1147},[107,14086,14087],{"class":1161},"\"btn ghost\"",[107,14089,11259],{"class":1154},[107,14091,1158],{"class":1147},[107,14093,14094],{"class":1161},"\"reset\"",[107,14096,14097],{"class":1147},">复位\u003C\u002F",[107,14099,9161],{"class":1151},[107,14101,1170],{"class":1147},[107,14103,14104,14106,14108],{"class":109,"line":3145},[107,14105,2734],{"class":1147},[107,14107,2673],{"class":1151},[107,14109,1170],{"class":1147},[107,14111,14112,14114,14116],{"class":109,"line":3172},[107,14113,2743],{"class":1147},[107,14115,2673],{"class":1151},[107,14117,1170],{"class":1147},[107,14119,14120,14122,14124],{"class":109,"line":3201},[107,14121,1207],{"class":1147},[107,14123,2663],{"class":1151},[107,14125,1170],{"class":1147},[107,14127,14128],{"class":109,"line":3240},[107,14129,479],{"emptyLinePlaceholder":329},[107,14131,14132,14134,14136,14138],{"class":109,"line":3245},[107,14133,1148],{"class":1147},[107,14135,1177],{"class":1151},[107,14137,4090],{"class":1154},[107,14139,1170],{"class":1147},[107,14141,14142,14144,14147,14149],{"class":109,"line":3252},[107,14143,4097],{"class":1199},[107,14145,14146],{"class":1147}," { nextTick, onUnmounted, ref } ",[107,14148,4103],{"class":1199},[107,14150,4106],{"class":1161},[107,14152,14153],{"class":109,"line":3273},[107,14154,479],{"emptyLinePlaceholder":329},[107,14156,14157,14159,14162,14164,14166,14168,14171],{"class":109,"line":3281},[107,14158,4115],{"class":1199},[107,14160,14161],{"class":1805}," running",[107,14163,4121],{"class":1199},[107,14165,4124],{"class":1154},[107,14167,1190],{"class":1147},[107,14169,14170],{"class":1805},"false",[107,14172,2478],{"class":1147},[107,14174,14175,14177,14180,14182,14184,14186,14188],{"class":109,"line":3322},[107,14176,4115],{"class":1199},[107,14178,14179],{"class":1805}," x",[107,14181,4121],{"class":1199},[107,14183,4124],{"class":1154},[107,14185,1190],{"class":1147},[107,14187,3260],{"class":1805},[107,14189,2478],{"class":1147},[107,14191,14192,14194,14197,14199,14201,14203,14205],{"class":109,"line":3361},[107,14193,4115],{"class":1199},[107,14195,14196],{"class":1805}," transformMs",[107,14198,4121],{"class":1199},[107,14200,4124],{"class":1154},[107,14202,1190],{"class":1147},[107,14204,3260],{"class":1805},[107,14206,2478],{"class":1147},[107,14208,14209,14211,14214,14216,14218,14220,14222],{"class":109,"line":3389},[107,14210,4115],{"class":1199},[107,14212,14213],{"class":1805}," layoutMs",[107,14215,4121],{"class":1199},[107,14217,4124],{"class":1154},[107,14219,1190],{"class":1147},[107,14221,3260],{"class":1805},[107,14223,2478],{"class":1147},[107,14225,14226,14228,14231,14233,14235,14237,14240],{"class":109,"line":3394},[107,14227,4115],{"class":1199},[107,14229,14230],{"class":1805}," leftBall",[107,14232,4121],{"class":1199},[107,14234,4124],{"class":1154},[107,14236,1190],{"class":1147},[107,14238,14239],{"class":1805},"null",[107,14241,2478],{"class":1147},[107,14243,14244],{"class":109,"line":3399},[107,14245,479],{"emptyLinePlaceholder":329},[107,14247,14248,14251,14254,14256],{"class":109,"line":3406},[107,14249,14250],{"class":1199},"let",[107,14252,14253],{"class":1147}," rafId ",[107,14255,1158],{"class":1199},[107,14257,14258],{"class":1805}," 0\n",[107,14260,14261,14263,14265,14267],{"class":109,"line":3426},[107,14262,14250],{"class":1199},[107,14264,12437],{"class":1147},[107,14266,1158],{"class":1199},[107,14268,14258],{"class":1805},[107,14270,14271,14273,14276,14278],{"class":109,"line":3433},[107,14272,14250],{"class":1199},[107,14274,14275],{"class":1147}," tSamples ",[107,14277,1158],{"class":1199},[107,14279,14280],{"class":1147}," []\n",[107,14282,14283,14285,14288,14290],{"class":109,"line":3469},[107,14284,14250],{"class":1199},[107,14286,14287],{"class":1147}," lSamples ",[107,14289,1158],{"class":1199},[107,14291,14280],{"class":1147},[107,14293,14294],{"class":109,"line":3504},[107,14295,479],{"emptyLinePlaceholder":329},[107,14297,14298,14300,14303,14305,14307],{"class":109,"line":3521},[107,14299,1760],{"class":1199},[107,14301,14302],{"class":1154}," tick",[107,14304,1190],{"class":1147},[107,14306,12416],{"class":1768},[107,14308,1772],{"class":1147},[107,14310,14311,14313,14315,14318,14321,14323],{"class":109,"line":3526},[107,14312,1854],{"class":1199},[107,14314,8345],{"class":1147},[107,14316,14317],{"class":1199},"!",[107,14319,14320],{"class":1147},"start) start ",[107,14322,1158],{"class":1199},[107,14324,14325],{"class":1147}," now\n",[107,14327,14328,14330,14333,14335,14338,14340,14343,14345],{"class":109,"line":3531},[107,14329,12345],{"class":1199},[107,14331,14332],{"class":1805}," phase",[107,14334,4121],{"class":1199},[107,14336,14337],{"class":1147}," (now ",[107,14339,1954],{"class":1199},[107,14341,14342],{"class":1147}," start) ",[107,14344,1962],{"class":1199},[107,14346,14347],{"class":1805}," 420\n",[107,14349,14350,14352,14354,14356,14358,14361,14364,14366,14368,14370],{"class":109,"line":3540},[107,14351,12345],{"class":1199},[107,14353,3958],{"class":1805},[107,14355,4121],{"class":1199},[107,14357,1815],{"class":1147},[107,14359,14360],{"class":1154},"sin",[107,14362,14363],{"class":1147},"(phase) ",[107,14365,1928],{"class":1199},[107,14367,2860],{"class":1805},[107,14369,1934],{"class":1199},[107,14371,14372],{"class":1805}," 100\n",[107,14374,14375],{"class":109,"line":3547},[107,14376,479],{"emptyLinePlaceholder":329},[107,14378,14379,14381,14384,14386,14389,14391],{"class":109,"line":3554},[107,14380,12345],{"class":1199},[107,14382,14383],{"class":1805}," t0",[107,14385,4121],{"class":1199},[107,14387,14388],{"class":1147}," performance.",[107,14390,12416],{"class":1154},[107,14392,12419],{"class":1147},[107,14394,14395,14398,14400],{"class":109,"line":3563},[107,14396,14397],{"class":1147}," x.value ",[107,14399,1158],{"class":1199},[107,14401,14402],{"class":1147}," value\n",[107,14404,14405,14407,14410,14412,14414,14416,14418,14420],{"class":109,"line":3602},[107,14406,12345],{"class":1199},[107,14408,14409],{"class":1805}," tCost",[107,14411,4121],{"class":1199},[107,14413,14388],{"class":1147},[107,14415,12416],{"class":1154},[107,14417,12432],{"class":1147},[107,14419,1954],{"class":1199},[107,14421,14422],{"class":1147}," t0\n",[107,14424,14425,14428,14430],{"class":109,"line":3607},[107,14426,14427],{"class":1147}," tSamples.",[107,14429,424],{"class":1154},[107,14431,14432],{"class":1147},"(tCost)\n",[107,14434,14435,14437,14440,14443,14446,14448,14451,14454],{"class":109,"line":3612},[107,14436,1854],{"class":1199},[107,14438,14439],{"class":1147}," (tSamples.",[107,14441,14442],{"class":1805},"length",[107,14444,14445],{"class":1199}," >",[107,14447,3479],{"class":1805},[107,14449,14450],{"class":1147},") tSamples.",[107,14452,14453],{"class":1154},"shift",[107,14455,12419],{"class":1147},[107,14457,14458,14461,14463,14465,14467,14470,14473,14475,14477,14479,14482,14484,14486,14488,14490,14493,14495,14497,14499,14502,14504,14506,14508,14510,14512,14514],{"class":109,"line":3617},[107,14459,14460],{"class":1147}," transformMs.value ",[107,14462,1158],{"class":1199},[107,14464,1815],{"class":1147},[107,14466,3769],{"class":1154},[107,14468,14469],{"class":1147},"((tSamples.",[107,14471,14472],{"class":1154},"reduce",[107,14474,2197],{"class":1147},[107,14476,264],{"class":1768},[107,14478,2299],{"class":1147},[107,14480,14481],{"class":1768},"b",[107,14483,1939],{"class":1147},[107,14485,4153],{"class":1199},[107,14487,1780],{"class":1147},[107,14489,367],{"class":1199},[107,14491,14492],{"class":1147}," b, ",[107,14494,3260],{"class":1805},[107,14496,1939],{"class":1147},[107,14498,1962],{"class":1199},[107,14500,14501],{"class":1147}," tSamples.",[107,14503,14442],{"class":1805},[107,14505,1939],{"class":1147},[107,14507,1928],{"class":1199},[107,14509,2860],{"class":1805},[107,14511,1939],{"class":1147},[107,14513,1962],{"class":1199},[107,14515,14372],{"class":1805},[107,14517,14518],{"class":109,"line":3625},[107,14519,479],{"emptyLinePlaceholder":329},[107,14521,14522,14525,14527,14529],{"class":109,"line":3637},[107,14523,14524],{"class":1154}," nextTick",[107,14526,4150],{"class":1147},[107,14528,4153],{"class":1199},[107,14530,2125],{"class":1147},[107,14532,14533,14535,14538,14540,14542,14544],{"class":109,"line":3652},[107,14534,12405],{"class":1199},[107,14536,14537],{"class":1805}," l0",[107,14539,4121],{"class":1199},[107,14541,14388],{"class":1147},[107,14543,12416],{"class":1154},[107,14545,12419],{"class":1147},[107,14547,14548,14550,14552,14554],{"class":109,"line":3665},[107,14549,12405],{"class":1199},[107,14551,13389],{"class":1805},[107,14553,4121],{"class":1199},[107,14555,14556],{"class":1147}," leftBall.value\n",[107,14558,14559,14562],{"class":109,"line":3678},[107,14560,14561],{"class":1199}," if",[107,14563,14564],{"class":1147}," (el) {\n",[107,14566,14567,14570],{"class":109,"line":3683},[107,14568,14569],{"class":1199}," void",[107,14571,14572],{"class":1147}," el.offsetLeft\n",[107,14574,14575,14577],{"class":109,"line":6830},[107,14576,14569],{"class":1199},[107,14578,14579],{"class":1147}," el.offsetWidth\n",[107,14581,14582,14584,14587,14590],{"class":109,"line":6842},[107,14583,14569],{"class":1199},[107,14585,14586],{"class":1147}," el.",[107,14588,14589],{"class":1154},"getBoundingClientRect",[107,14591,12419],{"class":1147},[107,14593,14594],{"class":109,"line":6855},[107,14595,8384],{"class":1147},[107,14597,14598,14600,14603,14605,14607,14609,14611,14613],{"class":109,"line":6860},[107,14599,12405],{"class":1199},[107,14601,14602],{"class":1805}," lCost",[107,14604,4121],{"class":1199},[107,14606,14388],{"class":1147},[107,14608,12416],{"class":1154},[107,14610,12432],{"class":1147},[107,14612,1954],{"class":1199},[107,14614,14615],{"class":1147}," l0\n",[107,14617,14618,14621,14623],{"class":109,"line":6865},[107,14619,14620],{"class":1147}," lSamples.",[107,14622,424],{"class":1154},[107,14624,14625],{"class":1147},"(lCost)\n",[107,14627,14628,14630,14633,14635,14637,14639,14642,14644],{"class":109,"line":6872},[107,14629,14561],{"class":1199},[107,14631,14632],{"class":1147}," (lSamples.",[107,14634,14442],{"class":1805},[107,14636,14445],{"class":1199},[107,14638,3479],{"class":1805},[107,14640,14641],{"class":1147},") lSamples.",[107,14643,14453],{"class":1154},[107,14645,12419],{"class":1147},[107,14647,14648,14651,14653,14655,14657,14660,14662,14664,14666,14668,14670,14672,14674,14676,14678,14680,14682,14684,14686,14689,14691,14693,14695,14697,14699,14701],{"class":109,"line":6883},[107,14649,14650],{"class":1147}," layoutMs.value ",[107,14652,1158],{"class":1199},[107,14654,1815],{"class":1147},[107,14656,3769],{"class":1154},[107,14658,14659],{"class":1147},"((lSamples.",[107,14661,14472],{"class":1154},[107,14663,2197],{"class":1147},[107,14665,264],{"class":1768},[107,14667,2299],{"class":1147},[107,14669,14481],{"class":1768},[107,14671,1939],{"class":1147},[107,14673,4153],{"class":1199},[107,14675,1780],{"class":1147},[107,14677,367],{"class":1199},[107,14679,14492],{"class":1147},[107,14681,3260],{"class":1805},[107,14683,1939],{"class":1147},[107,14685,1962],{"class":1199},[107,14687,14688],{"class":1147}," lSamples.",[107,14690,14442],{"class":1805},[107,14692,1939],{"class":1147},[107,14694,1928],{"class":1199},[107,14696,3287],{"class":1805},[107,14698,1939],{"class":1147},[107,14700,1962],{"class":1199},[107,14702,14703],{"class":1805}," 10\n",[107,14705,14706],{"class":109,"line":6895},[107,14707,479],{"emptyLinePlaceholder":329},[107,14709,14710,14712],{"class":109,"line":6908},[107,14711,14561],{"class":1199},[107,14713,14714],{"class":1147}," (running.value) {\n",[107,14716,14717,14720,14722,14725],{"class":109,"line":6919},[107,14718,14719],{"class":1147}," rafId ",[107,14721,1158],{"class":1199},[107,14723,14724],{"class":1154}," requestAnimationFrame",[107,14726,14727],{"class":1147},"(tick)\n",[107,14729,14730],{"class":109,"line":6932},[107,14731,8384],{"class":1147},[107,14733,14734],{"class":109,"line":6946},[107,14735,14736],{"class":1147}," })\n",[107,14738,14739],{"class":109,"line":6959},[107,14740,538],{"class":1147},[107,14742,14743],{"class":109,"line":6972},[107,14744,479],{"emptyLinePlaceholder":329},[107,14746,14747,14749,14752],{"class":109,"line":6984},[107,14748,1760],{"class":1199},[107,14750,14751],{"class":1154}," resetAnim",[107,14753,1915],{"class":1147},[107,14755,14756,14759,14761],{"class":109,"line":7002},[107,14757,14758],{"class":1147}," start ",[107,14760,1158],{"class":1199},[107,14762,14258],{"class":1805},[107,14764,14765,14767,14769],{"class":109,"line":7007},[107,14766,14397],{"class":1147},[107,14768,1158],{"class":1199},[107,14770,14258],{"class":1805},[107,14772,14773,14776,14778],{"class":109,"line":7012},[107,14774,14775],{"class":1147}," tSamples ",[107,14777,1158],{"class":1199},[107,14779,14280],{"class":1147},[107,14781,14782,14785,14787],{"class":109,"line":7019},[107,14783,14784],{"class":1147}," lSamples ",[107,14786,1158],{"class":1199},[107,14788,14280],{"class":1147},[107,14790,14791,14793,14795],{"class":109,"line":7036},[107,14792,14460],{"class":1147},[107,14794,1158],{"class":1199},[107,14796,14258],{"class":1805},[107,14798,14799,14802,14804],{"class":109,"line":7051},[107,14800,14801],{"class":1147}," layoutMs.value ",[107,14803,1158],{"class":1199},[107,14805,14258],{"class":1805},[107,14807,14808],{"class":109,"line":7065},[107,14809,538],{"class":1147},[107,14811,14812],{"class":109,"line":7082},[107,14813,479],{"emptyLinePlaceholder":329},[107,14815,14816,14818,14821],{"class":109,"line":7095},[107,14817,1760],{"class":1199},[107,14819,14820],{"class":1154}," toggle",[107,14822,1915],{"class":1147},[107,14824,14825,14828,14830,14833],{"class":109,"line":7122},[107,14826,14827],{"class":1147}," running.value ",[107,14829,1158],{"class":1199},[107,14831,14832],{"class":1199}," !",[107,14834,14835],{"class":1147},"running.value\n",[107,14837,14838,14840],{"class":109,"line":7133},[107,14839,1854],{"class":1199},[107,14841,14714],{"class":1147},[107,14843,14844,14847],{"class":109,"line":7146},[107,14845,14846],{"class":1154}," resetAnim",[107,14848,12419],{"class":1147},[107,14850,14851,14854,14856,14858],{"class":109,"line":7159},[107,14852,14853],{"class":1147}," rafId ",[107,14855,1158],{"class":1199},[107,14857,14724],{"class":1154},[107,14859,14727],{"class":1147},[107,14861,14862,14865,14868],{"class":109,"line":7171},[107,14863,14864],{"class":1147}," } ",[107,14866,14867],{"class":1199},"else",[107,14869,2125],{"class":1147},[107,14871,14872,14875],{"class":109,"line":7176},[107,14873,14874],{"class":1154}," cancelAnimationFrame",[107,14876,14877],{"class":1147},"(rafId)\n",[107,14879,14880],{"class":109,"line":10069},[107,14881,521],{"class":1147},[107,14883,14884],{"class":109,"line":10081},[107,14885,538],{"class":1147},[107,14887,14888],{"class":109,"line":10092},[107,14889,479],{"emptyLinePlaceholder":329},[107,14891,14892,14894,14897],{"class":109,"line":10123},[107,14893,1760],{"class":1199},[107,14895,14896],{"class":1154}," reset",[107,14898,1915],{"class":1147},[107,14900,14901,14903,14905],{"class":109,"line":10128},[107,14902,14827],{"class":1147},[107,14904,1158],{"class":1199},[107,14906,14907],{"class":1805}," false\n",[107,14909,14910,14913],{"class":109,"line":10133},[107,14911,14912],{"class":1154}," cancelAnimationFrame",[107,14914,14877],{"class":1147},[107,14916,14917,14920],{"class":109,"line":10145},[107,14918,14919],{"class":1154}," resetAnim",[107,14921,12419],{"class":1147},[107,14923,14924],{"class":109,"line":10157},[107,14925,538],{"class":1147},[107,14927,14928],{"class":109,"line":10162},[107,14929,479],{"emptyLinePlaceholder":329},[107,14931,14932,14935,14937,14939,14942],{"class":109,"line":10167},[107,14933,14934],{"class":1154},"onUnmounted",[107,14936,4150],{"class":1147},[107,14938,4153],{"class":1199},[107,14940,14941],{"class":1154}," cancelAnimationFrame",[107,14943,14944],{"class":1147},"(rafId))\n",[107,14946,14947,14949,14951],{"class":109,"line":10179},[107,14948,1207],{"class":1147},[107,14950,1177],{"class":1151},[107,14952,1170],{"class":1147},[107,14954,14955],{"class":109,"line":10190},[107,14956,479],{"emptyLinePlaceholder":329},[107,14958,14959,14961,14963,14965],{"class":109,"line":10202},[107,14960,1148],{"class":1147},[107,14962,311],{"class":1151},[107,14964,2768],{"class":1154},[107,14966,1170],{"class":1147},[107,14968,14969,14972],{"class":109,"line":10238},[107,14970,14971],{"class":1154},".wrap",[107,14973,2125],{"class":1147},[107,14975,14976,14978,14980,14982,14984],{"class":109,"line":10243},[107,14977,2232],{"class":1805},[107,14979,2133],{"class":1147},[107,14981,3865],{"class":1805},[107,14983,1269],{"class":1199},[107,14985,2141],{"class":1147},[107,14987,14988,14990,14992,14994,14996,14998],{"class":109,"line":10248},[107,14989,6619],{"class":1805},[107,14991,2133],{"class":1147},[107,14993,9823],{"class":1805},[107,14995,2299],{"class":1147},[107,14997,6624],{"class":1805},[107,14999,2141],{"class":1147},[107,15001,15002],{"class":109,"line":10256},[107,15003,538],{"class":1147},[107,15005,15006],{"class":109,"line":10267},[107,15007,479],{"emptyLinePlaceholder":329},[107,15009,15010,15013],{"class":109,"line":10278},[107,15011,15012],{"class":1154},".tip",[107,15014,2125],{"class":1147},[107,15016,15017,15019,15021,15023,15025,15028,15030],{"class":109,"line":10291},[107,15018,3628],{"class":1805},[107,15020,2133],{"class":1147},[107,15022,3260],{"class":1805},[107,15024,1861],{"class":1805},[107,15026,15027],{"class":1805}," 14",[107,15029,1269],{"class":1199},[107,15031,2141],{"class":1147},[107,15033,15034,15036,15038,15040],{"class":109,"line":10304},[107,15035,3668],{"class":1805},[107,15037,2133],{"class":1147},[107,15039,10064],{"class":1805},[107,15041,2141],{"class":1147},[107,15043,15044,15046,15048,15051,15053],{"class":109,"line":10315},[107,15045,3640],{"class":1805},[107,15047,2133],{"class":1147},[107,15049,15050],{"class":1805},"0.85",[107,15052,10386],{"class":1199},[107,15054,2141],{"class":1147},[107,15056,15057,15059,15061,15064],{"class":109,"line":10320},[107,15058,3655],{"class":1805},[107,15060,2133],{"class":1147},[107,15062,15063],{"class":1805},"1.55",[107,15065,2141],{"class":1147},[107,15067,15068],{"class":109,"line":10325},[107,15069,538],{"class":1147},[107,15071,15072],{"class":109,"line":10335},[107,15073,479],{"emptyLinePlaceholder":329},[107,15075,15076,15078,15081],{"class":109,"line":10346},[107,15077,15012],{"class":1154},[107,15079,15080],{"class":1151}," code",[107,15082,2125],{"class":1147},[107,15084,15085,15087,15089,15092,15094],{"class":109,"line":10359},[107,15086,3640],{"class":1805},[107,15088,2133],{"class":1147},[107,15090,15091],{"class":1805},"0.8",[107,15093,1266],{"class":1199},[107,15095,2141],{"class":1147},[107,15097,15098,15100,15102,15104,15106,15108,15110],{"class":109,"line":10364},[107,15099,2232],{"class":1805},[107,15101,2133],{"class":1147},[107,15103,2522],{"class":1805},[107,15105,1269],{"class":1199},[107,15107,3327],{"class":1805},[107,15109,1269],{"class":1199},[107,15111,2141],{"class":1147},[107,15113,15114,15116,15118,15120,15122],{"class":109,"line":10369},[107,15115,2269],{"class":1805},[107,15117,2133],{"class":1147},[107,15119,4359],{"class":1805},[107,15121,1269],{"class":1199},[107,15123,2141],{"class":1147},[107,15125,15126,15128,15130,15132],{"class":109,"line":10377},[107,15127,2283],{"class":1805},[107,15129,2133],{"class":1147},[107,15131,9967],{"class":1805},[107,15133,2141],{"class":1147},[107,15135,15136],{"class":109,"line":10391},[107,15137,538],{"class":1147},[107,15139,15140],{"class":109,"line":10404},[107,15141,479],{"emptyLinePlaceholder":329},[107,15143,15144,15147],{"class":109,"line":10416},[107,15145,15146],{"class":1154},".compare",[107,15148,2125],{"class":1147},[107,15150,15151,15153,15155,15157],{"class":109,"line":10427},[107,15152,2782],{"class":1805},[107,15154,2133],{"class":1147},[107,15156,2787],{"class":1805},[107,15158,2141],{"class":1147},[107,15160,15161,15163,15165,15167,15169],{"class":109,"line":10432},[107,15162,4287],{"class":1805},[107,15164,2133],{"class":1147},[107,15166,2873],{"class":1805},[107,15168,1269],{"class":1199},[107,15170,2141],{"class":1147},[107,15172,15173],{"class":109,"line":10437},[107,15174,538],{"class":1147},[107,15176,15177],{"class":109,"line":10445},[107,15178,479],{"emptyLinePlaceholder":329},[107,15180,15181,15183,15185,15187,15189,15192,15194],{"class":109,"line":10459},[107,15182,8540],{"class":1199},[107,15184,8345],{"class":1147},[107,15186,8348],{"class":1805},[107,15188,2133],{"class":1147},[107,15190,15191],{"class":1805},"520",[107,15193,1269],{"class":1199},[107,15195,1772],{"class":1147},[107,15197,15198,15201],{"class":109,"line":10477},[107,15199,15200],{"class":1154}," .compare",[107,15202,2125],{"class":1147},[107,15204,15205,15208,15210,15212,15215,15217,15219],{"class":109,"line":10490},[107,15206,15207],{"class":1805}," grid-template-columns",[107,15209,2133],{"class":1147},[107,15211,2522],{"class":1805},[107,15213,15214],{"class":1199},"fr",[107,15216,1957],{"class":1805},[107,15218,15214],{"class":1199},[107,15220,2141],{"class":1147},[107,15222,15223],{"class":109,"line":10506},[107,15224,521],{"class":1147},[107,15226,15227],{"class":109,"line":10519},[107,15228,538],{"class":1147},[107,15230,15231],{"class":109,"line":10524},[107,15232,479],{"emptyLinePlaceholder":329},[107,15234,15235,15238],{"class":109,"line":10529},[107,15236,15237],{"class":1154},".col",[107,15239,2125],{"class":1147},[107,15241,15242,15244,15246,15248,15250],{"class":109,"line":10537},[107,15243,2232],{"class":1805},[107,15245,2133],{"class":1147},[107,15247,2181],{"class":1805},[107,15249,1269],{"class":1199},[107,15251,2141],{"class":1147},[107,15253,15254,15256,15258,15260,15262],{"class":109,"line":10550},[107,15255,2269],{"class":1805},[107,15257,2133],{"class":1147},[107,15259,2181],{"class":1805},[107,15261,1269],{"class":1199},[107,15263,2141],{"class":1147},[107,15265,15266,15268,15270,15272],{"class":109,"line":10562},[107,15267,2283],{"class":1805},[107,15269,2133],{"class":1147},[107,15271,6979],{"class":1805},[107,15273,2141],{"class":1147},[107,15275,15276,15278,15280,15282,15284,15286,15289],{"class":109,"line":10573},[107,15277,2245],{"class":1805},[107,15279,2133],{"class":1147},[107,15281,2522],{"class":1805},[107,15283,1269],{"class":1199},[107,15285,3807],{"class":1805},[107,15287,15288],{"class":1805}," #e2e8f0",[107,15290,2141],{"class":1147},[107,15292,15293],{"class":109,"line":10578},[107,15294,538],{"class":1147},[107,15296,15297],{"class":109,"line":10583},[107,15298,479],{"emptyLinePlaceholder":329},[107,15300,15301,15304],{"class":109,"line":10591},[107,15302,15303],{"class":1154},".col-head",[107,15305,2125],{"class":1147},[107,15307,15308,15310,15312,15314],{"class":109,"line":10608},[107,15309,2782],{"class":1805},[107,15311,2133],{"class":1147},[107,15313,4269],{"class":1805},[107,15315,2141],{"class":1147},[107,15317,15318,15320,15322,15324],{"class":109,"line":10621},[107,15319,4276],{"class":1805},[107,15321,2133],{"class":1147},[107,15323,2799],{"class":1805},[107,15325,2141],{"class":1147},[107,15327,15328,15330,15332,15335],{"class":109,"line":10632},[107,15329,5964],{"class":1805},[107,15331,2133],{"class":1147},[107,15333,15334],{"class":1805},"space-between",[107,15336,2141],{"class":1147},[107,15338,15339,15341,15343,15345,15347],{"class":109,"line":10647},[107,15340,4301],{"class":1805},[107,15342,2133],{"class":1147},[107,15344,4292],{"class":1805},[107,15346,1269],{"class":1199},[107,15348,2141],{"class":1147},[107,15350,15351,15353,15355,15357,15359],{"class":109,"line":10660},[107,15352,4287],{"class":1805},[107,15354,2133],{"class":1147},[107,15356,4376],{"class":1805},[107,15358,1269],{"class":1199},[107,15360,2141],{"class":1147},[107,15362,15363],{"class":109,"line":10671},[107,15364,538],{"class":1147},[107,15366,15367],{"class":109,"line":10676},[107,15368,479],{"emptyLinePlaceholder":329},[107,15370,15371,15374],{"class":109,"line":10681},[107,15372,15373],{"class":1154},".tag",[107,15375,2125],{"class":1147},[107,15377,15378,15380,15382,15384,15386],{"class":109,"line":10688},[107,15379,3640],{"class":1805},[107,15381,2133],{"class":1147},[107,15383,6753],{"class":1805},[107,15385,1269],{"class":1199},[107,15387,2141],{"class":1147},[107,15389,15390,15392,15394,15396],{"class":109,"line":10705},[107,15391,7136],{"class":1805},[107,15393,2133],{"class":1147},[107,15395,7141],{"class":1805},[107,15397,2141],{"class":1147},[107,15399,15400,15402,15404,15406,15408,15410,15412],{"class":109,"line":10719},[107,15401,2232],{"class":1805},[107,15403,2133],{"class":1147},[107,15405,2221],{"class":1805},[107,15407,1269],{"class":1199},[107,15409,3474],{"class":1805},[107,15411,1269],{"class":1199},[107,15413,2141],{"class":1147},[107,15415,15416,15418,15420,15422,15424],{"class":109,"line":10731},[107,15417,2269],{"class":1805},[107,15419,2133],{"class":1147},[107,15421,11639],{"class":1805},[107,15423,1269],{"class":1199},[107,15425,2141],{"class":1147},[107,15427,15428],{"class":109,"line":10743},[107,15429,538],{"class":1147},[107,15431,15432],{"class":109,"line":10754},[107,15433,479],{"emptyLinePlaceholder":329},[107,15435,15436,15439],{"class":109,"line":10759},[107,15437,15438],{"class":1154},".tag.good",[107,15440,2125],{"class":1147},[107,15442,15443,15445,15447,15450],{"class":109,"line":10764},[107,15444,2283],{"class":1805},[107,15446,2133],{"class":1147},[107,15448,15449],{"class":1805},"#dcfce7",[107,15451,2141],{"class":1147},[107,15453,15454,15456,15458,15461],{"class":109,"line":10775},[107,15455,3668],{"class":1805},[107,15457,2133],{"class":1147},[107,15459,15460],{"class":1805},"#166534",[107,15462,2141],{"class":1147},[107,15464,15465],{"class":109,"line":10786},[107,15466,538],{"class":1147},[107,15468,15469],{"class":109,"line":10791},[107,15470,479],{"emptyLinePlaceholder":329},[107,15472,15473,15476],{"class":109,"line":10796},[107,15474,15475],{"class":1154},".tag.warn",[107,15477,2125],{"class":1147},[107,15479,15480,15482,15484,15487],{"class":109,"line":10806},[107,15481,2283],{"class":1805},[107,15483,2133],{"class":1147},[107,15485,15486],{"class":1805},"#fef3c7",[107,15488,2141],{"class":1147},[107,15490,15491,15493,15495,15498],{"class":109,"line":10817},[107,15492,3668],{"class":1805},[107,15494,2133],{"class":1147},[107,15496,15497],{"class":1805},"#92400e",[107,15499,2141],{"class":1147},[107,15501,15502],{"class":109,"line":10822},[107,15503,538],{"class":1147},[107,15505,15506],{"class":109,"line":10827},[107,15507,479],{"emptyLinePlaceholder":329},[107,15509,15510,15513],{"class":109,"line":10837},[107,15511,15512],{"class":1154},".metric",[107,15514,2125],{"class":1147},[107,15516,15517,15519,15521,15523,15525],{"class":109,"line":10848},[107,15518,3640],{"class":1805},[107,15520,2133],{"class":1147},[107,15522,6753],{"class":1805},[107,15524,1269],{"class":1199},[107,15526,2141],{"class":1147},[107,15528,15529,15531,15533,15535],{"class":109,"line":10853},[107,15530,7136],{"class":1805},[107,15532,2133],{"class":1147},[107,15534,7141],{"class":1805},[107,15536,2141],{"class":1147},[107,15538,15539,15541,15543,15545],{"class":109,"line":10858},[107,15540,10394],{"class":1805},[107,15542,2133],{"class":1147},[107,15544,10399],{"class":1805},[107,15546,2141],{"class":1147},[107,15548,15549,15551,15553,15555],{"class":109,"line":10865},[107,15550,3668],{"class":1805},[107,15552,2133],{"class":1147},[107,15554,15460],{"class":1805},[107,15556,2141],{"class":1147},[107,15558,15559],{"class":109,"line":10876},[107,15560,538],{"class":1147},[107,15562,15563],{"class":109,"line":10890},[107,15564,479],{"emptyLinePlaceholder":329},[107,15566,15567,15570],{"class":109,"line":10902},[107,15568,15569],{"class":1154},".metric.warn-m",[107,15571,2125],{"class":1147},[107,15573,15574,15576,15578,15581],{"class":109,"line":10914},[107,15575,3668],{"class":1805},[107,15577,2133],{"class":1147},[107,15579,15580],{"class":1805},"#b45309",[107,15582,2141],{"class":1147},[107,15584,15585],{"class":109,"line":10919},[107,15586,538],{"class":1147},[107,15588,15589],{"class":109,"line":10924},[107,15590,479],{"emptyLinePlaceholder":329},[107,15592,15593,15596],{"class":109,"line":10934},[107,15594,15595],{"class":1154},".track",[107,15597,2125],{"class":1147},[107,15599,15600,15602,15604,15606],{"class":109,"line":10945},[107,15601,5058],{"class":1805},[107,15603,2133],{"class":1147},[107,15605,4881],{"class":1805},[107,15607,2141],{"class":1147},[107,15609,15610,15612,15614,15617,15619],{"class":109,"line":10950},[107,15611,4715],{"class":1805},[107,15613,2133],{"class":1147},[107,15615,15616],{"class":1805},"44",[107,15618,1269],{"class":1199},[107,15620,2141],{"class":1147},[107,15622,15623,15625,15627,15629,15631],{"class":109,"line":10955},[107,15624,2269],{"class":1805},[107,15626,2133],{"class":1147},[107,15628,4292],{"class":1805},[107,15630,1269],{"class":1199},[107,15632,2141],{"class":1147},[107,15634,15635,15637,15639,15641],{"class":109,"line":10968},[107,15636,2283],{"class":1805},[107,15638,2133],{"class":1147},[107,15640,9967],{"class":1805},[107,15642,2141],{"class":1147},[107,15644,15645,15647,15649,15651],{"class":109,"line":10979},[107,15646,10509],{"class":1805},[107,15648,2133],{"class":1147},[107,15650,10514],{"class":1805},[107,15652,2141],{"class":1147},[107,15654,15655],{"class":109,"line":10984},[107,15656,538],{"class":1147},[107,15658,15659],{"class":109,"line":10989},[107,15660,479],{"emptyLinePlaceholder":329},[107,15662,15663,15666],{"class":109,"line":11001},[107,15664,15665],{"class":1154},".ball",[107,15667,2125],{"class":1147},[107,15669,15670,15672,15674,15676],{"class":109,"line":11012},[107,15671,5058],{"class":1805},[107,15673,2133],{"class":1147},[107,15675,4909],{"class":1805},[107,15677,2141],{"class":1147},[107,15679,15680,15682,15684,15686,15688],{"class":109,"line":11017},[107,15681,5208],{"class":1805},[107,15683,2133],{"class":1147},[107,15685,2181],{"class":1805},[107,15687,1269],{"class":1199},[107,15689,2141],{"class":1147},[107,15691,15692,15694,15696,15698],{"class":109,"line":11022},[107,15693,5195],{"class":1805},[107,15695,2133],{"class":1147},[107,15697,3260],{"class":1805},[107,15699,2141],{"class":1147},[107,15701,15702,15704,15706,15708,15710],{"class":109,"line":11034},[107,15703,2976],{"class":1805},[107,15705,2133],{"class":1147},[107,15707,2136],{"class":1805},[107,15709,1269],{"class":1199},[107,15711,2141],{"class":1147},[107,15713,15714,15716,15718,15720,15722],{"class":109,"line":11045},[107,15715,4715],{"class":1805},[107,15717,2133],{"class":1147},[107,15719,2136],{"class":1805},[107,15721,1269],{"class":1199},[107,15723,2141],{"class":1147},[107,15725,15726,15728,15730,15732,15734],{"class":109,"line":11050},[107,15727,2269],{"class":1805},[107,15729,2133],{"class":1147},[107,15731,3802],{"class":1805},[107,15733,1942],{"class":1199},[107,15735,2141],{"class":1147},[107,15737,15738,15740,15742,15744],{"class":109,"line":11055},[107,15739,2283],{"class":1805},[107,15741,2133],{"class":1147},[107,15743,7117],{"class":1805},[107,15745,2141],{"class":1147},[107,15747,15748,15751,15754,15756],{"class":109,"line":11065},[107,15749,15750],{"class":1805}," will-change",[107,15752,15753],{"class":1147},": transform, ",[107,15755,13572],{"class":1805},[107,15757,2141],{"class":1147},[107,15759,15760],{"class":109,"line":11078},[107,15761,538],{"class":1147},[107,15763,15764],{"class":109,"line":11090},[107,15765,479],{"emptyLinePlaceholder":329},[107,15767,15768,15771],{"class":109,"line":11101},[107,15769,15770],{"class":1154},".note",[107,15772,2125],{"class":1147},[107,15774,15775,15777,15779,15781,15783,15785,15787],{"class":109,"line":11106},[107,15776,3628],{"class":1805},[107,15778,2133],{"class":1147},[107,15780,4292],{"class":1805},[107,15782,1269],{"class":1199},[107,15784,1861],{"class":1805},[107,15786,1861],{"class":1805},[107,15788,2141],{"class":1147},[107,15790,15792,15794,15796,15798,15800],{"class":109,"line":15791},209,[107,15793,3640],{"class":1805},[107,15795,2133],{"class":1147},[107,15797,6753],{"class":1805},[107,15799,1269],{"class":1199},[107,15801,2141],{"class":1147},[107,15803,15805,15807,15809,15812],{"class":109,"line":15804},210,[107,15806,3668],{"class":1805},[107,15808,2133],{"class":1147},[107,15810,15811],{"class":1805},"#94a3b8",[107,15813,2141],{"class":1147},[107,15815,15817],{"class":109,"line":15816},211,[107,15818,538],{"class":1147},[107,15820,15822],{"class":109,"line":15821},212,[107,15823,479],{"emptyLinePlaceholder":329},[107,15825,15827,15830],{"class":109,"line":15826},213,[107,15828,15829],{"class":1154},".actions",[107,15831,2125],{"class":1147},[107,15833,15835,15837,15839,15841],{"class":109,"line":15834},214,[107,15836,2782],{"class":1805},[107,15838,2133],{"class":1147},[107,15840,4269],{"class":1805},[107,15842,2141],{"class":1147},[107,15844,15846,15848,15850,15852,15854],{"class":109,"line":15845},215,[107,15847,4287],{"class":1805},[107,15849,2133],{"class":1147},[107,15851,4292],{"class":1805},[107,15853,1269],{"class":1199},[107,15855,2141],{"class":1147},[107,15857,15859,15862,15864,15866,15868],{"class":109,"line":15858},216,[107,15860,15861],{"class":1805}," margin-top",[107,15863,2133],{"class":1147},[107,15865,2274],{"class":1805},[107,15867,1269],{"class":1199},[107,15869,2141],{"class":1147},[107,15871,15873],{"class":109,"line":15872},217,[107,15874,538],{"class":1147},[107,15876,15878],{"class":109,"line":15877},218,[107,15879,479],{"emptyLinePlaceholder":329},[107,15881,15883,15885],{"class":109,"line":15882},219,[107,15884,11608],{"class":1154},[107,15886,2125],{"class":1147},[107,15888,15890,15892,15894,15896,15898,15900,15902],{"class":109,"line":15889},220,[107,15891,2232],{"class":1805},[107,15893,2133],{"class":1147},[107,15895,4292],{"class":1805},[107,15897,1269],{"class":1199},[107,15899,3438],{"class":1805},[107,15901,1269],{"class":1199},[107,15903,2141],{"class":1147},[107,15905,15907,15909,15911,15913],{"class":109,"line":15906},221,[107,15908,2245],{"class":1805},[107,15910,2133],{"class":1147},[107,15912,5270],{"class":1805},[107,15914,2141],{"class":1147},[107,15916,15918,15920,15922,15924,15926],{"class":109,"line":15917},222,[107,15919,2269],{"class":1805},[107,15921,2133],{"class":1147},[107,15923,4292],{"class":1805},[107,15925,1269],{"class":1199},[107,15927,2141],{"class":1147},[107,15929,15931,15933,15935,15937],{"class":109,"line":15930},223,[107,15932,2283],{"class":1805},[107,15934,2133],{"class":1147},[107,15936,7117],{"class":1805},[107,15938,2141],{"class":1147},[107,15940,15942,15944,15946,15948],{"class":109,"line":15941},224,[107,15943,3668],{"class":1805},[107,15945,2133],{"class":1147},[107,15947,6837],{"class":1805},[107,15949,2141],{"class":1147},[107,15951,15953,15955,15957,15959],{"class":109,"line":15952},225,[107,15954,7136],{"class":1805},[107,15956,2133],{"class":1147},[107,15958,7141],{"class":1805},[107,15960,2141],{"class":1147},[107,15962,15964,15966,15968,15970],{"class":109,"line":15963},226,[107,15965,3046],{"class":1805},[107,15967,2133],{"class":1147},[107,15969,3051],{"class":1805},[107,15971,2141],{"class":1147},[107,15973,15975,15977,15979,15981,15983],{"class":109,"line":15974},227,[107,15976,3640],{"class":1805},[107,15978,2133],{"class":1147},[107,15980,10883],{"class":1805},[107,15982,1269],{"class":1199},[107,15984,2141],{"class":1147},[107,15986,15988],{"class":109,"line":15987},228,[107,15989,538],{"class":1147},[107,15991,15993],{"class":109,"line":15992},229,[107,15994,479],{"emptyLinePlaceholder":329},[107,15996,15998,16001],{"class":109,"line":15997},230,[107,15999,16000],{"class":1154},".btn.active",[107,16002,2125],{"class":1147},[107,16004,16006,16008,16010,16013],{"class":109,"line":16005},231,[107,16007,2283],{"class":1805},[107,16009,2133],{"class":1147},[107,16011,16012],{"class":1805},"#4f46e5",[107,16014,2141],{"class":1147},[107,16016,16018],{"class":109,"line":16017},232,[107,16019,538],{"class":1147},[107,16021,16023],{"class":109,"line":16022},233,[107,16024,479],{"emptyLinePlaceholder":329},[107,16026,16028,16031],{"class":109,"line":16027},234,[107,16029,16030],{"class":1154},".btn.ghost",[107,16032,2125],{"class":1147},[107,16034,16036,16038,16040,16042],{"class":109,"line":16035},235,[107,16037,2283],{"class":1805},[107,16039,2133],{"class":1147},[107,16041,9967],{"class":1805},[107,16043,2141],{"class":1147},[107,16045,16047,16049,16051,16053],{"class":109,"line":16046},236,[107,16048,3668],{"class":1805},[107,16050,2133],{"class":1147},[107,16052,10152],{"class":1805},[107,16054,2141],{"class":1147},[107,16056,16058],{"class":109,"line":16057},237,[107,16059,538],{"class":1147},[107,16061,16063,16065,16067],{"class":109,"line":16062},238,[107,16064,1207],{"class":1147},[107,16066,311],{"class":1151},[107,16068,1170],{"class":1147},[37,16070,274],{"id":274},[760,16072,16073,16081,16086],{},[387,16074,16075,16077,16078,309],{},[24,16076,13499],{}," = 重算布局树，代价高；浏览器会批量，但 ",[24,16079,16080],{},"读布局属性会强制同步",[387,16082,16083,16085],{},[24,16084,13463],{}," = 重算绘制及之后；reflow 必然连带 repaint。",[387,16087,16088,16090,16091,16093,16094,1357,16096,309],{},[24,16089,1437],{}," 主要在合成阶段完成，适合做位移、旋转、缩放动画；位移动画优先 ",[19,16092,1437],{},"，慎用 ",[19,16095,13569],{},[19,16097,13572],{},[311,16099,16100],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":85,"searchDepth":122,"depth":122,"links":16102},[16103,16107,16108,16109],{"id":13318,"depth":116,"text":13319,"children":16104},[16105,16106],{"id":13334,"depth":122,"text":13334},{"id":13350,"depth":122,"text":13351},{"id":13439,"depth":116,"text":13440},{"id":13527,"depth":116,"text":13528},{"id":274,"depth":116,"text":274},"2026-06-26","回流与重绘分别对应布局树与绘制指令的重新计算，以及为何 transform 动画大多不拖累渲染主线程。",{},{"title":13292,"description":16111},"blog\u002Freflow-repaint-transform",[1674,1675,16116],"performance","9qGt4nC5IYw-1z--ZpE9qqITwfWBE18SKN7ZWLP5isc",{"id":16119,"title":308,"body":16120,"category":323,"date":16480,"description":16481,"draft":326,"extension":327,"meta":16482,"navigation":329,"path":307,"seo":16483,"stem":16484,"tags":16485,"__hash__":16488},"blog\u002Fblog\u002Fweb-piano.md",{"type":8,"value":16121,"toc":16470},[16122,16125,16143,16145,16149,16159,16323,16327,16337,16343,16362,16366,16377,16381,16437,16444,16446,16455,16458,16460,16467],[11,16123,308],{"id":16124},"网页钢琴与-web-audio-合成",[15,16126,16127,16128,16131,16132,16134,16135,16138,16139,16142],{},"Web Audio 不只能分析已有音频——用 ",[24,16129,16130],{},"振荡器（Oscillator）"," 也能从零合成声音。下面 demo 实现了一个 3 个八度的网页钢琴：按住琴键持续发声，松手渐弱；空格键控制延音踏板；还可点击内置乐谱自动演奏。若你读过 ",[264,16133,6],{"href":330},"，那篇讲的是 ",[24,16136,16137],{},"AnalyserNode 分析播放","，本篇则走 ",[24,16140,16141],{},"合成发声"," 路线。",[37,16144,39],{"id":39},[63,16146,16148],{"id":16147},"_1-音高音符名-频率","1. 音高：音符名 → 频率",[15,16150,16151,16152,1027,16155,16158],{},"每个琴键对应如 ",[19,16153,16154],{},"C4",[19,16156,16157],{},"F#5"," 的音符名。通过 MIDI 公式换算频率（A4 = 440Hz）：",[77,16160,16162],{"className":101,"code":16161,"language":103,"meta":85,"style":85},"function noteToFreq(note) {\n const match = note.match(\u002F^([A-G]#?)(\\d)$\u002F)\n const [, name, octaveStr] = match\n const midi = (Number(octaveStr) + 1) * 12 + NOTE_INDEX[name]\n return 440 * Math.pow(2, (midi - 69) \u002F 12)\n}\n",[19,16163,16164,16178,16228,16251,16285,16319],{"__ignoreMap":85},[107,16165,16166,16168,16171,16173,16176],{"class":109,"line":110},[107,16167,1760],{"class":1199},[107,16169,16170],{"class":1154}," noteToFreq",[107,16172,1190],{"class":1147},[107,16174,16175],{"class":1768},"note",[107,16177,1772],{"class":1147},[107,16179,16180,16182,16185,16187,16190,16193,16195,16197,16200,16203,16206,16209,16212,16215,16218,16221,16224,16226],{"class":109,"line":116},[107,16181,12345],{"class":1199},[107,16183,16184],{"class":1805}," match",[107,16186,4121],{"class":1199},[107,16188,16189],{"class":1147}," note.",[107,16191,16192],{"class":1154},"match",[107,16194,1190],{"class":1147},[107,16196,1962],{"class":1161},[107,16198,16199],{"class":1199},"^",[107,16201,1190],{"class":16202},"sA_wV",[107,16204,16205],{"class":1805},"[A-G]",[107,16207,16208],{"class":16202},"#",[107,16210,16211],{"class":1199},"?",[107,16213,16214],{"class":16202},")(",[107,16216,16217],{"class":1805},"\\d",[107,16219,16220],{"class":16202},")",[107,16222,16223],{"class":1199},"$",[107,16225,1962],{"class":1161},[107,16227,2478],{"class":1147},[107,16229,16230,16232,16235,16238,16240,16243,16246,16248],{"class":109,"line":122},[107,16231,12345],{"class":1199},[107,16233,16234],{"class":1147}," [, ",[107,16236,16237],{"class":1805},"name",[107,16239,2299],{"class":1147},[107,16241,16242],{"class":1805},"octaveStr",[107,16244,16245],{"class":1147},"] ",[107,16247,1158],{"class":1199},[107,16249,16250],{"class":1147}," match\n",[107,16252,16253,16255,16258,16260,16262,16264,16267,16269,16271,16273,16275,16277,16279,16282],{"class":109,"line":128},[107,16254,12345],{"class":1199},[107,16256,16257],{"class":1805}," midi",[107,16259,4121],{"class":1199},[107,16261,8345],{"class":1147},[107,16263,351],{"class":1154},[107,16265,16266],{"class":1147},"(octaveStr) ",[107,16268,367],{"class":1199},[107,16270,1957],{"class":1805},[107,16272,1939],{"class":1147},[107,16274,1928],{"class":1199},[107,16276,3332],{"class":1805},[107,16278,1934],{"class":1199},[107,16280,16281],{"class":1805}," NOTE_INDEX",[107,16283,16284],{"class":1147},"[name]\n",[107,16286,16287,16289,16292,16294,16296,16299,16301,16303,16306,16308,16311,16313,16315,16317],{"class":109,"line":134},[107,16288,1875],{"class":1199},[107,16290,16291],{"class":1805}," 440",[107,16293,1820],{"class":1199},[107,16295,1815],{"class":1147},[107,16297,16298],{"class":1154},"pow",[107,16300,1190],{"class":1147},[107,16302,2221],{"class":1805},[107,16304,16305],{"class":1147},", (midi ",[107,16307,1954],{"class":1199},[107,16309,16310],{"class":1805}," 69",[107,16312,1939],{"class":1147},[107,16314,1962],{"class":1199},[107,16316,3332],{"class":1805},[107,16318,2478],{"class":1147},[107,16320,16321],{"class":109,"line":140},[107,16322,538],{"class":1147},[63,16324,16326],{"id":16325},"_2-发声振荡器-adsr-包络","2. 发声：振荡器 + ADSR 包络",[15,16328,16329,16330,16333,16334,738],{},"每次按键创建一个 ",[19,16331,16332],{},"OscillatorNode","（三角波）和 ",[19,16335,16336],{},"GainNode",[77,16338,16341],{"className":16339,"code":16340,"language":82},[80],"Oscillator → GainNode → destination\n",[19,16342,16340],{"__ignoreMap":85},[15,16344,16345,16346,16349,16350,16353,16354,16357,16358,16361],{},"按下时 ",[19,16347,16348],{},"gain"," 从极小值指数爬升到 ",[19,16351,16352],{},"PEAK_GAIN","（attack ≈ 20ms）；松手时指数衰减到 0 再 ",[19,16355,16356],{},"stop"," 振荡器。多音同奏用 ",[19,16359,16360],{},"Map\u003Cnote, voice>"," 管理，每个音符独立一条链路。",[63,16363,16365],{"id":16364},"_3-延音踏板","3. 延音踏板",[15,16367,16368,16369,16372,16373,16376],{},"踩下踏板（空格或点击踏板按钮）时，松开的键不会立刻 ",[19,16370,16371],{},"releaseVoice","，声音会保持到抬踏板。抬踏板后，所有 ",[19,16374,16375],{},"keyHeld === false"," 的 voice 才进入释放包络。",[63,16378,16380],{"id":16379},"_4-三路输入","4. 三路输入",[173,16382,16383,16392],{},[176,16384,16385],{},[179,16386,16387,16389],{},[182,16388,863],{},[182,16390,16391],{},"处理方式",[192,16393,16394,16414,16425],{},[179,16395,16396,16399],{},[197,16397,16398],{},"鼠标 \u002F 触摸",[197,16400,16401,16404,16405,1612,16408,661,16411],{},[19,16402,16403],{},"pointerdown"," 捕获 → ",[19,16406,16407],{},"pressNote",[19,16409,16410],{},"pointerup",[19,16412,16413],{},"releaseNote",[179,16415,16416,16419],{},[197,16417,16418],{},"物理键盘",[197,16420,16421,16424],{},[19,16422,16423],{},"KEY_MAP"," 映射 QWERTY 键到音符",[179,16426,16427,16430],{},[197,16428,16429],{},"内置乐谱",[197,16431,16432,16433,16436],{},"按 BPM 计算节拍时长，",[19,16434,16435],{},"playNoteTimed"," 定时发声",[15,16438,16439,16440,16443],{},"乐谱播放用 ",[19,16441,16442],{},"playToken"," 取消机制：切换曲目或点停止时递增 token，异步循环检测到 token 变化即退出。",[37,16445,256],{"id":256},[15,16447,16448,16449,16451,16452,309],{},"点击或键盘演奏（需用户手势后 ",[19,16450,74],{}," 才会 resume）。也可 ",[264,16453,267],{"href":16454},"\u002Fdemos\u002Fweb-piano",[16456,16457],"web-piano-demo",{},[37,16459,274],{"id":274},[15,16461,16462,16463,16466],{},"网页钢琴的核心是 ",[24,16464,16465],{},"振荡器合成 + 包络塑形 + 多 voice 管理","。和音乐可视化的 AnalyserNode 不同，这里完全在「生成」声音。真实钢琴音色需要更复杂的采样或物理建模，但三角波 + 简单 ADSR 已足够演示 Web Audio 的合成路径。想继续深入，可以试试换波形、加滤波器，或接入 SoundFont 采样。",[311,16468,16469],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":85,"searchDepth":122,"depth":122,"links":16471},[16472,16478,16479],{"id":39,"depth":116,"text":39,"children":16473},[16474,16475,16476,16477],{"id":16147,"depth":122,"text":16148},{"id":16325,"depth":122,"text":16326},{"id":16364,"depth":122,"text":16365},{"id":16379,"depth":122,"text":16380},{"id":256,"depth":116,"text":256},{"id":274,"depth":116,"text":274},"2026-06-20","用振荡器与 GainNode 包络合成钢琴音，支持键盘演奏、延音踏板与内置乐谱自动播放。",{},{"title":308,"description":16481},"blog\u002Fweb-piano",[334,16486,16487],"piano","synthesis","X7pBoWNSCuyPLsw20K-xCjEh7X0xvqwlB3lQ2I-Xk4o",0,1782309644790]