[{"data":1,"prerenderedAt":16489},["ShallowReactive",2],{"blog-articles":3},[4,1451,2397,5525,6360,7621,8007,8261,8603,8890,11280,14192,14627,15228],{"id":5,"title":6,"body":7,"category":175,"date":1438,"description":1439,"draft":1440,"extension":1441,"meta":1442,"navigation":241,"path":1443,"seo":1444,"stem":1445,"tags":1446,"__hash__":1450},"blog\u002Fblog\u002Fcss-containing-block.md","你不知道的 CSS 之包含块",{"type":8,"value":9,"toc":1428},"minimark",[10,14,36,43,58,64,77,82,171,296,314,320,326,329,341,361,365,437,442,528,755,772,778,782,792,834,843,880,888,894,903,909,912,1117,1120,1175,1194,1197,1247,1261,1285,1291,1341,1365,1373,1379,1382,1424],[11,12,6],"h1",{"id":13},"你不知道的-css-之包含块",[15,16,17,18,22,23,27,28,31,32,35],"p",{},"盒模型、",[19,20,21],"code",{},"border-box"," 很多人熟，但 ",[24,25,26],"strong",{},"包含块（containing block）"," 一听就懵——它平时「看不见」，却决定 ",[19,29,30],{},"width: 50%","、",[19,33,34],{},"left: 10px"," 相对谁算。",[15,37,38],{},[39,40],"img",{"alt":41,"src":42},"包含块决定元素的尺寸与百分比参照区域","\u002Fdemos\u002Fcontaining-block\u002Fconcept.svg",[15,44,45,46,49,50,57],{},"简单说：",[24,47,48],{},"元素的尺寸与位置（以及百分比值的计算）受包含块影响。"," 规范见 ",[51,52,56],"a",{"href":53,"rel":54},"https:\u002F\u002Fdrafts.csswg.org\u002Fcss2\u002F#containing-block-details",[55],"nofollow","CSS2 containing block","。",[15,59,60],{},[39,61],{"alt":62,"src":63},"不同定位方式下的包含块规则","\u002Fdemos\u002Fcontaining-block\u002Frules-overview.svg",[15,65,66,67,71,72,76],{},"在 ",[51,68,70],{"href":69},"\u002Fblog\u002Fbrowser-rendering-pipeline","浏览器布局阶段","，几何信息就是结合 DOM、Computed Style 与包含块算出来的；",[51,73,75],{"href":74},"\u002Fblog\u002Fcss-property-calculation","样式计算"," 里算不定的百分比宽高，到这一步才定稿。",[78,79,81],"h2",{"id":80},"最简例子50-相对谁","最简例子：50% 相对谁？",[83,84,89],"pre",{"className":85,"code":86,"language":87,"meta":88,"style":88},"language-html shiki shiki-themes github-light github-dark","\u003Cbody>\n  \u003Cdiv class=\"container\">\n    \u003Cdiv class=\"item\">\u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n","html","",[19,90,91,107,129,151,161],{"__ignoreMap":88},[92,93,96,100,104],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"sVt8B","\u003C",[92,101,103],{"class":102},"s9eBZ","body",[92,105,106],{"class":98},">\n",[92,108,110,113,116,120,123,127],{"class":94,"line":109},2,[92,111,112],{"class":98},"  \u003C",[92,114,115],{"class":102},"div",[92,117,119],{"class":118},"sScJk"," class",[92,121,122],{"class":98},"=",[92,124,126],{"class":125},"sZZnC","\"container\"",[92,128,106],{"class":98},[92,130,132,135,137,139,141,144,147,149],{"class":94,"line":131},3,[92,133,134],{"class":98},"    \u003C",[92,136,115],{"class":102},[92,138,119],{"class":118},[92,140,122],{"class":98},[92,142,143],{"class":125},"\"item\"",[92,145,146],{"class":98},">\u003C\u002F",[92,148,115],{"class":102},[92,150,106],{"class":98},[92,152,154,157,159],{"class":94,"line":153},4,[92,155,156],{"class":98},"  \u003C\u002F",[92,158,115],{"class":102},[92,160,106],{"class":98},[92,162,164,167,169],{"class":94,"line":163},5,[92,165,166],{"class":98},"\u003C\u002F",[92,168,103],{"class":102},[92,170,106],{"class":98},[83,172,176],{"className":173,"code":174,"language":175,"meta":88,"style":88},"language-css shiki shiki-themes github-light github-dark",".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","css",[19,177,178,186,205,219,231,236,243,251,266,279,291],{"__ignoreMap":88},[92,179,180,183],{"class":94,"line":95},[92,181,182],{"class":118},".container",[92,184,185],{"class":98}," {\n",[92,187,188,192,195,198,202],{"class":94,"line":109},[92,189,191],{"class":190},"sj4cs","  width",[92,193,194],{"class":98},": ",[92,196,197],{"class":190},"500",[92,199,201],{"class":200},"szBVR","px",[92,203,204],{"class":98},";\n",[92,206,207,210,212,215,217],{"class":94,"line":131},[92,208,209],{"class":190},"  height",[92,211,194],{"class":98},[92,213,214],{"class":190},"300",[92,216,201],{"class":200},[92,218,204],{"class":98},[92,220,221,224,226,229],{"class":94,"line":153},[92,222,223],{"class":190},"  background-color",[92,225,194],{"class":98},[92,227,228],{"class":190},"skyblue",[92,230,204],{"class":98},[92,232,233],{"class":94,"line":163},[92,234,235],{"class":98},"}\n",[92,237,239],{"class":94,"line":238},6,[92,240,242],{"emptyLinePlaceholder":241},true,"\n",[92,244,246,249],{"class":94,"line":245},7,[92,247,248],{"class":118},".item",[92,250,185],{"class":98},[92,252,254,256,258,261,264],{"class":94,"line":253},8,[92,255,191],{"class":190},[92,257,194],{"class":98},[92,259,260],{"class":190},"50",[92,262,263],{"class":200},"%",[92,265,204],{"class":98},[92,267,269,271,273,275,277],{"class":94,"line":268},9,[92,270,209],{"class":190},[92,272,194],{"class":98},[92,274,260],{"class":190},[92,276,263],{"class":200},[92,278,204],{"class":98},[92,280,282,284,286,289],{"class":94,"line":281},10,[92,283,223],{"class":190},[92,285,194],{"class":98},[92,287,288],{"class":190},"red",[92,290,204],{"class":98},[92,292,294],{"class":94,"line":293},11,[92,295,235],{"class":98},[15,297,298,301,302,305,306,309,310,313],{},[19,299,300],{},"item"," 是 250×150？对。但更准确的说法是：",[24,303,304],{},"百分比相对包含块","。这里包含块是最近祖先块容器的 ",[24,307,308],{},"内容区（content box）","——即 ",[19,311,312],{},"container"," 的内容区 500×300，50% 才是 250×150。",[15,315,316],{},[39,317],{"alt":318,"src":319},"50% 相对 container 内容区，结果为 250×150","\u002Fdemos\u002Fcontaining-block\u002Fpercent-demo.svg",[15,321,322,323,57],{},"平时说「相对父元素宽高」多半没错，但严谨表述是 ",[24,324,325],{},"相对包含块",[78,327,328],{"id":328},"初始包含块",[15,330,331,336,337,340],{},[24,332,333,334],{},"根元素 ",[19,335,87],{}," 的包含块叫 ",[24,338,339],{},"初始包含块（initial containing block）","：",[342,343,344,351,354],"ul",{},[345,346,347,348],"li",{},"大小通常等于 ",[24,349,350],{},"视口（viewport）",[345,352,353],{},"原点在视口左上角",[345,355,356,357,360],{},"是 ",[24,358,359],{},"绝对定位、固定定位"," 的重要参照",[78,362,364],{"id":363},"非根元素怎么找包含块","非根元素：怎么找包含块？",[366,367,368,383],"table",{},[369,370,371],"thead",{},[372,373,374,380],"tr",{},[375,376,377],"th",{},[19,378,379],{},"position",[375,381,382],{},"包含块由谁建立",[384,385,386,409,419],"tbody",{},[372,387,388,398],{},[389,390,391,394,395],"td",{},[19,392,393],{},"static"," \u002F ",[19,396,397],{},"relative",[389,399,400,401,404,405,408],{},"最近 ",[24,402,403],{},"块容器"," 的 ",[24,406,407],{},"内容区"," 边缘",[372,410,411,416],{},[389,412,413],{},[19,414,415],{},"fixed",[389,417,418],{},"视口（初始包含块）",[372,420,421,426],{},[389,422,423],{},[19,424,425],{},"absolute",[389,427,400,428,430,431,433,434,408],{},[19,429,379],{}," 不为 ",[19,432,393],{}," 的祖先的 ",[24,435,436],{},"padding 区",[438,439,441],"h3",{"id":440},"absolute-不看父元素看定位祖先","absolute 不看「父元素」，看「定位祖先」",[83,443,445],{"className":85,"code":444,"language":87,"meta":88,"style":88},"\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,446,447,455,469,483,503,512,520],{"__ignoreMap":88},[92,448,449,451,453],{"class":94,"line":95},[92,450,99],{"class":98},[92,452,103],{"class":102},[92,454,106],{"class":98},[92,456,457,459,461,463,465,467],{"class":94,"line":109},[92,458,112],{"class":98},[92,460,115],{"class":102},[92,462,119],{"class":118},[92,464,122],{"class":98},[92,466,126],{"class":125},[92,468,106],{"class":98},[92,470,471,473,475,477,479,481],{"class":94,"line":131},[92,472,134],{"class":98},[92,474,115],{"class":102},[92,476,119],{"class":118},[92,478,122],{"class":98},[92,480,143],{"class":125},[92,482,106],{"class":98},[92,484,485,488,490,492,494,497,499,501],{"class":94,"line":153},[92,486,487],{"class":98},"      \u003C",[92,489,115],{"class":102},[92,491,119],{"class":118},[92,493,122],{"class":98},[92,495,496],{"class":125},"\"item2\"",[92,498,146],{"class":98},[92,500,115],{"class":102},[92,502,106],{"class":98},[92,504,505,508,510],{"class":94,"line":163},[92,506,507],{"class":98},"    \u003C\u002F",[92,509,115],{"class":102},[92,511,106],{"class":98},[92,513,514,516,518],{"class":94,"line":238},[92,515,156],{"class":98},[92,517,115],{"class":102},[92,519,106],{"class":98},[92,521,522,524,526],{"class":94,"line":245},[92,523,166],{"class":98},[92,525,103],{"class":102},[92,527,106],{"class":98},[83,529,531],{"className":173,"code":530,"language":175,"meta":88,"style":88},".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,532,533,539,551,563,573,584,588,592,598,610,623,640,655,660,665,673,686,699,710,721,736,750],{"__ignoreMap":88},[92,534,535,537],{"class":94,"line":95},[92,536,182],{"class":118},[92,538,185],{"class":98},[92,540,541,543,545,547,549],{"class":94,"line":109},[92,542,191],{"class":190},[92,544,194],{"class":98},[92,546,197],{"class":190},[92,548,201],{"class":200},[92,550,204],{"class":98},[92,552,553,555,557,559,561],{"class":94,"line":131},[92,554,209],{"class":190},[92,556,194],{"class":98},[92,558,214],{"class":190},[92,560,201],{"class":200},[92,562,204],{"class":98},[92,564,565,567,569,571],{"class":94,"line":153},[92,566,223],{"class":190},[92,568,194],{"class":98},[92,570,228],{"class":190},[92,572,204],{"class":98},[92,574,575,578,580,582],{"class":94,"line":163},[92,576,577],{"class":190},"  position",[92,579,194],{"class":98},[92,581,397],{"class":190},[92,583,204],{"class":98},[92,585,586],{"class":94,"line":238},[92,587,235],{"class":98},[92,589,590],{"class":94,"line":245},[92,591,242],{"emptyLinePlaceholder":241},[92,593,594,596],{"class":94,"line":253},[92,595,248],{"class":118},[92,597,185],{"class":98},[92,599,600,602,604,606,608],{"class":94,"line":268},[92,601,191],{"class":190},[92,603,194],{"class":98},[92,605,214],{"class":190},[92,607,201],{"class":200},[92,609,204],{"class":98},[92,611,612,614,616,619,621],{"class":94,"line":281},[92,613,209],{"class":190},[92,615,194],{"class":98},[92,617,618],{"class":190},"150",[92,620,201],{"class":200},[92,622,204],{"class":98},[92,624,625,628,630,633,635,638],{"class":94,"line":293},[92,626,627],{"class":190},"  border",[92,629,194],{"class":98},[92,631,632],{"class":190},"5",[92,634,201],{"class":200},[92,636,637],{"class":190}," solid",[92,639,204],{"class":98},[92,641,643,646,648,651,653],{"class":94,"line":642},12,[92,644,645],{"class":190},"  margin-left",[92,647,194],{"class":98},[92,649,650],{"class":190},"100",[92,652,201],{"class":200},[92,654,204],{"class":98},[92,656,658],{"class":94,"line":657},13,[92,659,235],{"class":98},[92,661,663],{"class":94,"line":662},14,[92,664,242],{"emptyLinePlaceholder":241},[92,666,668,671],{"class":94,"line":667},15,[92,669,670],{"class":118},".item2",[92,672,185],{"class":98},[92,674,676,678,680,682,684],{"class":94,"line":675},16,[92,677,191],{"class":190},[92,679,194],{"class":98},[92,681,650],{"class":190},[92,683,201],{"class":200},[92,685,204],{"class":98},[92,687,689,691,693,695,697],{"class":94,"line":688},17,[92,690,209],{"class":190},[92,692,194],{"class":98},[92,694,650],{"class":190},[92,696,201],{"class":200},[92,698,204],{"class":98},[92,700,702,704,706,708],{"class":94,"line":701},18,[92,703,223],{"class":190},[92,705,194],{"class":98},[92,707,288],{"class":190},[92,709,204],{"class":98},[92,711,713,715,717,719],{"class":94,"line":712},19,[92,714,577],{"class":190},[92,716,194],{"class":98},[92,718,425],{"class":190},[92,720,204],{"class":98},[92,722,724,727,729,732,734],{"class":94,"line":723},20,[92,725,726],{"class":190},"  left",[92,728,194],{"class":98},[92,730,731],{"class":190},"10",[92,733,201],{"class":200},[92,735,204],{"class":98},[92,737,739,742,744,746,748],{"class":94,"line":738},21,[92,740,741],{"class":190},"  top",[92,743,194],{"class":98},[92,745,731],{"class":190},[92,747,201],{"class":200},[92,749,204],{"class":98},[92,751,753],{"class":94,"line":752},22,[92,754,235],{"class":98},[15,756,757,760,761,765,766,769,770,340],{},[19,758,759],{},"item2"," 的包含块是 ",[24,762,763],{},[19,764,312],{},"（有 ",[19,767,768],{},"position: relative","），不是中间的 ",[19,771,300],{},[15,773,774],{},[39,775],{"alt":776,"src":777},"item2 的包含块是 container，而非中间的 item","\u002Fdemos\u002Fcontaining-block\u002Fabsolute-demo.svg",[438,779,781],{"id":780},"transform-也会建立包含块","transform 也会建立包含块",[15,783,784,394,786,788,789,340],{},[19,785,425],{},[19,787,415],{}," 的包含块还可能是满足下列条件的 ",[24,790,791],{},"最近祖先的 padding 区",[342,793,794,806,817,829],{},[345,795,796,394,799,802,803],{},[19,797,798],{},"transform",[19,800,801],{},"perspective"," 不是 ",[19,804,805],{},"none",[345,807,808,811,812,814,815],{},[19,809,810],{},"will-change"," 为 ",[19,813,798],{}," 或 ",[19,816,801],{},[345,818,819,802,822,824,825,828],{},[19,820,821],{},"filter",[19,823,805],{},"（或 Firefox 下 ",[19,826,827],{},"will-change: filter","）",[345,830,831],{},[19,832,833],{},"contain: paint",[15,835,836,837,839,840,340],{},"给 ",[19,838,300],{}," 加上 ",[19,841,842],{},"transform: rotate(0deg)",[83,844,846],{"className":173,"code":845,"language":175,"meta":88,"style":88},".item {\n  transform: rotate(0deg);\n}\n",[19,847,848,854,876],{"__ignoreMap":88},[92,849,850,852],{"class":94,"line":95},[92,851,248],{"class":118},[92,853,185],{"class":98},[92,855,856,859,861,864,867,870,873],{"class":94,"line":109},[92,857,858],{"class":190},"  transform",[92,860,194],{"class":98},[92,862,863],{"class":190},"rotate",[92,865,866],{"class":98},"(",[92,868,869],{"class":190},"0",[92,871,872],{"class":200},"deg",[92,874,875],{"class":98},");\n",[92,877,878],{"class":94,"line":131},[92,879,235],{"class":98},[15,881,882,883,887],{},"包含块变为 ",[24,884,885],{},[19,886,300],{}," 自身：",[15,889,890],{},[39,891],{"alt":892,"src":893},"transform 在 item 上建立新的包含块","\u002Fdemos\u002Fcontaining-block\u002Ftransform-demo.svg",[15,895,896,897,899,900,57],{},"这也是 ",[19,898,798],{}," 常和层叠、合成一起讨论的原因——不仅影响包含块，还影响 ",[51,901,902],{"href":69},"分层与绘制",[15,904,905],{},[39,906],{"alt":907,"src":908},"包含块知识要点一览","\u002Fdemos\u002Fcontaining-block\u002Fsummary-map.svg",[78,910,911],{"id":911},"规范例题",[83,913,915],{"className":85,"code":914,"language":87,"meta":88,"style":88},"\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,916,917,925,934,948,956,972,987,1007,1022,1027,1044,1049,1070,1075,1084,1093,1101,1109],{"__ignoreMap":88},[92,918,919,921,923],{"class":94,"line":95},[92,920,99],{"class":98},[92,922,87],{"class":102},[92,924,106],{"class":98},[92,926,927,929,932],{"class":94,"line":109},[92,928,112],{"class":98},[92,930,931],{"class":102},"head",[92,933,106],{"class":98},[92,935,936,938,941,944,946],{"class":94,"line":131},[92,937,134],{"class":98},[92,939,940],{"class":102},"title",[92,942,943],{"class":98},">Illustration of containing blocks\u003C\u002F",[92,945,940],{"class":102},[92,947,106],{"class":98},[92,949,950,952,954],{"class":94,"line":153},[92,951,156],{"class":98},[92,953,931],{"class":102},[92,955,106],{"class":98},[92,957,958,960,962,965,967,970],{"class":94,"line":163},[92,959,112],{"class":98},[92,961,103],{"class":102},[92,963,964],{"class":118}," id",[92,966,122],{"class":98},[92,968,969],{"class":125},"\"body\"",[92,971,106],{"class":98},[92,973,974,976,978,980,982,985],{"class":94,"line":238},[92,975,134],{"class":98},[92,977,115],{"class":102},[92,979,964],{"class":118},[92,981,122],{"class":98},[92,983,984],{"class":125},"\"div1\"",[92,986,106],{"class":98},[92,988,989,991,993,995,997,1000,1003,1005],{"class":94,"line":245},[92,990,487],{"class":98},[92,992,15],{"class":102},[92,994,964],{"class":118},[92,996,122],{"class":98},[92,998,999],{"class":125},"\"p1\"",[92,1001,1002],{"class":98},">This is text in the first paragraph...\u003C\u002F",[92,1004,15],{"class":102},[92,1006,106],{"class":98},[92,1008,1009,1011,1013,1015,1017,1020],{"class":94,"line":253},[92,1010,487],{"class":98},[92,1012,15],{"class":102},[92,1014,964],{"class":118},[92,1016,122],{"class":98},[92,1018,1019],{"class":125},"\"p2\"",[92,1021,106],{"class":98},[92,1023,1024],{"class":94,"line":268},[92,1025,1026],{"class":98},"        This is text\n",[92,1028,1029,1032,1035,1037,1039,1042],{"class":94,"line":281},[92,1030,1031],{"class":98},"        \u003C",[92,1033,1034],{"class":102},"em",[92,1036,964],{"class":118},[92,1038,122],{"class":98},[92,1040,1041],{"class":125},"\"em1\"",[92,1043,106],{"class":98},[92,1045,1046],{"class":94,"line":293},[92,1047,1048],{"class":98},"          in the\n",[92,1050,1051,1054,1056,1058,1060,1063,1066,1068],{"class":94,"line":642},[92,1052,1053],{"class":98},"          \u003C",[92,1055,24],{"class":102},[92,1057,964],{"class":118},[92,1059,122],{"class":98},[92,1061,1062],{"class":125},"\"strong1\"",[92,1064,1065],{"class":98},">second\u003C\u002F",[92,1067,24],{"class":102},[92,1069,106],{"class":98},[92,1071,1072],{"class":94,"line":657},[92,1073,1074],{"class":98},"          paragraph.\n",[92,1076,1077,1080,1082],{"class":94,"line":662},[92,1078,1079],{"class":98},"        \u003C\u002F",[92,1081,1034],{"class":102},[92,1083,106],{"class":98},[92,1085,1086,1089,1091],{"class":94,"line":667},[92,1087,1088],{"class":98},"      \u003C\u002F",[92,1090,15],{"class":102},[92,1092,106],{"class":98},[92,1094,1095,1097,1099],{"class":94,"line":675},[92,1096,507],{"class":98},[92,1098,115],{"class":102},[92,1100,106],{"class":98},[92,1102,1103,1105,1107],{"class":94,"line":688},[92,1104,156],{"class":98},[92,1106,103],{"class":102},[92,1108,106],{"class":98},[92,1110,1111,1113,1115],{"class":94,"line":701},[92,1112,166],{"class":98},[92,1114,87],{"class":102},[92,1116,106],{"class":98},[15,1118,1119],{},"无额外 CSS 时：",[366,1121,1122,1132],{},[369,1123,1124],{},[372,1125,1126,1129],{},[375,1127,1128],{},"元素",[375,1130,1131],{},"包含块",[384,1133,1134,1140,1146,1153,1160,1168],{},[372,1135,1136,1138],{},[389,1137,87],{},[389,1139,328],{},[372,1141,1142,1144],{},[389,1143,103],{},[389,1145,87],{},[372,1147,1148,1151],{},[389,1149,1150],{},"div1",[389,1152,103],{},[372,1154,1155,1158],{},[389,1156,1157],{},"p1、p2",[389,1159,1150],{},[372,1161,1162,1165],{},[389,1163,1164],{},"em1",[389,1166,1167],{},"p2",[372,1169,1170,1173],{},[389,1171,1172],{},"strong1",[389,1174,1167],{},[15,1176,1177,760,1179,1181,1182,1184,1185,802,1187,1189,1190,1193],{},[19,1178,1172],{},[19,1180,1167],{}," 而非 ",[19,1183,1164],{},"，因为 ",[19,1186,1164],{},[24,1188,403],{},"；规则要求 ",[24,1191,1192],{},"最近的块容器"," 的内容区。",[15,1195,1196],{},"加上：",[83,1198,1200],{"className":173,"code":1199,"language":175,"meta":88,"style":88},"#div1 {\n  position: absolute;\n  left: 50px;\n  top: 50px;\n}\n",[19,1201,1202,1209,1219,1231,1243],{"__ignoreMap":88},[92,1203,1204,1207],{"class":94,"line":95},[92,1205,1206],{"class":118},"#div1",[92,1208,185],{"class":98},[92,1210,1211,1213,1215,1217],{"class":94,"line":109},[92,1212,577],{"class":190},[92,1214,194],{"class":98},[92,1216,425],{"class":190},[92,1218,204],{"class":98},[92,1220,1221,1223,1225,1227,1229],{"class":94,"line":131},[92,1222,726],{"class":190},[92,1224,194],{"class":98},[92,1226,260],{"class":190},[92,1228,201],{"class":200},[92,1230,204],{"class":98},[92,1232,1233,1235,1237,1239,1241],{"class":94,"line":153},[92,1234,741],{"class":190},[92,1236,194],{"class":98},[92,1238,260],{"class":190},[92,1240,201],{"class":200},[92,1242,204],{"class":98},[92,1244,1245],{"class":94,"line":163},[92,1246,235],{"class":98},[15,1248,1249,1251,1252,1254,1255,1257,1258,1260],{},[19,1250,1150],{}," 的包含块变为 ",[24,1253,328],{},"（",[19,1256,103],{}," 仍是 ",[19,1259,393],{},"，向上找不到定位祖先）：",[366,1262,1263,1271],{},[369,1264,1265],{},[372,1266,1267,1269],{},[375,1268,1128],{},[375,1270,1131],{},[384,1272,1273,1279],{},[372,1274,1275,1277],{},[389,1276,1150],{},[389,1278,328],{},[372,1280,1281,1283],{},[389,1282,1157],{},[389,1284,1150],{},[15,1286,1287,1288,1290],{},"再给 ",[19,1289,1164],{}," 定位：",[83,1292,1294],{"className":173,"code":1293,"language":175,"meta":88,"style":88},"#em1 {\n  position: absolute;\n  left: 100px;\n  top: 100px;\n}\n",[19,1295,1296,1303,1313,1325,1337],{"__ignoreMap":88},[92,1297,1298,1301],{"class":94,"line":95},[92,1299,1300],{"class":118},"#em1",[92,1302,185],{"class":98},[92,1304,1305,1307,1309,1311],{"class":94,"line":109},[92,1306,577],{"class":190},[92,1308,194],{"class":98},[92,1310,425],{"class":190},[92,1312,204],{"class":98},[92,1314,1315,1317,1319,1321,1323],{"class":94,"line":131},[92,1316,726],{"class":190},[92,1318,194],{"class":98},[92,1320,650],{"class":190},[92,1322,201],{"class":200},[92,1324,204],{"class":98},[92,1326,1327,1329,1331,1333,1335],{"class":94,"line":153},[92,1328,741],{"class":190},[92,1330,194],{"class":98},[92,1332,650],{"class":190},[92,1334,201],{"class":200},[92,1336,204],{"class":98},[92,1338,1339],{"class":94,"line":163},[92,1340,235],{"class":98},[366,1342,1343,1351],{},[369,1344,1345],{},[372,1346,1347,1349],{},[375,1348,1128],{},[375,1350,1131],{},[384,1352,1353,1359],{},[372,1354,1355,1357],{},[389,1356,1164],{},[389,1358,1150],{},[372,1360,1361,1363],{},[389,1362,1172],{},[389,1364,1164],{},[15,1366,1367,1368],{},"更多示例见 MDN：",[51,1369,1372],{"href":1370,"rel":1371},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FContaining_block",[55],"Containing block",[15,1374,1375],{},[39,1376],{"alt":1377,"src":1378},"规范例题中的 DOM 树与包含块关系","\u002Fdemos\u002Fcontaining-block\u002Fdom-tree.svg",[78,1380,1381],{"id":1381},"小结",[342,1383,1384,1389,1408,1417],{},[345,1385,1386,1388],{},[24,1387,1131],{}," 决定百分比与定位偏移的参照区域，不是笼统的「父元素」。",[345,1390,1391,1393,1394,1396,1397,1399,1400,1402,1403,1399,1405,1407],{},[19,1392,393],{},"\u002F",[19,1395,397],{}," 看最近块容器的 ",[24,1398,407],{},"；",[19,1401,425],{}," 看定位祖先的 ",[24,1404,436],{},[19,1406,415],{}," 看视口。",[345,1409,1410,1412,1413,1416],{},[19,1411,798],{}," 等属性会 ",[24,1414,1415],{},"新建包含块","，布局结果可能「突然变了」。",[345,1418,1419,1420,57],{},"布局阶段算几何信息时离不开包含块；改样式触发的 reflow 见 ",[51,1421,1423],{"href":1422},"\u002Fblog\u002Freflow-repaint-transform","reflow 与 repaint",[1425,1426,1427],"style",{},"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":88,"searchDepth":131,"depth":131,"links":1429},[1430,1431,1432,1436,1437],{"id":80,"depth":109,"text":81},{"id":328,"depth":109,"text":328},{"id":363,"depth":109,"text":364,"children":1433},[1434,1435],{"id":440,"depth":131,"text":441},{"id":780,"depth":131,"text":781},{"id":911,"depth":109,"text":911},{"id":1381,"depth":109,"text":1381},"2026-06-28","百分比宽高与绝对定位偏移到底相对谁算？搞懂 containing block 与初始包含块，布局阶段的几何信息才说得清。",false,"md",{},"\u002Fblog\u002Fcss-containing-block",{"title":6,"description":1439},"blog\u002Fcss-containing-block",[1447,1448,1449],"layout","containing-block","interview","7-rbTxShL5j-yWfKcjpRnC_JvYeoy2-lO_1z13rrAsk",{"id":1452,"title":1453,"body":1454,"category":175,"date":2388,"description":2389,"draft":1440,"extension":1441,"meta":2390,"navigation":241,"path":74,"seo":2391,"stem":2392,"tags":2393,"__hash__":2396},"blog\u002Fblog\u002Fcss-property-calculation.md","CSS 属性计算过程：从声明到最终值",{"type":8,"value":1455,"toc":2375},[1456,1459,1462,1488,1499,1505,1518,1521,1555,1568,1574,1580,1583,1589,1604,1610,1614,1620,1642,1648,1651,1655,1662,1681,1684,1687,1705,1711,1717,1754,1760,1768,1771,1777,1818,1877,1883,1889,1892,1895,1901,1954,1957,1963,1967,1978,2012,2037,2047,2053,2059,2114,2164,2176,2182,2188,2194,2198,2204,2210,2213,2219,2223,2276,2300,2306,2344,2346,2372],[11,1457,1453],{"id":1458},"css-属性计算过程从声明到最终值",[15,1460,1461],{},"写 CSS 时往往只写几行：",[83,1463,1465],{"className":173,"code":1464,"language":175,"meta":88,"style":88},"p {\n  color: red;\n}\n",[19,1466,1467,1473,1484],{"__ignoreMap":88},[92,1468,1469,1471],{"class":94,"line":95},[92,1470,15],{"class":102},[92,1472,185],{"class":98},[92,1474,1475,1478,1480,1482],{"class":94,"line":109},[92,1476,1477],{"class":190},"  color",[92,1479,194],{"class":98},[92,1481,288],{"class":190},[92,1483,204],{"class":98},[92,1485,1486],{"class":94,"line":131},[92,1487,235],{"class":98},[15,1489,1490,1491,1494,1495,1498],{},"但打开开发者工具 → 元素 → ",[24,1492,1493],{},"计算样式"," → 勾选「全部显示」，会发现每个元素都有 ",[24,1496,1497],{},"成百个属性","。它们从哪来？为什么有的没写却有值，有的写了却不是你以为的结果？",[15,1500,1501],{},[39,1502],{"alt":1503,"src":1504},"CSS 属性计算流程概览","\u002Fdemos\u002Fcss-property-calc\u002Fflow-overview.svg",[15,1506,1507,1508,1511,1512,1514,1515,1517],{},"属性值的计算大致分 ",[24,1509,1510],{},"四步","：确定声明值 → 层叠冲突 → 使用继承 → 使用默认值。算完后的结果会进入渲染流水线的 ",[51,1513,75],{"href":69}," 阶段，再与 ",[51,1516,1131],{"href":1443}," 一起在布局里定稿几何尺寸。",[78,1519,1520],{"id":1520},"每个元素都有一套完整样式",[83,1522,1524],{"className":85,"code":1523,"language":87,"meta":88,"style":88},"\u003Cbody>\n  \u003Ch1>这是一个 h1 标题\u003C\u002Fh1>\n\u003C\u002Fbody>\n",[19,1525,1526,1534,1547],{"__ignoreMap":88},[92,1527,1528,1530,1532],{"class":94,"line":95},[92,1529,99],{"class":98},[92,1531,103],{"class":102},[92,1533,106],{"class":98},[92,1535,1536,1538,1540,1543,1545],{"class":94,"line":109},[92,1537,112],{"class":98},[92,1539,11],{"class":102},[92,1541,1542],{"class":98},">这是一个 h1 标题\u003C\u002F",[92,1544,11],{"class":102},[92,1546,106],{"class":98},[92,1548,1549,1551,1553],{"class":94,"line":131},[92,1550,166],{"class":98},[92,1552,103],{"class":102},[92,1554,106],{"class":98},[15,1556,1557,1558,1560,1561,1564,1565,57],{},"没给 ",[19,1559,11],{}," 写任何样式，它仍有默认字号、颜色等——因为 ",[24,1562,1563],{},"任意 HTML 元素都对应一整套 CSS 属性","；没写的，多数走继承或 ",[24,1566,1567],{},"用户代理样式表（浏览器默认样式）",[15,1569,1570],{},[39,1571],{"alt":1572,"src":1573},"未写样式时的 h1 外观","\u002Fdemos\u002Fcss-property-calc\u002Fh1-default.svg",[15,1575,1576],{},[39,1577],{"alt":1578,"src":1579},"元素上实际存在的全部属性","\u002Fdemos\u002Fcss-property-calc\u002Fall-props.svg",[15,1581,1582],{},"在计算样式里勾选全部显示即可验证：",[15,1584,1585],{},[39,1586],{"alt":1587,"src":1588},"计算样式面板","\u002Fdemos\u002Fcss-property-calc\u002Fcomputed-panel.svg",[15,1590,1591,1592,1595,1596,1599,1600,1603],{},"注意：没写 ",[24,1593,1594],{},"不等于"," 一定用默认值——中间还有 ",[24,1597,1598],{},"继承"," 和 ",[24,1601,1602],{},"层叠","，所以必须理解计算流程。",[15,1605,1606],{},[39,1607],{"alt":1608,"src":1609},"并非总是默认值","\u002Fdemos\u002Fcss-property-calc\u002Fnot-only-default.svg",[78,1611,1613],{"id":1612},"第一步确定声明值","第一步：确定声明值",[15,1615,1616,1619],{},[24,1617,1618],{},"声明值"," 就是样式表里写明的规则，包括：",[342,1621,1622,1628],{},[345,1623,1624,1627],{},[24,1625,1626],{},"作者样式表","（你写的 CSS）",[345,1629,1630,1633,1634,404,1636,31,1639,828],{},[24,1631,1632],{},"用户代理样式表","（浏览器内置，如 ",[19,1635,11],{},[19,1637,1638],{},"display",[19,1640,1641],{},"margin",[15,1643,1644],{},[39,1645],{"alt":1646,"src":1647},"作者样式与用户代理样式","\u002Fdemos\u002Fcss-property-calc\u002Fauthor-ua.svg",[15,1649,1650],{},"若声明之间无冲突，直接采用对应声明。",[78,1652,1654],{"id":1653},"第二步层叠冲突","第二步：层叠冲突",[15,1656,1657,1658,1661],{},"多条规则声明同一属性时，进入 ",[24,1659,1660],{},"层叠（Cascade）"," 解决，细分为：",[1663,1664,1665,1671,1676],"ol",{},[345,1666,1667,1668],{},"比较 ",[24,1669,1670],{},"源的重要性",[345,1672,1667,1673],{},[24,1674,1675],{},"优先级（特异性）",[345,1677,1667,1678],{},[24,1679,1680],{},"次序",[438,1682,1683],{"id":1683},"比较源的重要性",[15,1685,1686],{},"样式来源（重要性从高到低）：",[342,1688,1689,1694,1700],{},[345,1690,1691],{},[24,1692,1693],{},"页面作者样式",[345,1695,1696,1699],{},[24,1697,1698],{},"用户样式","（用户自定义）",[345,1701,1702],{},[24,1703,1704],{},"用户代理样式",[15,1706,1707],{},[39,1708],{"alt":1709,"src":1710},"样式源重要性","\u002Fdemos\u002Fcss-property-calc\u002Fsource-priority.svg",[15,1712,1713,1714,1716],{},"作者与用户代理同时声明 ",[19,1715,1638],{}," 时，作者胜出：",[83,1718,1720],{"className":173,"code":1719,"language":175,"meta":88,"style":88},"p {\n  color: red;\n  display: inline-block;\n}\n",[19,1721,1722,1728,1738,1750],{"__ignoreMap":88},[92,1723,1724,1726],{"class":94,"line":95},[92,1725,15],{"class":102},[92,1727,185],{"class":98},[92,1729,1730,1732,1734,1736],{"class":94,"line":109},[92,1731,1477],{"class":190},[92,1733,194],{"class":98},[92,1735,288],{"class":190},[92,1737,204],{"class":98},[92,1739,1740,1743,1745,1748],{"class":94,"line":131},[92,1741,1742],{"class":190},"  display",[92,1744,194],{"class":98},[92,1746,1747],{"class":190},"inline-block",[92,1749,204],{"class":98},[92,1751,1752],{"class":94,"line":153},[92,1753,235],{"class":98},[15,1755,1756],{},[39,1757],{"alt":1758,"src":1759},"display 由作者样式决定","\u002Fdemos\u002Fcss-property-calc\u002Fcascade-display.svg",[15,1761,1762,1763],{},"详见 MDN：",[51,1764,1767],{"href":1765,"rel":1766},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCascade",[55],"Cascade",[438,1769,1770],{"id":1770},"比较优先级",[15,1772,1773,1774,340],{},"同一源内冲突，比 ",[24,1775,1776],{},"选择器权重",[83,1778,1780],{"className":85,"code":1779,"language":87,"meta":88,"style":88},"\u003Cdiv class=\"test\">\n  \u003Ch1>test\u003C\u002Fh1>\n\u003C\u002Fdiv>\n",[19,1781,1782,1797,1810],{"__ignoreMap":88},[92,1783,1784,1786,1788,1790,1792,1795],{"class":94,"line":95},[92,1785,99],{"class":98},[92,1787,115],{"class":102},[92,1789,119],{"class":118},[92,1791,122],{"class":98},[92,1793,1794],{"class":125},"\"test\"",[92,1796,106],{"class":98},[92,1798,1799,1801,1803,1806,1808],{"class":94,"line":109},[92,1800,112],{"class":98},[92,1802,11],{"class":102},[92,1804,1805],{"class":98},">test\u003C\u002F",[92,1807,11],{"class":102},[92,1809,106],{"class":98},[92,1811,1812,1814,1816],{"class":94,"line":131},[92,1813,166],{"class":98},[92,1815,115],{"class":102},[92,1817,106],{"class":98},[83,1819,1821],{"className":173,"code":1820,"language":175,"meta":88,"style":88},".test h1 {\n  font-size: 50px;\n}\n\nh1 {\n  font-size: 20px;\n}\n",[19,1822,1823,1833,1846,1850,1854,1860,1873],{"__ignoreMap":88},[92,1824,1825,1828,1831],{"class":94,"line":95},[92,1826,1827],{"class":118},".test",[92,1829,1830],{"class":102}," h1",[92,1832,185],{"class":98},[92,1834,1835,1838,1840,1842,1844],{"class":94,"line":109},[92,1836,1837],{"class":190},"  font-size",[92,1839,194],{"class":98},[92,1841,260],{"class":190},[92,1843,201],{"class":200},[92,1845,204],{"class":98},[92,1847,1848],{"class":94,"line":131},[92,1849,235],{"class":98},[92,1851,1852],{"class":94,"line":153},[92,1853,242],{"emptyLinePlaceholder":241},[92,1855,1856,1858],{"class":94,"line":163},[92,1857,11],{"class":102},[92,1859,185],{"class":98},[92,1861,1862,1864,1866,1869,1871],{"class":94,"line":238},[92,1863,1837],{"class":190},[92,1865,194],{"class":98},[92,1867,1868],{"class":190},"20",[92,1870,201],{"class":200},[92,1872,204],{"class":98},[92,1874,1875],{"class":94,"line":245},[92,1876,235],{"class":98},[15,1878,1879,1882],{},[19,1880,1881],{},".test h1"," 权重更高 → 50px：",[15,1884,1885],{},[39,1886],{"alt":1887,"src":1888},"权重较高规则生效","\u002Fdemos\u002Fcss-property-calc\u002Fspecificity.svg",[15,1890,1891],{},"落败规则在 Styles 面板中会被划掉。",[438,1893,1894],{"id":1894},"比较次序",[15,1896,1897,1898,340],{},"同源、同权重时，",[24,1899,1900],{},"后面的规则覆盖前面的",[83,1902,1904],{"className":173,"code":1903,"language":175,"meta":88,"style":88},"h1 {\n  font-size: 50px;\n}\n\nh1 {\n  font-size: 20px;\n}\n",[19,1905,1906,1912,1924,1928,1932,1938,1950],{"__ignoreMap":88},[92,1907,1908,1910],{"class":94,"line":95},[92,1909,11],{"class":102},[92,1911,185],{"class":98},[92,1913,1914,1916,1918,1920,1922],{"class":94,"line":109},[92,1915,1837],{"class":190},[92,1917,194],{"class":98},[92,1919,260],{"class":190},[92,1921,201],{"class":200},[92,1923,204],{"class":98},[92,1925,1926],{"class":94,"line":131},[92,1927,235],{"class":98},[92,1929,1930],{"class":94,"line":153},[92,1931,242],{"emptyLinePlaceholder":241},[92,1933,1934,1936],{"class":94,"line":163},[92,1935,11],{"class":102},[92,1937,185],{"class":98},[92,1939,1940,1942,1944,1946,1948],{"class":94,"line":238},[92,1941,1837],{"class":190},[92,1943,194],{"class":98},[92,1945,1868],{"class":190},[92,1947,201],{"class":200},[92,1949,204],{"class":98},[92,1951,1952],{"class":94,"line":245},[92,1953,235],{"class":98},[15,1955,1956],{},"最终 20px：",[15,1958,1959],{},[39,1960],{"alt":1961,"src":1962},"同权重时后者胜出","\u002Fdemos\u002Fcss-property-calc\u002Fsource-order.svg",[78,1964,1966],{"id":1965},"第三步使用继承","第三步：使用继承",[15,1968,1969,1970,1973,1974,1977],{},"没有声明的属性，若该属性 ",[24,1971,1972],{},"可继承","，则从 ",[24,1975,1976],{},"最近的祖先"," 取值：",[83,1979,1981],{"className":85,"code":1980,"language":87,"meta":88,"style":88},"\u003Cdiv>\n  \u003Cp>Lorem ipsum dolor sit amet.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[19,1982,1983,1991,2004],{"__ignoreMap":88},[92,1984,1985,1987,1989],{"class":94,"line":95},[92,1986,99],{"class":98},[92,1988,115],{"class":102},[92,1990,106],{"class":98},[92,1992,1993,1995,1997,2000,2002],{"class":94,"line":109},[92,1994,112],{"class":98},[92,1996,15],{"class":102},[92,1998,1999],{"class":98},">Lorem ipsum dolor sit amet.\u003C\u002F",[92,2001,15],{"class":102},[92,2003,106],{"class":98},[92,2005,2006,2008,2010],{"class":94,"line":131},[92,2007,166],{"class":98},[92,2009,115],{"class":102},[92,2011,106],{"class":98},[83,2013,2015],{"className":173,"code":2014,"language":175,"meta":88,"style":88},"div {\n  color: red;\n}\n",[19,2016,2017,2023,2033],{"__ignoreMap":88},[92,2018,2019,2021],{"class":94,"line":95},[92,2020,115],{"class":102},[92,2022,185],{"class":98},[92,2024,2025,2027,2029,2031],{"class":94,"line":109},[92,2026,1477],{"class":190},[92,2028,194],{"class":98},[92,2030,288],{"class":190},[92,2032,204],{"class":98},[92,2034,2035],{"class":94,"line":131},[92,2036,235],{"class":98},[15,2038,2039,404,2041,2044,2045,340],{},[19,2040,15],{},[19,2042,2043],{},"color"," 来自 ",[19,2046,115],{},[15,2048,2049],{},[39,2050],{"alt":2051,"src":2052},"color 继承","\u002Fdemos\u002Fcss-property-calc\u002Finherit-basic.svg",[15,2054,2055,2056,340],{},"强调 ",[24,2057,2058],{},"最近祖先",[83,2060,2062],{"className":85,"code":2061,"language":87,"meta":88,"style":88},"\u003Cdiv class=\"test\">\n  \u003Cdiv>\n    \u003Cp>Lorem ipsum dolor sit amet.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[19,2063,2064,2078,2086,2098,2106],{"__ignoreMap":88},[92,2065,2066,2068,2070,2072,2074,2076],{"class":94,"line":95},[92,2067,99],{"class":98},[92,2069,115],{"class":102},[92,2071,119],{"class":118},[92,2073,122],{"class":98},[92,2075,1794],{"class":125},[92,2077,106],{"class":98},[92,2079,2080,2082,2084],{"class":94,"line":109},[92,2081,112],{"class":98},[92,2083,115],{"class":102},[92,2085,106],{"class":98},[92,2087,2088,2090,2092,2094,2096],{"class":94,"line":131},[92,2089,134],{"class":98},[92,2091,15],{"class":102},[92,2093,1999],{"class":98},[92,2095,15],{"class":102},[92,2097,106],{"class":98},[92,2099,2100,2102,2104],{"class":94,"line":153},[92,2101,156],{"class":98},[92,2103,115],{"class":102},[92,2105,106],{"class":98},[92,2107,2108,2110,2112],{"class":94,"line":163},[92,2109,166],{"class":98},[92,2111,115],{"class":102},[92,2113,106],{"class":98},[83,2115,2117],{"className":173,"code":2116,"language":175,"meta":88,"style":88},"div {\n  color: red;\n}\n\n.test {\n  color: blue;\n}\n",[19,2118,2119,2125,2135,2139,2143,2149,2160],{"__ignoreMap":88},[92,2120,2121,2123],{"class":94,"line":95},[92,2122,115],{"class":102},[92,2124,185],{"class":98},[92,2126,2127,2129,2131,2133],{"class":94,"line":109},[92,2128,1477],{"class":190},[92,2130,194],{"class":98},[92,2132,288],{"class":190},[92,2134,204],{"class":98},[92,2136,2137],{"class":94,"line":131},[92,2138,235],{"class":98},[92,2140,2141],{"class":94,"line":153},[92,2142,242],{"emptyLinePlaceholder":241},[92,2144,2145,2147],{"class":94,"line":163},[92,2146,1827],{"class":118},[92,2148,185],{"class":98},[92,2150,2151,2153,2155,2158],{"class":94,"line":238},[92,2152,1477],{"class":190},[92,2154,194],{"class":98},[92,2156,2157],{"class":190},"blue",[92,2159,204],{"class":98},[92,2161,2162],{"class":94,"line":245},[92,2163,235],{"class":98},[15,2165,2166,2167,2169,2170,2172,2173,2175],{},"内层 ",[19,2168,115],{}," 更近 → ",[19,2171,15],{}," 继承蓝色（这里不比权重，因为根本没选中 ",[19,2174,15],{},"）：",[15,2177,2178],{},[39,2179],{"alt":2180,"src":2181},"继承听最近的祖先","\u002Fdemos\u002Fcss-property-calc\u002Finherit-nearest.svg",[15,2183,2184,2185,340],{},"哪些属性可继承？查 MDN 各属性页，例如 ",[19,2186,2187],{},"text-align",[15,2189,2190],{},[39,2191],{"alt":2192,"src":2193},"MDN 上的 inherits 说明","\u002Fdemos\u002Fcss-property-calc\u002Finherits-hint.svg",[78,2195,2197],{"id":2196},"第四步使用默认值","第四步：使用默认值",[15,2199,2200,2201,340],{},"仍无法确定的，用 ",[24,2202,2203],{},"initial \u002F 用户代理默认值",[15,2205,2206],{},[39,2207],{"alt":2208,"src":2209},"最终落到默认值","\u002Fdemos\u002Fcss-property-calc\u002Finitial-default.svg",[15,2211,2212],{},"元素要在浏览器里渲染，必须具备完整属性集；大量属性既未声明、也无法继承，就靠这一步补齐。",[15,2214,2215],{},[39,2216],{"alt":2217,"src":2218},"四步流程回顾","\u002Fdemos\u002Fcss-property-calc\u002Fsteps-summary.svg",[78,2220,2222],{"id":2221},"面试题a-和-p-各是什么颜色","面试题：a 和 p 各是什么颜色？",[83,2224,2226],{"className":85,"code":2225,"language":87,"meta":88,"style":88},"\u003Cdiv>\n  \u003Ca href=\"\">test\u003C\u002Fa>\n  \u003Cp>test\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[19,2227,2228,2236,2256,2268],{"__ignoreMap":88},[92,2229,2230,2232,2234],{"class":94,"line":95},[92,2231,99],{"class":98},[92,2233,115],{"class":102},[92,2235,106],{"class":98},[92,2237,2238,2240,2242,2245,2247,2250,2252,2254],{"class":94,"line":109},[92,2239,112],{"class":98},[92,2241,51],{"class":102},[92,2243,2244],{"class":118}," href",[92,2246,122],{"class":98},[92,2248,2249],{"class":125},"\"\"",[92,2251,1805],{"class":98},[92,2253,51],{"class":102},[92,2255,106],{"class":98},[92,2257,2258,2260,2262,2264,2266],{"class":94,"line":131},[92,2259,112],{"class":98},[92,2261,15],{"class":102},[92,2263,1805],{"class":98},[92,2265,15],{"class":102},[92,2267,106],{"class":98},[92,2269,2270,2272,2274],{"class":94,"line":153},[92,2271,166],{"class":98},[92,2273,115],{"class":102},[92,2275,106],{"class":98},[83,2277,2278],{"className":173,"code":2014,"language":175,"meta":88,"style":88},[19,2279,2280,2286,2296],{"__ignoreMap":88},[92,2281,2282,2284],{"class":94,"line":95},[92,2283,115],{"class":102},[92,2285,185],{"class":98},[92,2287,2288,2290,2292,2294],{"class":94,"line":109},[92,2289,1477],{"class":190},[92,2291,194],{"class":98},[92,2293,288],{"class":190},[92,2295,204],{"class":98},[92,2297,2298],{"class":94,"line":131},[92,2299,235],{"class":98},[15,2301,2302],{},[39,2303],{"alt":2304,"src":2305},"面试题解答","\u002Fdemos\u002Fcss-property-calc\u002Finterview-a-p.svg",[342,2307,2308,2325],{},[345,2309,2310,2314,2315,2317,2318,2321,2322,2324],{},[24,2311,2312],{},[19,2313,51],{},"：用户代理样式表里已为链接声明了 ",[19,2316,2043],{},"，有声明值，",[24,2319,2320],{},"不继承"," ",[19,2323,115],{}," 的红色。",[345,2326,2327,2331,2332,2334,2335,2337,2338,2340,2341,2343],{},[24,2328,2329],{},[19,2330,15],{},"：作者与 UA 都未给 ",[19,2333,15],{}," 声明 ",[19,2336,2043],{},"，而 ",[19,2339,2043],{}," 可继承 → 从 ",[19,2342,115],{}," 继承红色。",[78,2345,1381],{"id":1381},[342,2347,2348,2354,2360,2366],{},[345,2349,2350,2351,57],{},"计算样式四步：",[24,2352,2353],{},"声明 → 层叠 → 继承 → 默认",[345,2355,2356,2357,57],{},"层叠内部：",[24,2358,2359],{},"源 > 权重 > 次序",[345,2361,2362,2363,2365],{},"继承看 ",[24,2364,2058],{},"，与选择器权重无关。",[345,2367,2368,2369,57],{},"算出的 Computed Style 是渲染流水线「样式计算」的输入；百分比尺寸还要等 ",[51,2370,2371],{"href":1443},"布局与包含块",[1425,2373,2374],{},"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":88,"searchDepth":131,"depth":131,"links":2376},[2377,2378,2379,2384,2385,2386,2387],{"id":1520,"depth":109,"text":1520},{"id":1612,"depth":109,"text":1613},{"id":1653,"depth":109,"text":1654,"children":2380},[2381,2382,2383],{"id":1683,"depth":131,"text":1683},{"id":1770,"depth":131,"text":1770},{"id":1894,"depth":131,"text":1894},{"id":1965,"depth":109,"text":1966},{"id":2196,"depth":109,"text":2197},{"id":2221,"depth":109,"text":2222},{"id":1381,"depth":109,"text":1381},"2026-06-27","确定声明值、层叠冲突、继承与默认值——搞懂 Computed 面板里那一长串属性是怎么来的。",{},{"title":1453,"description":2389},"blog\u002Fcss-property-calculation",[2394,2395,1449],"cascade","computed-style","VHFx82BlHxxsO9OMlz7Mo-xU23maWSskailB9o960y8",{"id":2398,"title":2399,"body":2400,"category":5514,"date":5515,"description":5516,"draft":1440,"extension":1441,"meta":5517,"navigation":241,"path":1422,"seo":5518,"stem":5519,"tags":5520,"__hash__":5524},"blog\u002Fblog\u002Freflow-repaint-transform.md","reflow、repaint 与 transform 为何高效",{"type":8,"value":2401,"toc":5505},[2402,2405,2423,2427,2432,2439,2442,2449,2455,2459,2476,2482,2554,2558,2563,2583,2590,2598,2645,2649,2665,2667,2685,2698,2714,5473,5475,5502],[11,2403,2399],{"id":2404},"reflowrepaint-与-transform-为何高效",[15,2406,2407,2408,2411,2412,2415,2416,31,2419,2422],{},"上一篇 ",[51,2409,2410],{"href":69},"浏览器渲染流水线"," 讲的是「从零画一页」。页面跑起来之后，改 DOM 或样式会触发 ",[24,2413,2414],{},"局部重算","。面试里常说的 ",[24,2417,2418],{},"回流（reflow）",[24,2420,2421],{},"重绘（repaint）","，指的就是流水线里哪些阶段要重跑。",[78,2424,2426],{"id":2425},"什么是-reflow回流","什么是 reflow（回流）？",[15,2428,2429],{},[24,2430,2431],{},"Reflow 的本质是重新计算布局树（Layout）。",[15,2433,2434,2435,2438],{},"凡是会影响布局树的操作——改宽高、边距、显示方式、插入删除节点等——都需要重新做 ",[24,2436,2437],{},"Layout"," 及之后的阶段（分层、绘制、分块、光栅化、合成）。",[438,2440,2441],{"id":2441},"浏览器会合并多次改动",[15,2443,2444,2445,2448],{},"连续多次改布局相关属性时，浏览器往往 ",[24,2446,2447],{},"先合并","，等当前 JS 执行块结束后再统一算布局，避免同一帧里反复 reflow。",[15,2450,2451,2452],{},"因此：",[24,2453,2454],{},"改属性触发的 reflow 常常是异步批量的。",[438,2456,2458],{"id":2457},"读布局属性会强制同步-reflow","读布局属性会强制同步 reflow",[15,2460,2461,2462,2321,2465,31,2468,2471,2472,2475],{},"如果 JS 在改完布局后又 ",[24,2463,2464],{},"读取",[19,2466,2467],{},"offsetWidth",[19,2469,2470],{},"getBoundingClientRect()"," 等依赖最新几何信息的属性，浏览器必须 ",[24,2473,2474],{},"立刻算出最新布局","，否则会返回过期数据。",[15,2477,2478,2479],{},"所以常见性能建议：",[24,2480,2481],{},"先读后写，或批量改样式，避免读写交错。",[2483,2484,2487],"code-block",{"lang":2485,"title":2486},"javascript","读写交错可能触发强制同步布局",[83,2488,2491],{"className":2489,"code":2490,"language":2485,"meta":88,"style":88},"language-javascript shiki shiki-themes github-light github-dark","const el = document.querySelector('.box')\nel.style.width = '200px'\n\u002F\u002F 读宽度会迫使浏览器立即 reflow\nconsole.log(el.offsetWidth)\nel.style.width = '300px'\n",[19,2492,2493,2518,2528,2534,2545],{"__ignoreMap":88},[92,2494,2495,2498,2501,2504,2507,2510,2512,2515],{"class":94,"line":95},[92,2496,2497],{"class":200},"const",[92,2499,2500],{"class":190}," el",[92,2502,2503],{"class":200}," =",[92,2505,2506],{"class":98}," document.",[92,2508,2509],{"class":118},"querySelector",[92,2511,866],{"class":98},[92,2513,2514],{"class":125},"'.box'",[92,2516,2517],{"class":98},")\n",[92,2519,2520,2523,2525],{"class":94,"line":109},[92,2521,2522],{"class":98},"el.style.width ",[92,2524,122],{"class":200},[92,2526,2527],{"class":125}," '200px'\n",[92,2529,2530],{"class":94,"line":131},[92,2531,2533],{"class":2532},"sJ8bj","\u002F\u002F 读宽度会迫使浏览器立即 reflow\n",[92,2535,2536,2539,2542],{"class":94,"line":153},[92,2537,2538],{"class":98},"console.",[92,2540,2541],{"class":118},"log",[92,2543,2544],{"class":98},"(el.offsetWidth)\n",[92,2546,2547,2549,2551],{"class":94,"line":163},[92,2548,2522],{"class":98},[92,2550,122],{"class":200},[92,2552,2553],{"class":125}," '300px'\n",[78,2555,2557],{"id":2556},"什么是-repaint重绘","什么是 repaint（重绘）？",[15,2559,2560],{},[24,2561,2562],{},"Repaint 的本质是重新生成绘制指令（Paint）及之后步骤。",[15,2564,2565,2566,2569,2570,31,2572,31,2575,2578,2579,2582],{},"改的是 ",[24,2567,2568],{},"可见样式但不改布局"," 时——例如 ",[19,2571,2043],{},[19,2573,2574],{},"background",[19,2576,2577],{},"visibility","（在仍占位的情况下）——可能只需 ",[24,2580,2581],{},"Repaint","，不必完整 reflow。",[15,2584,2585,2586,2589],{},"但 ",[24,2587,2588],{},"布局信息本身也是可见结果的一部分","，所以：",[2591,2592,2593],"blockquote",{},[15,2594,2595],{},[24,2596,2597],{},"Reflow 一定会引起 Repaint。",[366,2599,2600,2613],{},[369,2601,2602],{},[372,2603,2604,2607,2610],{},[375,2605,2606],{},"操作类型",[375,2608,2609],{},"典型属性",[375,2611,2612],{},"至少触发的阶段",[384,2614,2615,2632],{},[372,2616,2617,2620,2629],{},[389,2618,2619],{},"Reflow",[389,2621,2622,31,2625,31,2627],{},[19,2623,2624],{},"width",[19,2626,1641],{},[19,2628,1638],{},[389,2630,2631],{},"Layout → … → Draw",[372,2633,2634,2636,2642],{},[389,2635,2581],{},[389,2637,2638,31,2640],{},[19,2639,2043],{},[19,2641,2574],{},[389,2643,2644],{},"Paint → … → Draw",[78,2646,2648],{"id":2647},"为什么-transform-效率高","为什么 transform 效率高？",[15,2650,2651,2321,2653,2656,2657,2660,2661,2664],{},[19,2652,798],{},[24,2654,2655],{},"不改变布局树","，也 ",[24,2658,2659],{},"不改变绘制指令的生成方式","（不触发典型意义上的 layout \u002F paint 重算）。它主要影响流水线最后的 ",[24,2662,2663],{},"Draw（合成）"," 阶段：在合成线程里对已有位图做位移、旋转、缩放。",[15,2666,2451],{},[342,2668,2669,2678],{},[345,2670,2671,2673,2674,2677],{},[19,2672,798],{}," 变化时，",[24,2675,2676],{},"渲染主线程"," 往往仍很空闲",[345,2679,2680,2681,2684],{},"主线程再忙，",[24,2682,2683],{},"也不应挡住"," 合成线程上的 transform 动画",[15,2686,2687,2688,394,2691,2694,2695,2697],{},"对比：用 ",[19,2689,2690],{},"top",[19,2692,2693],{},"left"," 做位移动画会改布局，通常走 ",[24,2696,2619],{}," 路径，代价大得多。",[15,2699,2700,2703,2704,2707,2708,2710,2711,2713],{},[24,2701,2702],{},"注意："," 对比的前提是 ",[24,2705,2706],{},"画面一样、实现不同","。下面 demo 两个小球同步左右移动，左边用 ",[19,2709,798],{},"，右边用 ",[19,2712,2693],{},"；视觉上应一致，差别在每一帧走合成还是 Layout。",[2715,2716,2718],"code-playground",{"title":2717},"transform vs left：同动画、不同实现",[83,2719,2723],{"className":2720,"code":2721,"language":2722,"meta":88,"style":88},"language-vue shiki shiki-themes github-light github-dark","\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","vue",[19,2724,2725,2734,2749,2764,2779,2793,2801,2805,2820,2835,2850,2870,2890,2898,2913,2940,2948,2968,2976,2980,2994,3008,3027,3048,3057,3072,3104,3113,3133,3142,3151,3156,3172,3205,3211,3220,3248,3257,3266,3275,3280,3293,3308,3313,3332,3350,3368,3386,3405,3410,3424,3436,3449,3461,3466,3484,3504,3529,3560,3565,3583,3594,3616,3628,3653,3721,3726,3739,3756,3768,3777,3786,3794,3807,3813,3834,3845,3866,3926,3931,3939,3953,3958,3964,3969,3974,3985,3995,4004,4014,4024,4033,4043,4048,4053,4063,4077,4084,4092,4104,4115,4124,4130,4135,4140,4150,4160,4168,4176,4181,4186,4202,4211,4216,4228,4236,4250,4268,4273,4278,4286,4306,4318,4333,4346,4351,4356,4366,4380,4399,4414,4427,4432,4437,4445,4457,4472,4477,4482,4502,4510,4530,4535,4540,4545,4553,4566,4579,4591,4609,4614,4619,4627,4639,4652,4665,4680,4694,4699,4704,4712,4726,4739,4758,4772,4777,4782,4790,4802,4814,4819,4824,4832,4844,4856,4861,4866,4874,4887,4898,4911,4922,4927,4932,4940,4952,4957,4962,4970,4981,4995,5008,5019,5032,5037,5042,5050,5061,5074,5085,5099,5112,5125,5137,5150,5155,5160,5168,5185,5198,5210,5215,5220,5228,5239,5252,5267,5272,5277,5285,5303,5314,5327,5338,5350,5361,5374,5388,5393,5398,5406,5418,5423,5428,5436,5447,5459,5464],{"__ignoreMap":88},[92,2726,2727,2729,2732],{"class":94,"line":95},[92,2728,99],{"class":98},[92,2730,2731],{"class":102},"template",[92,2733,106],{"class":98},[92,2735,2736,2738,2740,2742,2744,2747],{"class":94,"line":109},[92,2737,112],{"class":98},[92,2739,115],{"class":102},[92,2741,119],{"class":118},[92,2743,122],{"class":98},[92,2745,2746],{"class":125},"\"wrap\"",[92,2748,106],{"class":98},[92,2750,2751,2753,2755,2757,2759,2762],{"class":94,"line":131},[92,2752,134],{"class":98},[92,2754,15],{"class":102},[92,2756,119],{"class":118},[92,2758,122],{"class":98},[92,2760,2761],{"class":125},"\"tip\"",[92,2763,106],{"class":98},[92,2765,2766,2769,2771,2774,2776],{"class":94,"line":153},[92,2767,2768],{"class":98},"      点「开始动画」：两球同步往复移动。左边 \u003C",[92,2770,19],{"class":102},[92,2772,2773],{"class":98},">transform: translateX\u003C\u002F",[92,2775,19],{"class":102},[92,2777,2778],{"class":98},">，右边\n",[92,2780,2781,2783,2785,2788,2790],{"class":94,"line":163},[92,2782,487],{"class":98},[92,2784,19],{"class":102},[92,2786,2787],{"class":98},">left\u003C\u002F",[92,2789,19],{"class":102},[92,2791,2792],{"class":98},">。画面应一致；右轨每帧触发布局，主线程更忙时可能更卡。\n",[92,2794,2795,2797,2799],{"class":94,"line":238},[92,2796,507],{"class":98},[92,2798,15],{"class":102},[92,2800,106],{"class":98},[92,2802,2803],{"class":94,"line":245},[92,2804,242],{"emptyLinePlaceholder":241},[92,2806,2807,2809,2811,2813,2815,2818],{"class":94,"line":253},[92,2808,134],{"class":98},[92,2810,115],{"class":102},[92,2812,119],{"class":118},[92,2814,122],{"class":98},[92,2816,2817],{"class":125},"\"compare\"",[92,2819,106],{"class":98},[92,2821,2822,2824,2826,2828,2830,2833],{"class":94,"line":268},[92,2823,487],{"class":98},[92,2825,115],{"class":102},[92,2827,119],{"class":118},[92,2829,122],{"class":98},[92,2831,2832],{"class":125},"\"col\"",[92,2834,106],{"class":98},[92,2836,2837,2839,2841,2843,2845,2848],{"class":94,"line":281},[92,2838,1031],{"class":98},[92,2840,115],{"class":102},[92,2842,119],{"class":118},[92,2844,122],{"class":98},[92,2846,2847],{"class":125},"\"col-head\"",[92,2849,106],{"class":98},[92,2851,2852,2854,2856,2858,2860,2863,2866,2868],{"class":94,"line":293},[92,2853,1053],{"class":98},[92,2855,92],{"class":102},[92,2857,119],{"class":118},[92,2859,122],{"class":98},[92,2861,2862],{"class":125},"\"tag good\"",[92,2864,2865],{"class":98},">transform\u003C\u002F",[92,2867,92],{"class":102},[92,2869,106],{"class":98},[92,2871,2872,2874,2876,2878,2880,2883,2886,2888],{"class":94,"line":642},[92,2873,1053],{"class":98},[92,2875,92],{"class":102},[92,2877,119],{"class":118},[92,2879,122],{"class":98},[92,2881,2882],{"class":125},"\"metric\"",[92,2884,2885],{"class":98},">本帧 ≈ {{ transformMs }}ms\u003C\u002F",[92,2887,92],{"class":102},[92,2889,106],{"class":98},[92,2891,2892,2894,2896],{"class":94,"line":657},[92,2893,1079],{"class":98},[92,2895,115],{"class":102},[92,2897,106],{"class":98},[92,2899,2900,2902,2904,2906,2908,2911],{"class":94,"line":662},[92,2901,1031],{"class":98},[92,2903,115],{"class":102},[92,2905,119],{"class":118},[92,2907,122],{"class":98},[92,2909,2910],{"class":125},"\"track\"",[92,2912,106],{"class":98},[92,2914,2915,2917,2919,2921,2923,2926,2929,2931,2934,2938],{"class":94,"line":667},[92,2916,1053],{"class":98},[92,2918,115],{"class":102},[92,2920,119],{"class":118},[92,2922,122],{"class":98},[92,2924,2925],{"class":125},"\"ball\"",[92,2927,2928],{"class":118}," :style",[92,2930,122],{"class":98},[92,2932,2933],{"class":125},"\"{ transform: `translateX(${x}px)` }\"",[92,2935,2937],{"class":2936},"s7hpK"," \u002F",[92,2939,106],{"class":98},[92,2941,2942,2944,2946],{"class":94,"line":675},[92,2943,1079],{"class":98},[92,2945,115],{"class":102},[92,2947,106],{"class":98},[92,2949,2950,2952,2954,2956,2958,2961,2964,2966],{"class":94,"line":688},[92,2951,1031],{"class":98},[92,2953,15],{"class":102},[92,2955,119],{"class":118},[92,2957,122],{"class":98},[92,2959,2960],{"class":125},"\"note\"",[92,2962,2963],{"class":98},">合成阶段位移，不改布局树\u003C\u002F",[92,2965,15],{"class":102},[92,2967,106],{"class":98},[92,2969,2970,2972,2974],{"class":94,"line":701},[92,2971,1088],{"class":98},[92,2973,115],{"class":102},[92,2975,106],{"class":98},[92,2977,2978],{"class":94,"line":712},[92,2979,242],{"emptyLinePlaceholder":241},[92,2981,2982,2984,2986,2988,2990,2992],{"class":94,"line":723},[92,2983,487],{"class":98},[92,2985,115],{"class":102},[92,2987,119],{"class":118},[92,2989,122],{"class":98},[92,2991,2832],{"class":125},[92,2993,106],{"class":98},[92,2995,2996,2998,3000,3002,3004,3006],{"class":94,"line":738},[92,2997,1031],{"class":98},[92,2999,115],{"class":102},[92,3001,119],{"class":118},[92,3003,122],{"class":98},[92,3005,2847],{"class":125},[92,3007,106],{"class":98},[92,3009,3010,3012,3014,3016,3018,3021,3023,3025],{"class":94,"line":752},[92,3011,1053],{"class":98},[92,3013,92],{"class":102},[92,3015,119],{"class":118},[92,3017,122],{"class":98},[92,3019,3020],{"class":125},"\"tag warn\"",[92,3022,2787],{"class":98},[92,3024,92],{"class":102},[92,3026,106],{"class":98},[92,3028,3030,3032,3034,3036,3038,3041,3044,3046],{"class":94,"line":3029},23,[92,3031,1053],{"class":98},[92,3033,92],{"class":102},[92,3035,119],{"class":118},[92,3037,122],{"class":98},[92,3039,3040],{"class":125},"\"metric warn-m\"",[92,3042,3043],{"class":98},">{{ layoutMs }}ms\u003C\u002F",[92,3045,92],{"class":102},[92,3047,106],{"class":98},[92,3049,3051,3053,3055],{"class":94,"line":3050},24,[92,3052,1079],{"class":98},[92,3054,115],{"class":102},[92,3056,106],{"class":98},[92,3058,3060,3062,3064,3066,3068,3070],{"class":94,"line":3059},25,[92,3061,1031],{"class":98},[92,3063,115],{"class":102},[92,3065,119],{"class":118},[92,3067,122],{"class":98},[92,3069,2910],{"class":125},[92,3071,106],{"class":98},[92,3073,3075,3077,3079,3082,3084,3087,3089,3091,3093,3095,3097,3100,3102],{"class":94,"line":3074},26,[92,3076,1053],{"class":98},[92,3078,115],{"class":102},[92,3080,3081],{"class":118}," ref",[92,3083,122],{"class":98},[92,3085,3086],{"class":125},"\"leftBall\"",[92,3088,119],{"class":118},[92,3090,122],{"class":98},[92,3092,2925],{"class":125},[92,3094,2928],{"class":118},[92,3096,122],{"class":98},[92,3098,3099],{"class":125},"\"{ left: `${x}px` }\"",[92,3101,2937],{"class":2936},[92,3103,106],{"class":98},[92,3105,3107,3109,3111],{"class":94,"line":3106},27,[92,3108,1079],{"class":98},[92,3110,115],{"class":102},[92,3112,106],{"class":98},[92,3114,3116,3118,3120,3122,3124,3126,3129,3131],{"class":94,"line":3115},28,[92,3117,1031],{"class":98},[92,3119,15],{"class":102},[92,3121,119],{"class":118},[92,3123,122],{"class":98},[92,3125,2960],{"class":125},[92,3127,3128],{"class":98},">每帧改几何位置 → Layout\u003C\u002F",[92,3130,15],{"class":102},[92,3132,106],{"class":98},[92,3134,3136,3138,3140],{"class":94,"line":3135},29,[92,3137,1088],{"class":98},[92,3139,115],{"class":102},[92,3141,106],{"class":98},[92,3143,3145,3147,3149],{"class":94,"line":3144},30,[92,3146,507],{"class":98},[92,3148,115],{"class":102},[92,3150,106],{"class":98},[92,3152,3154],{"class":94,"line":3153},31,[92,3155,242],{"emptyLinePlaceholder":241},[92,3157,3159,3161,3163,3165,3167,3170],{"class":94,"line":3158},32,[92,3160,134],{"class":98},[92,3162,115],{"class":102},[92,3164,119],{"class":118},[92,3166,122],{"class":98},[92,3168,3169],{"class":125},"\"actions\"",[92,3171,106],{"class":98},[92,3173,3175,3177,3180,3182,3184,3187,3190,3192,3195,3198,3200,3203],{"class":94,"line":3174},33,[92,3176,487],{"class":98},[92,3178,3179],{"class":102},"button",[92,3181,119],{"class":118},[92,3183,122],{"class":98},[92,3185,3186],{"class":125},"\"btn\"",[92,3188,3189],{"class":118}," :class",[92,3191,122],{"class":98},[92,3193,3194],{"class":125},"\"{ active: running }\"",[92,3196,3197],{"class":118}," @click",[92,3199,122],{"class":98},[92,3201,3202],{"class":125},"\"toggle\"",[92,3204,106],{"class":98},[92,3206,3208],{"class":94,"line":3207},34,[92,3209,3210],{"class":98},"        {{ running ? '停止动画' : '开始动画' }}\n",[92,3212,3214,3216,3218],{"class":94,"line":3213},35,[92,3215,1088],{"class":98},[92,3217,3179],{"class":102},[92,3219,106],{"class":98},[92,3221,3223,3225,3227,3229,3231,3234,3236,3238,3241,3244,3246],{"class":94,"line":3222},36,[92,3224,487],{"class":98},[92,3226,3179],{"class":102},[92,3228,119],{"class":118},[92,3230,122],{"class":98},[92,3232,3233],{"class":125},"\"btn ghost\"",[92,3235,3197],{"class":118},[92,3237,122],{"class":98},[92,3239,3240],{"class":125},"\"reset\"",[92,3242,3243],{"class":98},">复位\u003C\u002F",[92,3245,3179],{"class":102},[92,3247,106],{"class":98},[92,3249,3251,3253,3255],{"class":94,"line":3250},37,[92,3252,507],{"class":98},[92,3254,115],{"class":102},[92,3256,106],{"class":98},[92,3258,3260,3262,3264],{"class":94,"line":3259},38,[92,3261,156],{"class":98},[92,3263,115],{"class":102},[92,3265,106],{"class":98},[92,3267,3269,3271,3273],{"class":94,"line":3268},39,[92,3270,166],{"class":98},[92,3272,2731],{"class":102},[92,3274,106],{"class":98},[92,3276,3278],{"class":94,"line":3277},40,[92,3279,242],{"emptyLinePlaceholder":241},[92,3281,3283,3285,3288,3291],{"class":94,"line":3282},41,[92,3284,99],{"class":98},[92,3286,3287],{"class":102},"script",[92,3289,3290],{"class":118}," setup",[92,3292,106],{"class":98},[92,3294,3296,3299,3302,3305],{"class":94,"line":3295},42,[92,3297,3298],{"class":200},"import",[92,3300,3301],{"class":98}," { nextTick, onUnmounted, ref } ",[92,3303,3304],{"class":200},"from",[92,3306,3307],{"class":125}," 'vue'\n",[92,3309,3311],{"class":94,"line":3310},43,[92,3312,242],{"emptyLinePlaceholder":241},[92,3314,3316,3318,3321,3323,3325,3327,3330],{"class":94,"line":3315},44,[92,3317,2497],{"class":200},[92,3319,3320],{"class":190}," running",[92,3322,2503],{"class":200},[92,3324,3081],{"class":118},[92,3326,866],{"class":98},[92,3328,3329],{"class":190},"false",[92,3331,2517],{"class":98},[92,3333,3335,3337,3340,3342,3344,3346,3348],{"class":94,"line":3334},45,[92,3336,2497],{"class":200},[92,3338,3339],{"class":190}," x",[92,3341,2503],{"class":200},[92,3343,3081],{"class":118},[92,3345,866],{"class":98},[92,3347,869],{"class":190},[92,3349,2517],{"class":98},[92,3351,3353,3355,3358,3360,3362,3364,3366],{"class":94,"line":3352},46,[92,3354,2497],{"class":200},[92,3356,3357],{"class":190}," transformMs",[92,3359,2503],{"class":200},[92,3361,3081],{"class":118},[92,3363,866],{"class":98},[92,3365,869],{"class":190},[92,3367,2517],{"class":98},[92,3369,3371,3373,3376,3378,3380,3382,3384],{"class":94,"line":3370},47,[92,3372,2497],{"class":200},[92,3374,3375],{"class":190}," layoutMs",[92,3377,2503],{"class":200},[92,3379,3081],{"class":118},[92,3381,866],{"class":98},[92,3383,869],{"class":190},[92,3385,2517],{"class":98},[92,3387,3389,3391,3394,3396,3398,3400,3403],{"class":94,"line":3388},48,[92,3390,2497],{"class":200},[92,3392,3393],{"class":190}," leftBall",[92,3395,2503],{"class":200},[92,3397,3081],{"class":118},[92,3399,866],{"class":98},[92,3401,3402],{"class":190},"null",[92,3404,2517],{"class":98},[92,3406,3408],{"class":94,"line":3407},49,[92,3409,242],{"emptyLinePlaceholder":241},[92,3411,3413,3416,3419,3421],{"class":94,"line":3412},50,[92,3414,3415],{"class":200},"let",[92,3417,3418],{"class":98}," rafId ",[92,3420,122],{"class":200},[92,3422,3423],{"class":190}," 0\n",[92,3425,3427,3429,3432,3434],{"class":94,"line":3426},51,[92,3428,3415],{"class":200},[92,3430,3431],{"class":98}," start ",[92,3433,122],{"class":200},[92,3435,3423],{"class":190},[92,3437,3439,3441,3444,3446],{"class":94,"line":3438},52,[92,3440,3415],{"class":200},[92,3442,3443],{"class":98}," tSamples ",[92,3445,122],{"class":200},[92,3447,3448],{"class":98}," []\n",[92,3450,3452,3454,3457,3459],{"class":94,"line":3451},53,[92,3453,3415],{"class":200},[92,3455,3456],{"class":98}," lSamples ",[92,3458,122],{"class":200},[92,3460,3448],{"class":98},[92,3462,3464],{"class":94,"line":3463},54,[92,3465,242],{"emptyLinePlaceholder":241},[92,3467,3469,3472,3475,3477,3481],{"class":94,"line":3468},55,[92,3470,3471],{"class":200},"function",[92,3473,3474],{"class":118}," tick",[92,3476,866],{"class":98},[92,3478,3480],{"class":3479},"s4XuR","now",[92,3482,3483],{"class":98},") {\n",[92,3485,3487,3490,3493,3496,3499,3501],{"class":94,"line":3486},56,[92,3488,3489],{"class":200},"  if",[92,3491,3492],{"class":98}," (",[92,3494,3495],{"class":200},"!",[92,3497,3498],{"class":98},"start) start ",[92,3500,122],{"class":200},[92,3502,3503],{"class":98}," now\n",[92,3505,3507,3510,3513,3515,3518,3521,3524,3526],{"class":94,"line":3506},57,[92,3508,3509],{"class":200},"  const",[92,3511,3512],{"class":190}," phase",[92,3514,2503],{"class":200},[92,3516,3517],{"class":98}," (now ",[92,3519,3520],{"class":200},"-",[92,3522,3523],{"class":98}," start) ",[92,3525,1393],{"class":200},[92,3527,3528],{"class":190}," 420\n",[92,3530,3532,3534,3537,3539,3542,3545,3548,3551,3554,3557],{"class":94,"line":3531},58,[92,3533,3509],{"class":200},[92,3535,3536],{"class":190}," value",[92,3538,2503],{"class":200},[92,3540,3541],{"class":98}," Math.",[92,3543,3544],{"class":118},"sin",[92,3546,3547],{"class":98},"(phase) ",[92,3549,3550],{"class":200},"*",[92,3552,3553],{"class":190}," 100",[92,3555,3556],{"class":200}," +",[92,3558,3559],{"class":190}," 100\n",[92,3561,3563],{"class":94,"line":3562},59,[92,3564,242],{"emptyLinePlaceholder":241},[92,3566,3568,3570,3573,3575,3578,3580],{"class":94,"line":3567},60,[92,3569,3509],{"class":200},[92,3571,3572],{"class":190}," t0",[92,3574,2503],{"class":200},[92,3576,3577],{"class":98}," performance.",[92,3579,3480],{"class":118},[92,3581,3582],{"class":98},"()\n",[92,3584,3586,3589,3591],{"class":94,"line":3585},61,[92,3587,3588],{"class":98},"  x.value ",[92,3590,122],{"class":200},[92,3592,3593],{"class":98}," value\n",[92,3595,3597,3599,3602,3604,3606,3608,3611,3613],{"class":94,"line":3596},62,[92,3598,3509],{"class":200},[92,3600,3601],{"class":190}," tCost",[92,3603,2503],{"class":200},[92,3605,3577],{"class":98},[92,3607,3480],{"class":118},[92,3609,3610],{"class":98},"() ",[92,3612,3520],{"class":200},[92,3614,3615],{"class":98}," t0\n",[92,3617,3619,3622,3625],{"class":94,"line":3618},63,[92,3620,3621],{"class":98},"  tSamples.",[92,3623,3624],{"class":118},"push",[92,3626,3627],{"class":98},"(tCost)\n",[92,3629,3631,3633,3636,3639,3642,3645,3648,3651],{"class":94,"line":3630},64,[92,3632,3489],{"class":200},[92,3634,3635],{"class":98}," (tSamples.",[92,3637,3638],{"class":190},"length",[92,3640,3641],{"class":200}," >",[92,3643,3644],{"class":190}," 20",[92,3646,3647],{"class":98},") tSamples.",[92,3649,3650],{"class":118},"shift",[92,3652,3582],{"class":98},[92,3654,3656,3659,3661,3663,3666,3669,3672,3675,3677,3680,3683,3686,3689,3692,3695,3698,3700,3702,3704,3707,3709,3711,3713,3715,3717,3719],{"class":94,"line":3655},65,[92,3657,3658],{"class":98},"  transformMs.value ",[92,3660,122],{"class":200},[92,3662,3541],{"class":98},[92,3664,3665],{"class":118},"round",[92,3667,3668],{"class":98},"((tSamples.",[92,3670,3671],{"class":118},"reduce",[92,3673,3674],{"class":98},"((",[92,3676,51],{"class":3479},[92,3678,3679],{"class":98},", ",[92,3681,3682],{"class":3479},"b",[92,3684,3685],{"class":98},") ",[92,3687,3688],{"class":200},"=>",[92,3690,3691],{"class":98}," a ",[92,3693,3694],{"class":200},"+",[92,3696,3697],{"class":98}," b, ",[92,3699,869],{"class":190},[92,3701,3685],{"class":98},[92,3703,1393],{"class":200},[92,3705,3706],{"class":98}," tSamples.",[92,3708,3638],{"class":190},[92,3710,3685],{"class":98},[92,3712,3550],{"class":200},[92,3714,3553],{"class":190},[92,3716,3685],{"class":98},[92,3718,1393],{"class":200},[92,3720,3559],{"class":190},[92,3722,3724],{"class":94,"line":3723},66,[92,3725,242],{"emptyLinePlaceholder":241},[92,3727,3729,3732,3735,3737],{"class":94,"line":3728},67,[92,3730,3731],{"class":118},"  nextTick",[92,3733,3734],{"class":98},"(() ",[92,3736,3688],{"class":200},[92,3738,185],{"class":98},[92,3740,3742,3745,3748,3750,3752,3754],{"class":94,"line":3741},68,[92,3743,3744],{"class":200},"    const",[92,3746,3747],{"class":190}," l0",[92,3749,2503],{"class":200},[92,3751,3577],{"class":98},[92,3753,3480],{"class":118},[92,3755,3582],{"class":98},[92,3757,3759,3761,3763,3765],{"class":94,"line":3758},69,[92,3760,3744],{"class":200},[92,3762,2500],{"class":190},[92,3764,2503],{"class":200},[92,3766,3767],{"class":98}," leftBall.value\n",[92,3769,3771,3774],{"class":94,"line":3770},70,[92,3772,3773],{"class":200},"    if",[92,3775,3776],{"class":98}," (el) {\n",[92,3778,3780,3783],{"class":94,"line":3779},71,[92,3781,3782],{"class":200},"      void",[92,3784,3785],{"class":98}," el.offsetLeft\n",[92,3787,3789,3791],{"class":94,"line":3788},72,[92,3790,3782],{"class":200},[92,3792,3793],{"class":98}," el.offsetWidth\n",[92,3795,3797,3799,3802,3805],{"class":94,"line":3796},73,[92,3798,3782],{"class":200},[92,3800,3801],{"class":98}," el.",[92,3803,3804],{"class":118},"getBoundingClientRect",[92,3806,3582],{"class":98},[92,3808,3810],{"class":94,"line":3809},74,[92,3811,3812],{"class":98},"    }\n",[92,3814,3816,3818,3821,3823,3825,3827,3829,3831],{"class":94,"line":3815},75,[92,3817,3744],{"class":200},[92,3819,3820],{"class":190}," lCost",[92,3822,2503],{"class":200},[92,3824,3577],{"class":98},[92,3826,3480],{"class":118},[92,3828,3610],{"class":98},[92,3830,3520],{"class":200},[92,3832,3833],{"class":98}," l0\n",[92,3835,3837,3840,3842],{"class":94,"line":3836},76,[92,3838,3839],{"class":98},"    lSamples.",[92,3841,3624],{"class":118},[92,3843,3844],{"class":98},"(lCost)\n",[92,3846,3848,3850,3853,3855,3857,3859,3862,3864],{"class":94,"line":3847},77,[92,3849,3773],{"class":200},[92,3851,3852],{"class":98}," (lSamples.",[92,3854,3638],{"class":190},[92,3856,3641],{"class":200},[92,3858,3644],{"class":190},[92,3860,3861],{"class":98},") lSamples.",[92,3863,3650],{"class":118},[92,3865,3582],{"class":98},[92,3867,3869,3872,3874,3876,3878,3881,3883,3885,3887,3889,3891,3893,3895,3897,3899,3901,3903,3905,3907,3910,3912,3914,3916,3919,3921,3923],{"class":94,"line":3868},78,[92,3870,3871],{"class":98},"    layoutMs.value ",[92,3873,122],{"class":200},[92,3875,3541],{"class":98},[92,3877,3665],{"class":118},[92,3879,3880],{"class":98},"((lSamples.",[92,3882,3671],{"class":118},[92,3884,3674],{"class":98},[92,3886,51],{"class":3479},[92,3888,3679],{"class":98},[92,3890,3682],{"class":3479},[92,3892,3685],{"class":98},[92,3894,3688],{"class":200},[92,3896,3691],{"class":98},[92,3898,3694],{"class":200},[92,3900,3697],{"class":98},[92,3902,869],{"class":190},[92,3904,3685],{"class":98},[92,3906,1393],{"class":200},[92,3908,3909],{"class":98}," lSamples.",[92,3911,3638],{"class":190},[92,3913,3685],{"class":98},[92,3915,3550],{"class":200},[92,3917,3918],{"class":190}," 10",[92,3920,3685],{"class":98},[92,3922,1393],{"class":200},[92,3924,3925],{"class":190}," 10\n",[92,3927,3929],{"class":94,"line":3928},79,[92,3930,242],{"emptyLinePlaceholder":241},[92,3932,3934,3936],{"class":94,"line":3933},80,[92,3935,3773],{"class":200},[92,3937,3938],{"class":98}," (running.value) {\n",[92,3940,3942,3945,3947,3950],{"class":94,"line":3941},81,[92,3943,3944],{"class":98},"      rafId ",[92,3946,122],{"class":200},[92,3948,3949],{"class":118}," requestAnimationFrame",[92,3951,3952],{"class":98},"(tick)\n",[92,3954,3956],{"class":94,"line":3955},82,[92,3957,3812],{"class":98},[92,3959,3961],{"class":94,"line":3960},83,[92,3962,3963],{"class":98},"  })\n",[92,3965,3967],{"class":94,"line":3966},84,[92,3968,235],{"class":98},[92,3970,3972],{"class":94,"line":3971},85,[92,3973,242],{"emptyLinePlaceholder":241},[92,3975,3977,3979,3982],{"class":94,"line":3976},86,[92,3978,3471],{"class":200},[92,3980,3981],{"class":118}," resetAnim",[92,3983,3984],{"class":98},"() {\n",[92,3986,3988,3991,3993],{"class":94,"line":3987},87,[92,3989,3990],{"class":98},"  start ",[92,3992,122],{"class":200},[92,3994,3423],{"class":190},[92,3996,3998,4000,4002],{"class":94,"line":3997},88,[92,3999,3588],{"class":98},[92,4001,122],{"class":200},[92,4003,3423],{"class":190},[92,4005,4007,4010,4012],{"class":94,"line":4006},89,[92,4008,4009],{"class":98},"  tSamples ",[92,4011,122],{"class":200},[92,4013,3448],{"class":98},[92,4015,4017,4020,4022],{"class":94,"line":4016},90,[92,4018,4019],{"class":98},"  lSamples ",[92,4021,122],{"class":200},[92,4023,3448],{"class":98},[92,4025,4027,4029,4031],{"class":94,"line":4026},91,[92,4028,3658],{"class":98},[92,4030,122],{"class":200},[92,4032,3423],{"class":190},[92,4034,4036,4039,4041],{"class":94,"line":4035},92,[92,4037,4038],{"class":98},"  layoutMs.value ",[92,4040,122],{"class":200},[92,4042,3423],{"class":190},[92,4044,4046],{"class":94,"line":4045},93,[92,4047,235],{"class":98},[92,4049,4051],{"class":94,"line":4050},94,[92,4052,242],{"emptyLinePlaceholder":241},[92,4054,4056,4058,4061],{"class":94,"line":4055},95,[92,4057,3471],{"class":200},[92,4059,4060],{"class":118}," toggle",[92,4062,3984],{"class":98},[92,4064,4066,4069,4071,4074],{"class":94,"line":4065},96,[92,4067,4068],{"class":98},"  running.value ",[92,4070,122],{"class":200},[92,4072,4073],{"class":200}," !",[92,4075,4076],{"class":98},"running.value\n",[92,4078,4080,4082],{"class":94,"line":4079},97,[92,4081,3489],{"class":200},[92,4083,3938],{"class":98},[92,4085,4087,4090],{"class":94,"line":4086},98,[92,4088,4089],{"class":118},"    resetAnim",[92,4091,3582],{"class":98},[92,4093,4095,4098,4100,4102],{"class":94,"line":4094},99,[92,4096,4097],{"class":98},"    rafId ",[92,4099,122],{"class":200},[92,4101,3949],{"class":118},[92,4103,3952],{"class":98},[92,4105,4107,4110,4113],{"class":94,"line":4106},100,[92,4108,4109],{"class":98},"  } ",[92,4111,4112],{"class":200},"else",[92,4114,185],{"class":98},[92,4116,4118,4121],{"class":94,"line":4117},101,[92,4119,4120],{"class":118},"    cancelAnimationFrame",[92,4122,4123],{"class":98},"(rafId)\n",[92,4125,4127],{"class":94,"line":4126},102,[92,4128,4129],{"class":98},"  }\n",[92,4131,4133],{"class":94,"line":4132},103,[92,4134,235],{"class":98},[92,4136,4138],{"class":94,"line":4137},104,[92,4139,242],{"emptyLinePlaceholder":241},[92,4141,4143,4145,4148],{"class":94,"line":4142},105,[92,4144,3471],{"class":200},[92,4146,4147],{"class":118}," reset",[92,4149,3984],{"class":98},[92,4151,4153,4155,4157],{"class":94,"line":4152},106,[92,4154,4068],{"class":98},[92,4156,122],{"class":200},[92,4158,4159],{"class":190}," false\n",[92,4161,4163,4166],{"class":94,"line":4162},107,[92,4164,4165],{"class":118},"  cancelAnimationFrame",[92,4167,4123],{"class":98},[92,4169,4171,4174],{"class":94,"line":4170},108,[92,4172,4173],{"class":118},"  resetAnim",[92,4175,3582],{"class":98},[92,4177,4179],{"class":94,"line":4178},109,[92,4180,235],{"class":98},[92,4182,4184],{"class":94,"line":4183},110,[92,4185,242],{"emptyLinePlaceholder":241},[92,4187,4189,4192,4194,4196,4199],{"class":94,"line":4188},111,[92,4190,4191],{"class":118},"onUnmounted",[92,4193,3734],{"class":98},[92,4195,3688],{"class":200},[92,4197,4198],{"class":118}," cancelAnimationFrame",[92,4200,4201],{"class":98},"(rafId))\n",[92,4203,4205,4207,4209],{"class":94,"line":4204},112,[92,4206,166],{"class":98},[92,4208,3287],{"class":102},[92,4210,106],{"class":98},[92,4212,4214],{"class":94,"line":4213},113,[92,4215,242],{"emptyLinePlaceholder":241},[92,4217,4219,4221,4223,4226],{"class":94,"line":4218},114,[92,4220,99],{"class":98},[92,4222,1425],{"class":102},[92,4224,4225],{"class":118}," scoped",[92,4227,106],{"class":98},[92,4229,4231,4234],{"class":94,"line":4230},115,[92,4232,4233],{"class":118},".wrap",[92,4235,185],{"class":98},[92,4237,4239,4242,4244,4246,4248],{"class":94,"line":4238},116,[92,4240,4241],{"class":190},"  padding",[92,4243,194],{"class":98},[92,4245,1868],{"class":190},[92,4247,201],{"class":200},[92,4249,204],{"class":98},[92,4251,4253,4256,4258,4261,4263,4266],{"class":94,"line":4252},117,[92,4254,4255],{"class":190},"  font-family",[92,4257,194],{"class":98},[92,4259,4260],{"class":190},"system-ui",[92,4262,3679],{"class":98},[92,4264,4265],{"class":190},"sans-serif",[92,4267,204],{"class":98},[92,4269,4271],{"class":94,"line":4270},118,[92,4272,235],{"class":98},[92,4274,4276],{"class":94,"line":4275},119,[92,4277,242],{"emptyLinePlaceholder":241},[92,4279,4281,4284],{"class":94,"line":4280},120,[92,4282,4283],{"class":118},".tip",[92,4285,185],{"class":98},[92,4287,4289,4292,4294,4296,4299,4302,4304],{"class":94,"line":4288},121,[92,4290,4291],{"class":190},"  margin",[92,4293,194],{"class":98},[92,4295,869],{"class":190},[92,4297,4298],{"class":190}," 0",[92,4300,4301],{"class":190}," 14",[92,4303,201],{"class":200},[92,4305,204],{"class":98},[92,4307,4309,4311,4313,4316],{"class":94,"line":4308},122,[92,4310,1477],{"class":190},[92,4312,194],{"class":98},[92,4314,4315],{"class":190},"#64748b",[92,4317,204],{"class":98},[92,4319,4321,4323,4325,4328,4331],{"class":94,"line":4320},123,[92,4322,1837],{"class":190},[92,4324,194],{"class":98},[92,4326,4327],{"class":190},"0.85",[92,4329,4330],{"class":200},"rem",[92,4332,204],{"class":98},[92,4334,4336,4339,4341,4344],{"class":94,"line":4335},124,[92,4337,4338],{"class":190},"  line-height",[92,4340,194],{"class":98},[92,4342,4343],{"class":190},"1.55",[92,4345,204],{"class":98},[92,4347,4349],{"class":94,"line":4348},125,[92,4350,235],{"class":98},[92,4352,4354],{"class":94,"line":4353},126,[92,4355,242],{"emptyLinePlaceholder":241},[92,4357,4359,4361,4364],{"class":94,"line":4358},127,[92,4360,4283],{"class":118},[92,4362,4363],{"class":102}," code",[92,4365,185],{"class":98},[92,4367,4369,4371,4373,4376,4378],{"class":94,"line":4368},128,[92,4370,1837],{"class":190},[92,4372,194],{"class":98},[92,4374,4375],{"class":190},"0.8",[92,4377,1034],{"class":200},[92,4379,204],{"class":98},[92,4381,4383,4385,4387,4390,4392,4395,4397],{"class":94,"line":4382},129,[92,4384,4241],{"class":190},[92,4386,194],{"class":98},[92,4388,4389],{"class":190},"1",[92,4391,201],{"class":200},[92,4393,4394],{"class":190}," 4",[92,4396,201],{"class":200},[92,4398,204],{"class":98},[92,4400,4402,4405,4407,4410,4412],{"class":94,"line":4401},130,[92,4403,4404],{"class":190},"  border-radius",[92,4406,194],{"class":98},[92,4408,4409],{"class":190},"4",[92,4411,201],{"class":200},[92,4413,204],{"class":98},[92,4415,4417,4420,4422,4425],{"class":94,"line":4416},131,[92,4418,4419],{"class":190},"  background",[92,4421,194],{"class":98},[92,4423,4424],{"class":190},"#e2e8f0",[92,4426,204],{"class":98},[92,4428,4430],{"class":94,"line":4429},132,[92,4431,235],{"class":98},[92,4433,4435],{"class":94,"line":4434},133,[92,4436,242],{"emptyLinePlaceholder":241},[92,4438,4440,4443],{"class":94,"line":4439},134,[92,4441,4442],{"class":118},".compare",[92,4444,185],{"class":98},[92,4446,4448,4450,4452,4455],{"class":94,"line":4447},135,[92,4449,1742],{"class":190},[92,4451,194],{"class":98},[92,4453,4454],{"class":190},"grid",[92,4456,204],{"class":98},[92,4458,4460,4463,4465,4468,4470],{"class":94,"line":4459},136,[92,4461,4462],{"class":190},"  gap",[92,4464,194],{"class":98},[92,4466,4467],{"class":190},"12",[92,4469,201],{"class":200},[92,4471,204],{"class":98},[92,4473,4475],{"class":94,"line":4474},137,[92,4476,235],{"class":98},[92,4478,4480],{"class":94,"line":4479},138,[92,4481,242],{"emptyLinePlaceholder":241},[92,4483,4485,4488,4490,4493,4495,4498,4500],{"class":94,"line":4484},139,[92,4486,4487],{"class":200},"@media",[92,4489,3492],{"class":98},[92,4491,4492],{"class":190},"min-width",[92,4494,194],{"class":98},[92,4496,4497],{"class":190},"520",[92,4499,201],{"class":200},[92,4501,3483],{"class":98},[92,4503,4505,4508],{"class":94,"line":4504},140,[92,4506,4507],{"class":118},"  .compare",[92,4509,185],{"class":98},[92,4511,4513,4516,4518,4520,4523,4526,4528],{"class":94,"line":4512},141,[92,4514,4515],{"class":190},"    grid-template-columns",[92,4517,194],{"class":98},[92,4519,4389],{"class":190},[92,4521,4522],{"class":200},"fr",[92,4524,4525],{"class":190}," 1",[92,4527,4522],{"class":200},[92,4529,204],{"class":98},[92,4531,4533],{"class":94,"line":4532},142,[92,4534,4129],{"class":98},[92,4536,4538],{"class":94,"line":4537},143,[92,4539,235],{"class":98},[92,4541,4543],{"class":94,"line":4542},144,[92,4544,242],{"emptyLinePlaceholder":241},[92,4546,4548,4551],{"class":94,"line":4547},145,[92,4549,4550],{"class":118},".col",[92,4552,185],{"class":98},[92,4554,4556,4558,4560,4562,4564],{"class":94,"line":4555},146,[92,4557,4241],{"class":190},[92,4559,194],{"class":98},[92,4561,731],{"class":190},[92,4563,201],{"class":200},[92,4565,204],{"class":98},[92,4567,4569,4571,4573,4575,4577],{"class":94,"line":4568},147,[92,4570,4404],{"class":190},[92,4572,194],{"class":98},[92,4574,731],{"class":190},[92,4576,201],{"class":200},[92,4578,204],{"class":98},[92,4580,4582,4584,4586,4589],{"class":94,"line":4581},148,[92,4583,4419],{"class":190},[92,4585,194],{"class":98},[92,4587,4588],{"class":190},"#f8fafc",[92,4590,204],{"class":98},[92,4592,4594,4596,4598,4600,4602,4604,4607],{"class":94,"line":4593},149,[92,4595,627],{"class":190},[92,4597,194],{"class":98},[92,4599,4389],{"class":190},[92,4601,201],{"class":200},[92,4603,637],{"class":190},[92,4605,4606],{"class":190}," #e2e8f0",[92,4608,204],{"class":98},[92,4610,4612],{"class":94,"line":4611},150,[92,4613,235],{"class":98},[92,4615,4617],{"class":94,"line":4616},151,[92,4618,242],{"emptyLinePlaceholder":241},[92,4620,4622,4625],{"class":94,"line":4621},152,[92,4623,4624],{"class":118},".col-head",[92,4626,185],{"class":98},[92,4628,4630,4632,4634,4637],{"class":94,"line":4629},153,[92,4631,1742],{"class":190},[92,4633,194],{"class":98},[92,4635,4636],{"class":190},"flex",[92,4638,204],{"class":98},[92,4640,4642,4645,4647,4650],{"class":94,"line":4641},154,[92,4643,4644],{"class":190},"  align-items",[92,4646,194],{"class":98},[92,4648,4649],{"class":190},"center",[92,4651,204],{"class":98},[92,4653,4655,4658,4660,4663],{"class":94,"line":4654},155,[92,4656,4657],{"class":190},"  justify-content",[92,4659,194],{"class":98},[92,4661,4662],{"class":190},"space-between",[92,4664,204],{"class":98},[92,4666,4668,4671,4673,4676,4678],{"class":94,"line":4667},156,[92,4669,4670],{"class":190},"  margin-bottom",[92,4672,194],{"class":98},[92,4674,4675],{"class":190},"8",[92,4677,201],{"class":200},[92,4679,204],{"class":98},[92,4681,4683,4685,4687,4690,4692],{"class":94,"line":4682},157,[92,4684,4462],{"class":190},[92,4686,194],{"class":98},[92,4688,4689],{"class":190},"6",[92,4691,201],{"class":200},[92,4693,204],{"class":98},[92,4695,4697],{"class":94,"line":4696},158,[92,4698,235],{"class":98},[92,4700,4702],{"class":94,"line":4701},159,[92,4703,242],{"emptyLinePlaceholder":241},[92,4705,4707,4710],{"class":94,"line":4706},160,[92,4708,4709],{"class":118},".tag",[92,4711,185],{"class":98},[92,4713,4715,4717,4719,4722,4724],{"class":94,"line":4714},161,[92,4716,1837],{"class":190},[92,4718,194],{"class":98},[92,4720,4721],{"class":190},"11",[92,4723,201],{"class":200},[92,4725,204],{"class":98},[92,4727,4729,4732,4734,4737],{"class":94,"line":4728},162,[92,4730,4731],{"class":190},"  font-weight",[92,4733,194],{"class":98},[92,4735,4736],{"class":190},"600",[92,4738,204],{"class":98},[92,4740,4742,4744,4746,4749,4751,4754,4756],{"class":94,"line":4741},163,[92,4743,4241],{"class":190},[92,4745,194],{"class":98},[92,4747,4748],{"class":190},"2",[92,4750,201],{"class":200},[92,4752,4753],{"class":190}," 8",[92,4755,201],{"class":200},[92,4757,204],{"class":98},[92,4759,4761,4763,4765,4768,4770],{"class":94,"line":4760},164,[92,4762,4404],{"class":190},[92,4764,194],{"class":98},[92,4766,4767],{"class":190},"999",[92,4769,201],{"class":200},[92,4771,204],{"class":98},[92,4773,4775],{"class":94,"line":4774},165,[92,4776,235],{"class":98},[92,4778,4780],{"class":94,"line":4779},166,[92,4781,242],{"emptyLinePlaceholder":241},[92,4783,4785,4788],{"class":94,"line":4784},167,[92,4786,4787],{"class":118},".tag.good",[92,4789,185],{"class":98},[92,4791,4793,4795,4797,4800],{"class":94,"line":4792},168,[92,4794,4419],{"class":190},[92,4796,194],{"class":98},[92,4798,4799],{"class":190},"#dcfce7",[92,4801,204],{"class":98},[92,4803,4805,4807,4809,4812],{"class":94,"line":4804},169,[92,4806,1477],{"class":190},[92,4808,194],{"class":98},[92,4810,4811],{"class":190},"#166534",[92,4813,204],{"class":98},[92,4815,4817],{"class":94,"line":4816},170,[92,4818,235],{"class":98},[92,4820,4822],{"class":94,"line":4821},171,[92,4823,242],{"emptyLinePlaceholder":241},[92,4825,4827,4830],{"class":94,"line":4826},172,[92,4828,4829],{"class":118},".tag.warn",[92,4831,185],{"class":98},[92,4833,4835,4837,4839,4842],{"class":94,"line":4834},173,[92,4836,4419],{"class":190},[92,4838,194],{"class":98},[92,4840,4841],{"class":190},"#fef3c7",[92,4843,204],{"class":98},[92,4845,4847,4849,4851,4854],{"class":94,"line":4846},174,[92,4848,1477],{"class":190},[92,4850,194],{"class":98},[92,4852,4853],{"class":190},"#92400e",[92,4855,204],{"class":98},[92,4857,4859],{"class":94,"line":4858},175,[92,4860,235],{"class":98},[92,4862,4864],{"class":94,"line":4863},176,[92,4865,242],{"emptyLinePlaceholder":241},[92,4867,4869,4872],{"class":94,"line":4868},177,[92,4870,4871],{"class":118},".metric",[92,4873,185],{"class":98},[92,4875,4877,4879,4881,4883,4885],{"class":94,"line":4876},178,[92,4878,1837],{"class":190},[92,4880,194],{"class":98},[92,4882,4721],{"class":190},[92,4884,201],{"class":200},[92,4886,204],{"class":98},[92,4888,4890,4892,4894,4896],{"class":94,"line":4889},179,[92,4891,4731],{"class":190},[92,4893,194],{"class":98},[92,4895,4736],{"class":190},[92,4897,204],{"class":98},[92,4899,4901,4904,4906,4909],{"class":94,"line":4900},180,[92,4902,4903],{"class":190},"  font-variant-numeric",[92,4905,194],{"class":98},[92,4907,4908],{"class":190},"tabular-nums",[92,4910,204],{"class":98},[92,4912,4914,4916,4918,4920],{"class":94,"line":4913},181,[92,4915,1477],{"class":190},[92,4917,194],{"class":98},[92,4919,4811],{"class":190},[92,4921,204],{"class":98},[92,4923,4925],{"class":94,"line":4924},182,[92,4926,235],{"class":98},[92,4928,4930],{"class":94,"line":4929},183,[92,4931,242],{"emptyLinePlaceholder":241},[92,4933,4935,4938],{"class":94,"line":4934},184,[92,4936,4937],{"class":118},".metric.warn-m",[92,4939,185],{"class":98},[92,4941,4943,4945,4947,4950],{"class":94,"line":4942},185,[92,4944,1477],{"class":190},[92,4946,194],{"class":98},[92,4948,4949],{"class":190},"#b45309",[92,4951,204],{"class":98},[92,4953,4955],{"class":94,"line":4954},186,[92,4956,235],{"class":98},[92,4958,4960],{"class":94,"line":4959},187,[92,4961,242],{"emptyLinePlaceholder":241},[92,4963,4965,4968],{"class":94,"line":4964},188,[92,4966,4967],{"class":118},".track",[92,4969,185],{"class":98},[92,4971,4973,4975,4977,4979],{"class":94,"line":4972},189,[92,4974,577],{"class":190},[92,4976,194],{"class":98},[92,4978,397],{"class":190},[92,4980,204],{"class":98},[92,4982,4984,4986,4988,4991,4993],{"class":94,"line":4983},190,[92,4985,209],{"class":190},[92,4987,194],{"class":98},[92,4989,4990],{"class":190},"44",[92,4992,201],{"class":200},[92,4994,204],{"class":98},[92,4996,4998,5000,5002,5004,5006],{"class":94,"line":4997},191,[92,4999,4404],{"class":190},[92,5001,194],{"class":98},[92,5003,4675],{"class":190},[92,5005,201],{"class":200},[92,5007,204],{"class":98},[92,5009,5011,5013,5015,5017],{"class":94,"line":5010},192,[92,5012,4419],{"class":190},[92,5014,194],{"class":98},[92,5016,4424],{"class":190},[92,5018,204],{"class":98},[92,5020,5022,5025,5027,5030],{"class":94,"line":5021},193,[92,5023,5024],{"class":190},"  overflow",[92,5026,194],{"class":98},[92,5028,5029],{"class":190},"hidden",[92,5031,204],{"class":98},[92,5033,5035],{"class":94,"line":5034},194,[92,5036,235],{"class":98},[92,5038,5040],{"class":94,"line":5039},195,[92,5041,242],{"emptyLinePlaceholder":241},[92,5043,5045,5048],{"class":94,"line":5044},196,[92,5046,5047],{"class":118},".ball",[92,5049,185],{"class":98},[92,5051,5053,5055,5057,5059],{"class":94,"line":5052},197,[92,5054,577],{"class":190},[92,5056,194],{"class":98},[92,5058,425],{"class":190},[92,5060,204],{"class":98},[92,5062,5064,5066,5068,5070,5072],{"class":94,"line":5063},198,[92,5065,741],{"class":190},[92,5067,194],{"class":98},[92,5069,731],{"class":190},[92,5071,201],{"class":200},[92,5073,204],{"class":98},[92,5075,5077,5079,5081,5083],{"class":94,"line":5076},199,[92,5078,726],{"class":190},[92,5080,194],{"class":98},[92,5082,869],{"class":190},[92,5084,204],{"class":98},[92,5086,5088,5090,5092,5095,5097],{"class":94,"line":5087},200,[92,5089,191],{"class":190},[92,5091,194],{"class":98},[92,5093,5094],{"class":190},"24",[92,5096,201],{"class":200},[92,5098,204],{"class":98},[92,5100,5102,5104,5106,5108,5110],{"class":94,"line":5101},201,[92,5103,209],{"class":190},[92,5105,194],{"class":98},[92,5107,5094],{"class":190},[92,5109,201],{"class":200},[92,5111,204],{"class":98},[92,5113,5115,5117,5119,5121,5123],{"class":94,"line":5114},202,[92,5116,4404],{"class":190},[92,5118,194],{"class":98},[92,5120,260],{"class":190},[92,5122,263],{"class":200},[92,5124,204],{"class":98},[92,5126,5128,5130,5132,5135],{"class":94,"line":5127},203,[92,5129,4419],{"class":190},[92,5131,194],{"class":98},[92,5133,5134],{"class":190},"#6366f1",[92,5136,204],{"class":98},[92,5138,5140,5143,5146,5148],{"class":94,"line":5139},204,[92,5141,5142],{"class":190},"  will-change",[92,5144,5145],{"class":98},": transform, ",[92,5147,2693],{"class":190},[92,5149,204],{"class":98},[92,5151,5153],{"class":94,"line":5152},205,[92,5154,235],{"class":98},[92,5156,5158],{"class":94,"line":5157},206,[92,5159,242],{"emptyLinePlaceholder":241},[92,5161,5163,5166],{"class":94,"line":5162},207,[92,5164,5165],{"class":118},".note",[92,5167,185],{"class":98},[92,5169,5171,5173,5175,5177,5179,5181,5183],{"class":94,"line":5170},208,[92,5172,4291],{"class":190},[92,5174,194],{"class":98},[92,5176,4675],{"class":190},[92,5178,201],{"class":200},[92,5180,4298],{"class":190},[92,5182,4298],{"class":190},[92,5184,204],{"class":98},[92,5186,5188,5190,5192,5194,5196],{"class":94,"line":5187},209,[92,5189,1837],{"class":190},[92,5191,194],{"class":98},[92,5193,4721],{"class":190},[92,5195,201],{"class":200},[92,5197,204],{"class":98},[92,5199,5201,5203,5205,5208],{"class":94,"line":5200},210,[92,5202,1477],{"class":190},[92,5204,194],{"class":98},[92,5206,5207],{"class":190},"#94a3b8",[92,5209,204],{"class":98},[92,5211,5213],{"class":94,"line":5212},211,[92,5214,235],{"class":98},[92,5216,5218],{"class":94,"line":5217},212,[92,5219,242],{"emptyLinePlaceholder":241},[92,5221,5223,5226],{"class":94,"line":5222},213,[92,5224,5225],{"class":118},".actions",[92,5227,185],{"class":98},[92,5229,5231,5233,5235,5237],{"class":94,"line":5230},214,[92,5232,1742],{"class":190},[92,5234,194],{"class":98},[92,5236,4636],{"class":190},[92,5238,204],{"class":98},[92,5240,5242,5244,5246,5248,5250],{"class":94,"line":5241},215,[92,5243,4462],{"class":190},[92,5245,194],{"class":98},[92,5247,4675],{"class":190},[92,5249,201],{"class":200},[92,5251,204],{"class":98},[92,5253,5255,5258,5260,5263,5265],{"class":94,"line":5254},216,[92,5256,5257],{"class":190},"  margin-top",[92,5259,194],{"class":98},[92,5261,5262],{"class":190},"14",[92,5264,201],{"class":200},[92,5266,204],{"class":98},[92,5268,5270],{"class":94,"line":5269},217,[92,5271,235],{"class":98},[92,5273,5275],{"class":94,"line":5274},218,[92,5276,242],{"emptyLinePlaceholder":241},[92,5278,5280,5283],{"class":94,"line":5279},219,[92,5281,5282],{"class":118},".btn",[92,5284,185],{"class":98},[92,5286,5288,5290,5292,5294,5296,5299,5301],{"class":94,"line":5287},220,[92,5289,4241],{"class":190},[92,5291,194],{"class":98},[92,5293,4675],{"class":190},[92,5295,201],{"class":200},[92,5297,5298],{"class":190}," 16",[92,5300,201],{"class":200},[92,5302,204],{"class":98},[92,5304,5306,5308,5310,5312],{"class":94,"line":5305},221,[92,5307,627],{"class":190},[92,5309,194],{"class":98},[92,5311,805],{"class":190},[92,5313,204],{"class":98},[92,5315,5317,5319,5321,5323,5325],{"class":94,"line":5316},222,[92,5318,4404],{"class":190},[92,5320,194],{"class":98},[92,5322,4675],{"class":190},[92,5324,201],{"class":200},[92,5326,204],{"class":98},[92,5328,5330,5332,5334,5336],{"class":94,"line":5329},223,[92,5331,4419],{"class":190},[92,5333,194],{"class":98},[92,5335,5134],{"class":190},[92,5337,204],{"class":98},[92,5339,5341,5343,5345,5348],{"class":94,"line":5340},224,[92,5342,1477],{"class":190},[92,5344,194],{"class":98},[92,5346,5347],{"class":190},"white",[92,5349,204],{"class":98},[92,5351,5353,5355,5357,5359],{"class":94,"line":5352},225,[92,5354,4731],{"class":190},[92,5356,194],{"class":98},[92,5358,4736],{"class":190},[92,5360,204],{"class":98},[92,5362,5364,5367,5369,5372],{"class":94,"line":5363},226,[92,5365,5366],{"class":190},"  cursor",[92,5368,194],{"class":98},[92,5370,5371],{"class":190},"pointer",[92,5373,204],{"class":98},[92,5375,5377,5379,5381,5384,5386],{"class":94,"line":5376},227,[92,5378,1837],{"class":190},[92,5380,194],{"class":98},[92,5382,5383],{"class":190},"13",[92,5385,201],{"class":200},[92,5387,204],{"class":98},[92,5389,5391],{"class":94,"line":5390},228,[92,5392,235],{"class":98},[92,5394,5396],{"class":94,"line":5395},229,[92,5397,242],{"emptyLinePlaceholder":241},[92,5399,5401,5404],{"class":94,"line":5400},230,[92,5402,5403],{"class":118},".btn.active",[92,5405,185],{"class":98},[92,5407,5409,5411,5413,5416],{"class":94,"line":5408},231,[92,5410,4419],{"class":190},[92,5412,194],{"class":98},[92,5414,5415],{"class":190},"#4f46e5",[92,5417,204],{"class":98},[92,5419,5421],{"class":94,"line":5420},232,[92,5422,235],{"class":98},[92,5424,5426],{"class":94,"line":5425},233,[92,5427,242],{"emptyLinePlaceholder":241},[92,5429,5431,5434],{"class":94,"line":5430},234,[92,5432,5433],{"class":118},".btn.ghost",[92,5435,185],{"class":98},[92,5437,5439,5441,5443,5445],{"class":94,"line":5438},235,[92,5440,4419],{"class":190},[92,5442,194],{"class":98},[92,5444,4424],{"class":190},[92,5446,204],{"class":98},[92,5448,5450,5452,5454,5457],{"class":94,"line":5449},236,[92,5451,1477],{"class":190},[92,5453,194],{"class":98},[92,5455,5456],{"class":190},"#334155",[92,5458,204],{"class":98},[92,5460,5462],{"class":94,"line":5461},237,[92,5463,235],{"class":98},[92,5465,5467,5469,5471],{"class":94,"line":5466},238,[92,5468,166],{"class":98},[92,5470,1425],{"class":102},[92,5472,106],{"class":98},[78,5474,1381],{"id":1381},[342,5476,5477,5485,5490],{},[345,5478,5479,5481,5482,57],{},[24,5480,2619],{}," = 重算布局树，代价高；浏览器会批量，但 ",[24,5483,5484],{},"读布局属性会强制同步",[345,5486,5487,5489],{},[24,5488,2581],{}," = 重算绘制及之后；reflow 必然连带 repaint。",[345,5491,5492,5494,5495,5497,5498,394,5500,57],{},[24,5493,798],{}," 主要在合成阶段完成，适合做位移、旋转、缩放动画；位移动画优先 ",[19,5496,798],{},"，慎用 ",[19,5499,2690],{},[19,5501,2693],{},[1425,5503,5504],{},"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":88,"searchDepth":131,"depth":131,"links":5506},[5507,5511,5512,5513],{"id":2425,"depth":109,"text":2426,"children":5508},[5509,5510],{"id":2441,"depth":131,"text":2441},{"id":2457,"depth":131,"text":2458},{"id":2556,"depth":109,"text":2557},{"id":2647,"depth":109,"text":2648},{"id":1381,"depth":109,"text":1381},"frontend","2026-06-26","回流与重绘分别对应布局树与绘制指令的重新计算，以及为何 transform 动画大多不拖累渲染主线程。",{},{"title":2399,"description":5516},"blog\u002Freflow-repaint-transform",[5521,5522,5523],"browser","rendering","performance","9qGt4nC5IYw-1z--ZpE9qqITwfWBE18SKN7ZWLP5isc",{"id":5526,"title":5527,"body":5528,"category":5514,"date":6353,"description":6354,"draft":1440,"extension":1441,"meta":6355,"navigation":241,"path":69,"seo":6356,"stem":6357,"tags":6358,"__hash__":6359},"blog\u002Fblog\u002Fbrowser-rendering-pipeline.md","浏览器是如何渲染页面的？",{"type":8,"value":5529,"toc":6333},[5530,5533,5548,5554,5561,5567,5571,5697,5700,5713,5723,5727,5737,5751,5757,5760,5784,5788,5802,5806,5822,5845,5851,5940,5944,5951,5954,5978,5991,5995,6005,6009,6015,6076,6082,6094,6098,6104,6111,6114,6138,6144,6148,6165,6171,6180,6192,6196,6199,6203,6214,6218,6235,6239,6253,6259,6266,6270,6279,6281,6330],[11,5531,5527],{"id":5532},"浏览器是如何渲染页面的",[15,5534,5535,5536,5538,5539,5542,5543,5547],{},"当网络进程把 HTML 文档下载完成后，渲染进程会收到字节流，并往 ",[24,5537,2676],{}," 的消息队列里塞入一个 ",[24,5540,5541],{},"渲染任务","。主线程在 ",[51,5544,5546],{"href":5545},"\u002Fblog\u002Fjs-event-loop","事件循环"," 里取出该任务后，才开始「把文档变成屏幕上的像素」。",[15,5549,5550],{},[39,5551],{"alt":5552,"src":5553},"HTML 下载完成后渲染任务进入消息队列","\u002Fdemos\u002Fbrowser-rendering\u002Ftask-entry.svg",[15,5555,5556,5557,5560],{},"这不是一次性的函数调用，而是一条 ",[24,5558,5559],{},"流水线","：每个阶段有明确的输入和输出，上一阶段的产出是下一阶段的输入。可以把它想象成工厂里的装配线——材料从一端进去，成品从另一端出来。",[15,5562,5563],{},[39,5564],{"alt":5565,"src":5566},"渲染流水线总览：主线程五段 + 合成三段","\u002Fdemos\u002Fbrowser-rendering\u002Fpipeline-overview.svg",[78,5568,5570],{"id":5569},"总览八个阶段","总览：八个阶段",[366,5572,5573,5589],{},[369,5574,5575],{},[372,5576,5577,5580,5583,5586],{},[375,5578,5579],{},"阶段",[375,5581,5582],{},"执行者",[375,5584,5585],{},"输入",[375,5587,5588],{},"输出",[384,5590,5591,5604,5616,5629,5642,5655,5669,5683],{},[372,5592,5593,5596,5598,5601],{},[389,5594,5595],{},"HTML 解析",[389,5597,2676],{},[389,5599,5600],{},"HTML 字节流",[389,5602,5603],{},"DOM 树 + CSSOM 树",[372,5605,5606,5608,5610,5613],{},[389,5607,75],{},[389,5609,2676],{},[389,5611,5612],{},"DOM + CSSOM",[389,5614,5615],{},"带 Computed Style 的节点",[372,5617,5618,5621,5623,5626],{},[389,5619,5620],{},"布局 Layout",[389,5622,2676],{},[389,5624,5625],{},"样式树",[389,5627,5628],{},"布局树（几何信息）",[372,5630,5631,5634,5636,5639],{},[389,5632,5633],{},"分层 Layer",[389,5635,2676],{},[389,5637,5638],{},"布局树",[389,5640,5641],{},"图层树",[372,5643,5644,5647,5649,5652],{},[389,5645,5646],{},"绘制 Paint",[389,5648,2676],{},[389,5650,5651],{},"图层",[389,5653,5654],{},"绘制指令集（display list）",[372,5656,5657,5660,5663,5666],{},[389,5658,5659],{},"分块 Tiling",[389,5661,5662],{},"合成线程",[389,5664,5665],{},"绘制指令",[389,5667,5668],{},"图层小块",[372,5670,5671,5674,5677,5680],{},[389,5672,5673],{},"光栅化 Raster",[389,5675,5676],{},"GPU 进程",[389,5678,5679],{},"块信息",[389,5681,5682],{},"位图（bitmap）",[372,5684,5685,5688,5691,5694],{},[389,5686,5687],{},"画 Draw",[389,5689,5690],{},"合成线程 + GPU",[389,5692,5693],{},"位图",[389,5695,5696],{},"屏幕像素",[15,5698,5699],{},"记忆口诀：",[342,5701,5702,5708],{},[345,5703,5704,5707],{},[24,5705,5706],{},"主线程","：Parse → Style → Layout → Layer → Paint",[345,5709,5710,5712],{},[24,5711,5690],{},"：Tiling → Raster → Draw",[15,5714,5715,5716,5718,5719,5722],{},"主线程极其繁忙——",[51,5717,5546],{"href":5545}," 里还要执行 JS、处理事件、跑计时器。渲染只是它众多职责之一；一旦某段 JS 长时间占用主线程，整条渲染流水线都会暂停（见 ",[51,5720,5721],{"href":1422},"reflow、repaint 与 transform","）。",[78,5724,5726],{"id":5725},"第一步html-解析","第一步：HTML 解析",[15,5728,5729,5730,5733,5734,57],{},"解析 HTML 时，遇到 ",[24,5731,5732],{},"CSS 就解析 CSS","，遇到 ",[24,5735,5736],{},"JS 就执行 JS",[15,5738,5739,5740,5743,5744,31,5747,5750],{},"为提高效率，浏览器在正式解析前还会启动 ",[24,5741,5742],{},"预解析（preload scanner）","，提前下载 HTML 里 ",[19,5745,5746],{},"\u003Clink>",[19,5748,5749],{},"\u003Cscript>"," 引用的外部资源，减少主线程空等。",[15,5752,5753],{},[39,5754],{"alt":5755,"src":5756},"解析 HTML 得到 DOM 树与 CSSOM 树","\u002Fdemos\u002Fbrowser-rendering\u002Fparse-dom-cssom.svg",[15,5758,5759],{},"解析完成后得到两棵树：",[342,5761,5762,5768],{},[345,5763,5764,5767],{},[24,5765,5766],{},"DOM 树","：文档结构，对应 HTML 标签的嵌套关系",[345,5769,5770,5773,5774,31,5777,5780,5781,5783],{},[24,5771,5772],{},"CSSOM 树","：汇总 ",[24,5775,5776],{},"用户代理默认样式",[19,5778,5779],{},"\u003Cstyle>","、外链 CSS、行内 ",[19,5782,1425],{}," 等全部 CSS 规则",[438,5785,5787],{"id":5786},"css-为什么不阻塞-html-解析","CSS 为什么不阻塞 HTML 解析？",[15,5789,5790,5791,5794,5795,5798,5799,57],{},"主线程扫到 ",[19,5792,5793],{},"\u003Clink rel=\"stylesheet\">"," 时，即使 CSS 文件还没下载完，",[24,5796,5797],{},"也不会停下来等","，会继续解析后面的 HTML。CSS 的下载与解析由预解析等机制并行处理，因此 ",[24,5800,5801],{},"CSS 默认不阻塞 DOM 树的构建",[438,5803,5805],{"id":5804},"js-为什么会阻塞-html-解析","JS 为什么会阻塞 HTML 解析？",[15,5807,5790,5808,2321,5811,5813,5814,5817,5818,5821],{},[24,5809,5810],{},"同步",[19,5812,5749],{}," 时，会 ",[24,5815,5816],{},"暂停 HTML 解析","，先等 JS 下载并执行完。因为 JS 可能通过 ",[19,5819,5820],{},"document.write"," 等方式修改 DOM，必须保证 DOM 生成顺序与脚本执行顺序一致。",[15,5823,5824,31,5827,31,5830,5833,5834,5837,5838,5840,5841,5844],{},[19,5825,5826],{},"defer",[19,5828,5829],{},"async",[19,5831,5832],{},"type=\"module\""," 等会改变具体行为，但 ",[24,5835,5836],{},"「同步脚本阻塞解析」"," 是默认规则，也是 ",[19,5839,5749],{}," 放 ",[19,5842,5843],{},"\u003C\u002Fbody>"," 前、或把脚本移到底部的原因。",[15,5846,5847],{},[39,5848],{"alt":5849,"src":5850},"link 不阻塞解析，同步 script 会阻塞","\u002Fdemos\u002Fbrowser-rendering\u002Fcss-js-parse.svg",[2483,5852,5854],{"lang":87,"title":5853},"同步脚本阻塞 DOM 构建",[83,5855,5857],{"className":85,"code":5856,"language":87,"meta":88,"style":88},"\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,5858,5859,5879,5887,5907,5915,5935],{"__ignoreMap":88},[92,5860,5861,5863,5865,5867,5869,5872,5875,5877],{"class":94,"line":95},[92,5862,99],{"class":98},[92,5864,15],{"class":102},[92,5866,964],{"class":118},[92,5868,122],{"class":98},[92,5870,5871],{"class":125},"\"before\"",[92,5873,5874],{"class":98},">before\u003C\u002F",[92,5876,15],{"class":102},[92,5878,106],{"class":98},[92,5880,5881,5883,5885],{"class":94,"line":109},[92,5882,99],{"class":98},[92,5884,3287],{"class":102},[92,5886,106],{"class":98},[92,5888,5889,5892,5894,5896,5899,5902,5904],{"class":94,"line":131},[92,5890,5891],{"class":98},"  document.",[92,5893,2509],{"class":118},[92,5895,866],{"class":98},[92,5897,5898],{"class":125},"'#before'",[92,5900,5901],{"class":98},").textContent ",[92,5903,122],{"class":200},[92,5905,5906],{"class":125}," 'changed'\n",[92,5908,5909,5911,5913],{"class":94,"line":153},[92,5910,166],{"class":98},[92,5912,3287],{"class":102},[92,5914,106],{"class":98},[92,5916,5917,5919,5921,5923,5925,5928,5931,5933],{"class":94,"line":163},[92,5918,99],{"class":98},[92,5920,15],{"class":102},[92,5922,964],{"class":118},[92,5924,122],{"class":98},[92,5926,5927],{"class":125},"\"after\"",[92,5929,5930],{"class":98},">after\u003C\u002F",[92,5932,15],{"class":102},[92,5934,106],{"class":98},[92,5936,5937],{"class":94,"line":238},[92,5938,5939],{"class":2532},"\u003C!-- 解析器在遇到 script 时必须先执行完再继续 -->\n",[78,5941,5943],{"id":5942},"第二步样式计算","第二步：样式计算",[15,5945,5946,5947,5950],{},"主线程遍历 DOM，结合 CSSOM，为每个节点算出最终用于渲染的样式，即 ",[24,5948,5949],{},"Computed Style","（计算样式）。",[15,5952,5953],{},"此阶段会把许多值「算实」：",[342,5955,5956,5964,5971],{},[345,5957,5958,5960,5961],{},[19,5959,288],{}," → ",[19,5962,5963],{},"rgb(255, 0, 0)",[345,5965,5966,5960,5968,5970],{},[19,5967,1034],{},[19,5969,201],{},"（在父级字号已知时）",[345,5972,5973,5974,5977],{},"经过 ",[51,5975,5976],{"href":74},"层叠、继承、默认值"," 得到每个属性的最终声明",[15,5979,2585,5980,5983,5984,5986,5987,5990],{},[24,5981,5982],{},"百分比宽高"," 等仍可能待定——它们依赖 ",[51,5985,1131],{"href":1443},"，要在 ",[24,5988,5989],{},"布局"," 阶段结合几何上下文才能定稿。",[78,5992,5994],{"id":5993},"第三步布局layout","第三步：布局（Layout）",[15,5996,5997,5998,6001,6002,57],{},"布局阶段遍历带样式的节点，计算 ",[24,5999,6000],{},"几何信息","：宽高、位置（相对包含块）、行盒高度等，产出 ",[24,6003,6004],{},"布局树（Layout Tree）",[438,6006,6008],{"id":6007},"布局树-dom-树","布局树 ≠ DOM 树",[15,6010,6011,6012,340],{},"两棵树 ",[24,6013,6014],{},"常常不是一一对应",[366,6016,6017,6028],{},[369,6018,6019],{},[372,6020,6021,6024,6026],{},[375,6022,6023],{},"情况",[375,6025,5766],{},[375,6027,5638],{},[384,6029,6030,6046,6065],{},[372,6031,6032,6037,6040],{},[389,6033,6034],{},[19,6035,6036],{},"display: none",[389,6038,6039],{},"有节点",[389,6041,6042,6043,5638],{},"无几何信息，",[24,6044,6045],{},"不进",[372,6047,6048,6056,6059],{},[389,6049,6050,394,6053],{},[19,6051,6052],{},"::before",[19,6054,6055],{},"::after",[389,6057,6058],{},"无对应节点",[389,6060,6061,6062,5638],{},"有几何信息，",[24,6063,6064],{},"会进",[372,6066,6067,6070,6073],{},[389,6068,6069],{},"匿名行盒 \u002F 块盒",[389,6071,6072],{},"无独立节点",[389,6074,6075],{},"布局算法自动生成",[15,6077,6078],{},[39,6079],{"alt":6080,"src":6081},"DOM 树与布局树并不总是一一对应","\u002Fdemos\u002Fbrowser-rendering\u002Fdom-vs-layout.svg",[15,6083,6084,6085,6087,6088,6091,6092,57],{},"布局完成后，每个可见元素在屏幕上「占哪块地方」就确定了。改宽高、边距、",[19,6086,1638],{}," 等会触发 ",[24,6089,6090],{},"reflow（回流）","，需要重新跑 Layout 及之后阶段——详见 ",[51,6093,1423],{"href":1422},[78,6095,6097],{"id":6096},"第四步分层layer","第四步：分层（Layer）",[15,6099,6100,6101,57],{},"主线程按策略把布局树 ",[24,6102,6103],{},"分成多个图层（Layer）",[15,6105,6106,6107,6110],{},"分层是性能优化：将来只改某一层的样式或内容时，可以 ",[24,6108,6109],{},"只更新该层"," 的后续步骤，而不必重算整页。",[15,6112,6113],{},"常见影响因素：",[342,6115,6116,6119,6126,6133],{},[345,6117,6118],{},"滚动容器、滚动条",[345,6120,6121,6122,6125],{},"堆叠上下文（",[19,6123,6124],{},"z-index"," 等）",[345,6127,6128,31,6130],{},[19,6129,798],{},[19,6131,6132],{},"opacity",[345,6134,6135,6137],{},[19,6136,810],{}," 提示浏览器提前分层",[15,6139,6140,6141,57],{},"分层策略因浏览器而异，属于实现细节；开发上只需知道：",[24,6142,6143],{},"分层是为了增量更新更快",[78,6145,6147],{"id":6146},"第五步绘制paint","第五步：绘制（Paint）",[15,6149,6150,6151,6154,6155,6157,6158,31,6161,6164],{},"主线程为 ",[24,6152,6153],{},"每一层"," 单独生成 ",[24,6156,5654],{},"，描述这一层该怎么画——类似 Canvas 的 ",[19,6159,6160],{},"fillRect",[19,6162,6163],{},"drawText"," 等调用序列。",[15,6166,6167],{},[39,6168],{"alt":6169,"src":6170},"图层与绘制指令","\u002Fdemos\u002Fbrowser-rendering\u002Flayers-paint.svg",[15,6172,6173,6176,6177,57],{},[24,6174,6175],{},"渲染主线程的工作到这里为止。"," 之后把各层的绘制信息交给 ",[24,6178,6179],{},"合成线程（Compositor Thread）",[15,6181,6182,6183,31,6185,6187,6188,6191],{},"改 ",[19,6184,2043],{},[19,6186,2574],{}," 等可见但不改布局的样式，可能只需 ",[24,6189,6190],{},"repaint","（重算绘制及之后），不必完整 reflow。",[78,6193,6195],{"id":6194},"第六八步分块光栅化上屏","第六～八步：分块、光栅化、上屏",[15,6197,6198],{},"合成线程接手后：",[438,6200,6202],{"id":6201},"_1-分块tiling","1. 分块（Tiling）",[15,6204,6205,6206,6209,6210,6213],{},"把每一层划成更小的 ",[24,6207,6208],{},"图块（tile）","，交给 ",[24,6211,6212],{},"线程池"," 并行处理，避免单次任务过大。",[438,6215,6217],{"id":6216},"_2-光栅化raster","2. 光栅化（Raster）",[15,6219,6220,6221,6223,6224,6226,6227,6230,6231,6234],{},"把块信息交给 ",[24,6222,5676],{},"，由 GPU 以极高速度转成 ",[24,6225,5682],{},"——每个块是一小块像素矩阵。靠近 ",[24,6228,6229],{},"视口"," 的块会 ",[24,6232,6233],{},"优先"," 光栅化，所以你滚动时远处内容可能稍晚才清晰。",[438,6236,6238],{"id":6237},"_3-画draw","3. 画（Draw）",[15,6240,6241,6242,6245,6246,6248,6249,6252],{},"合成线程为每块位图生成 ",[24,6243,6244],{},"指引（quad）","：在屏幕上的位置、旋转、缩放等。",[19,6247,798],{}," 的变形主要发生在此阶段，",[24,6250,6251],{},"不经过主线程的 Layout\u002FPaint","，因此动画往往更顺滑。",[15,6254,6255],{},[39,6256],{"alt":6257,"src":6258},"分块、光栅化、quad、GPU 上屏","\u002Fdemos\u002Fbrowser-rendering\u002Fcompositor-gpu.svg",[15,6260,6261,6262,6265],{},"最后 GPU 进程通过系统调用把结果交给显卡。",[24,6263,6264],{},"渲染进程跑在沙盒里","，不能直接碰硬件，崩溃也不会拖垮整个系统。",[78,6267,6269],{"id":6268},"常见面试答法精简版","常见面试答法（精简版）",[2591,6271,6272],{},[15,6273,6274,6275,6278],{},"网络进程收到 HTML 后，产生渲染任务进入渲染主线程的消息队列；事件循环取出任务，开启流水线：",[24,6276,6277],{},"解析 → 样式 → 布局 → 分层 → 绘制 → 分块 → 光栅化 → 画","。主线程负责前五步，合成线程和 GPU 负责后三步。CSS 不阻塞 DOM 构建，同步 JS 会阻塞解析。改动样式可能触发 reflow\u002Frepaint，是流水线运行中的局部重跑。",[78,6280,1381],{"id":1381},[342,6282,6283,6290,6295,6303,6318],{},[345,6284,6285,6286,6289],{},"渲染由 ",[24,6287,6288],{},"事件循环调度","，是主线程与合成线程协作的流水线。",[345,6291,6292,57],{},[24,6293,6294],{},"DOM + CSSOM → 样式 → 布局 → 图层 → 绘制指令 → 位图 → 屏幕",[345,6296,6297,1399,6300,57],{},[24,6298,6299],{},"同步 JS 阻塞解析",[24,6301,6302],{},"CSS 默认不阻塞 DOM",[345,6304,6305,6308,6309,6308,6312,1399,6315,6317],{},[24,6306,6307],{},"Layout 定几何","，",[24,6310,6311],{},"Paint 出指令",[24,6313,6314],{},"Compositor + GPU 上屏",[19,6316,798],{}," 多在合成阶段完成。",[345,6319,6320,6321,31,6324,31,6326,6329],{},"与 ",[51,6322,6323],{"href":74},"CSS 属性计算",[51,6325,1131],{"href":1443},[51,6327,6328],{"href":1422},"reflow\u002Frepaint"," 串联起来，就是前端性能优化的完整地图。",[1425,6331,6332],{},"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":88,"searchDepth":131,"depth":131,"links":6334},[6335,6336,6340,6341,6344,6345,6346,6351,6352],{"id":5569,"depth":109,"text":5570},{"id":5725,"depth":109,"text":5726,"children":6337},[6338,6339],{"id":5786,"depth":131,"text":5787},{"id":5804,"depth":131,"text":5805},{"id":5942,"depth":109,"text":5943},{"id":5993,"depth":109,"text":5994,"children":6342},[6343],{"id":6007,"depth":131,"text":6008},{"id":6096,"depth":109,"text":6097},{"id":6146,"depth":109,"text":6147},{"id":6194,"depth":109,"text":6195,"children":6347},[6348,6349,6350],{"id":6201,"depth":131,"text":6202},{"id":6216,"depth":131,"text":6217},{"id":6237,"depth":131,"text":6238},{"id":6268,"depth":109,"text":6269},{"id":1381,"depth":109,"text":1381},"2026-06-25","从 HTML 解析到 GPU 上屏，详解渲染主线程与合成线程分工，以及 DOM 树、布局树、图层与位图如何串联成流水线。",{},{"title":5527,"description":6354},"blog\u002Fbrowser-rendering-pipeline",[5521,5522,1449],"4ob-xZgG6ctKPWs2Yp8VJvQBEfU9jF8aTlNCAjPdHBg",{"id":6361,"title":6362,"body":6363,"category":2485,"date":7613,"description":7614,"draft":1440,"extension":1441,"meta":7615,"navigation":241,"path":5545,"seo":7616,"stem":7617,"tags":7618,"__hash__":7620},"blog\u002Fblog\u002Fjs-event-loop.md","浏览器事件循环：从进程模型到任务队列",{"type":8,"value":6364,"toc":7595},[6365,6368,6378,6381,6384,6388,6395,6401,6405,6415,6421,6425,6431,6437,6453,6457,6460,6477,6480,6486,6492,6515,6523,6532,6536,6543,6569,6572,6578,6588,6594,6600,6604,6619,6623,6630,6825,6840,6843,7353,7357,7367,7375,7394,7403,7406,7466,7469,7519,7522,7526,7537,7541,7547,7561,7563,7592],[11,6366,6362],{"id":6367},"浏览器事件循环从进程模型到任务队列",[15,6369,6370,6371,6373,6374,6377],{},"JavaScript 常被说成「单线程」，但真正决定页面是否流畅的，是浏览器里那条繁忙的 ",[24,6372,2676],{},"。它既要解析 HTML\u002FCSS、布局绘制，又要执行 JS 与事件回调——这些任务如何排队、谁先谁后，就是 ",[24,6375,6376],{},"事件循环（消息循环）"," 要回答的问题。",[15,6379,6380],{},"下文从浏览器进程模型讲起，再到异步模型、阻塞渲染的实测，以及 W3C 与 Chrome 对任务队列的最新理解。",[78,6382,6383],{"id":6383},"浏览器的进程与线程",[438,6385,6387],{"id":6386},"进程是什么","进程是什么？",[15,6389,6390,6391,6394],{},"程序运行需要专属的内存空间，这块空间可以理解为 ",[24,6392,6393],{},"进程","。每个应用至少有一个进程；进程之间相互独立，若要通信也需要双方同意。",[15,6396,6397],{},[39,6398],{"alt":6399,"src":6400},"进程与内存空间示意图","\u002Fdemos\u002Fevent-loop\u002Fprocess.png",[438,6402,6404],{"id":6403},"线程是什么","线程是什么？",[15,6406,6407,6408,6411,6412,6414],{},"有了进程，才能在其中运行代码。执行代码的单元叫 ",[24,6409,6410],{},"线程","。进程启动后会自动创建一个线程运行代码，称为 ",[24,6413,5706],{},"；若需并行执行多段代码，进程内还可再开更多线程。",[15,6416,6417],{},[39,6418],{"alt":6419,"src":6420},"进程内的主线程与额外线程","\u002Fdemos\u002Fevent-loop\u002Fthread.png",[438,6422,6424],{"id":6423},"浏览器有哪些进程","浏览器有哪些进程？",[15,6426,6427,6430],{},[24,6428,6429],{},"浏览器是多进程、多线程应用。"," 启动后会拉起多个进程，以降低相互影响和连环崩溃的风险。可在浏览器任务管理器中查看当前进程列表。",[15,6432,6433],{},[39,6434],{"alt":6435,"src":6436},"浏览器主要进程示意","\u002Fdemos\u002Fevent-loop\u002Fbrowser.png",[15,6438,6439,6440,6443,6444,6446,6447,6452],{},"与前端开发最相关的是 ",[24,6441,6442],{},"渲染进程","：启动后会开启 ",[24,6445,2676],{},"，负责执行 HTML、CSS、JavaScript。默认情况下，每个标签页对应一个渲染进程，标签页之间互不影响。（Chrome 的进程模型仍在演进，详见 ",[51,6448,6451],{"href":6449,"rel":6450},"https:\u002F\u002Fchromium.googlesource.com\u002Fchromium\u002Fsrc\u002F+\u002Fmain\u002Fdocs\u002Fprocess_model_and_site_isolation.md#Modes-and-Availability",[55],"Chrome 官方说明","。）",[78,6454,6456],{"id":6455},"渲染主线程如何工作","渲染主线程如何工作？",[15,6458,6459],{},"渲染主线程是浏览器中最繁忙的线程，典型工作包括：",[342,6461,6462,6465,6468,6471,6474],{},[345,6463,6464],{},"解析 HTML、CSS",[345,6466,6467],{},"计算样式、布局、处理图层",[345,6469,6470],{},"以约 60fps 重绘页面",[345,6472,6473],{},"执行全局 JS、事件处理函数、计时器回调",[345,6475,6476],{},"……",[15,6478,6479],{},"这么多任务如何调度？例如：JS 执行到一半时用户点了按钮，要立即处理点击吗？计时器到时了，要立即跑回调吗？点击与计时器同时到来，先处理谁？",[15,6481,6482,6483,57],{},"主线程的做法是：",[24,6484,6485],{},"排队",[15,6487,6488],{},[39,6489],{"alt":6490,"src":6491},"事件循环与消息队列","\u002Fdemos\u002Fevent-loop\u002Fqueue.png",[1663,6493,6494,6501,6508],{},[345,6495,6496,6497,6500],{},"渲染主线程进入一个 ",[24,6498,6499],{},"不会结束的循环","（事件循环）。",[345,6502,6503,6504,6507],{},"每次循环检查 ",[24,6505,6506],{},"消息队列","：有任务则取出第一个执行，执行完再进入下一轮；没有任务则休眠。",[345,6509,6510,6511,6514],{},"其他线程（含其他进程的线程）可随时把任务加到队列 ",[24,6512,6513],{},"末尾","；若主线程在休眠，会被唤醒继续取任务。",[15,6516,6517,6518,814,6520,57],{},"整条链路也叫 ",[24,6519,5546],{},[24,6521,6522],{},"消息循环",[2591,6524,6525],{},[15,6526,6527,6528,6531],{},"思考题：为什么渲染进程不用多个线程并行做解析、布局、绘制？",[6529,6530],"br",{},"\n简答：DOM 与样式状态需要一致的可预测顺序；多线程并行改同一棵 DOM 树会带来同步与竞态难题，单主线程 + 队列调度是更稳妥的工程取舍（GPU 合成等仍可由其他线程辅助）。",[78,6533,6535],{"id":6534},"异步主线程不能阻塞","异步：主线程不能阻塞",[15,6537,6538,6539,6542],{},"有些任务 ",[24,6540,6541],{},"无法立刻完成","，例如：",[342,6544,6545,6554,6563],{},[345,6546,6547,6548,31,6551],{},"计时器：",[19,6549,6550],{},"setTimeout",[19,6552,6553],{},"setInterval",[345,6555,6556,6557,31,6560],{},"网络：",[19,6558,6559],{},"XHR",[19,6561,6562],{},"Fetch",[345,6564,6565,6566],{},"用户操作：",[19,6567,6568],{},"addEventListener",[15,6570,6571],{},"若主线程一直等到「时间到了」「请求返回」「用户点击」，就会长期阻塞，页面卡死：",[15,6573,6574],{},[39,6575],{"alt":6576,"src":6577},"同步等待导致主线程阻塞","\u002Fdemos\u002Fevent-loop\u002Fsync.png",[15,6579,6580,6581,6584,6585,340],{},"渲染主线程承担页面更新与交互，",[24,6582,6583],{},"绝不能被长时间阻塞","。浏览器因此采用 ",[24,6586,6587],{},"异步",[15,6589,6590],{},[39,6591],{"alt":6592,"src":6593},"异步模型：其他线程处理，回调入队","\u002Fdemos\u002Fevent-loop\u002Fasync.png",[15,6595,6596,6597],{},"主线程把计时、网络、监听等交给其他线程，自己继续执行后续代码；待时机成熟，将回调包装成任务加入消息队列末尾，由主线程在空闲时调度。",[24,6598,6599],{},"异步模式下，主线程不会因等待 I\u002FO 而空转阻塞。",[438,6601,6603],{"id":6602},"如何理解-js-的异步面试要点","如何理解 JS 的异步？（面试要点）",[342,6605,6606,6613,6616],{},[345,6607,6608,6609,6612],{},"JS 运行在渲染主线程中，",[24,6610,6611],{},"同一时刻只有一条执行栈","，故常被称为单线程语言。",[345,6614,6615],{},"主线程还要负责渲染；若大量任务同步等待，队列里其他任务无法执行，页面无法及时更新。",[345,6617,6618],{},"异步做法：计时、网络、事件等交由其他线程；完成后把回调入队，主线程按序执行。",[78,6620,6622],{"id":6621},"js-为何会阻碍渲染","JS 为何会阻碍渲染？",[15,6624,6625,6626,6629],{},"改 DOM 与真正画到屏幕上并非同一瞬间完成。若主线程正在执行一段 ",[24,6627,6628],{},"长时间占用的 JS","，渲染任务只能等在队列后面。",[2483,6631,6633],{"lang":87,"title":6632},"主线程阻塞导致画面延迟更新",[83,6634,6636],{"className":85,"code":6635,"language":87,"meta":88,"style":88},"\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,6637,6638,6651,6664,6672,6691,6711,6715,6730,6746,6767,6771,6775,6791,6801,6813,6817],{"__ignoreMap":88},[92,6639,6640,6642,6644,6647,6649],{"class":94,"line":95},[92,6641,99],{"class":98},[92,6643,11],{"class":102},[92,6645,6646],{"class":98},">Hello, Event Loop!\u003C\u002F",[92,6648,11],{"class":102},[92,6650,106],{"class":98},[92,6652,6653,6655,6657,6660,6662],{"class":94,"line":109},[92,6654,99],{"class":98},[92,6656,3179],{"class":102},[92,6658,6659],{"class":98},">change\u003C\u002F",[92,6661,3179],{"class":102},[92,6663,106],{"class":98},[92,6665,6666,6668,6670],{"class":94,"line":131},[92,6667,99],{"class":98},[92,6669,3287],{"class":102},[92,6671,106],{"class":98},[92,6673,6674,6676,6678,6680,6682,6684,6686,6689],{"class":94,"line":153},[92,6675,3509],{"class":200},[92,6677,1830],{"class":190},[92,6679,2503],{"class":200},[92,6681,2506],{"class":98},[92,6683,2509],{"class":118},[92,6685,866],{"class":98},[92,6687,6688],{"class":125},"'h1'",[92,6690,2517],{"class":98},[92,6692,6693,6695,6698,6700,6702,6704,6706,6709],{"class":94,"line":163},[92,6694,3509],{"class":200},[92,6696,6697],{"class":190}," btn",[92,6699,2503],{"class":200},[92,6701,2506],{"class":98},[92,6703,2509],{"class":118},[92,6705,866],{"class":98},[92,6707,6708],{"class":125},"'button'",[92,6710,2517],{"class":98},[92,6712,6713],{"class":94,"line":238},[92,6714,242],{"emptyLinePlaceholder":241},[92,6716,6717,6720,6723,6725,6728],{"class":94,"line":245},[92,6718,6719],{"class":200},"  function",[92,6721,6722],{"class":118}," delay",[92,6724,866],{"class":98},[92,6726,6727],{"class":3479},"duration",[92,6729,3483],{"class":98},[92,6731,6732,6734,6737,6739,6742,6744],{"class":94,"line":253},[92,6733,3744],{"class":200},[92,6735,6736],{"class":190}," start",[92,6738,2503],{"class":200},[92,6740,6741],{"class":98}," Date.",[92,6743,3480],{"class":118},[92,6745,3582],{"class":98},[92,6747,6748,6751,6754,6756,6758,6760,6762,6764],{"class":94,"line":268},[92,6749,6750],{"class":200},"    while",[92,6752,6753],{"class":98}," (Date.",[92,6755,3480],{"class":118},[92,6757,3610],{"class":98},[92,6759,3520],{"class":200},[92,6761,3431],{"class":98},[92,6763,99],{"class":200},[92,6765,6766],{"class":98}," duration) {}\n",[92,6768,6769],{"class":94,"line":281},[92,6770,4129],{"class":98},[92,6772,6773],{"class":94,"line":293},[92,6774,242],{"emptyLinePlaceholder":241},[92,6776,6777,6780,6783,6785,6788],{"class":94,"line":642},[92,6778,6779],{"class":98},"  btn.",[92,6781,6782],{"class":118},"onclick",[92,6784,2503],{"class":200},[92,6786,6787],{"class":200}," function",[92,6789,6790],{"class":98}," () {\n",[92,6792,6793,6796,6798],{"class":94,"line":657},[92,6794,6795],{"class":98},"    h1.textContent ",[92,6797,122],{"class":200},[92,6799,6800],{"class":125}," '页面已更新！'\n",[92,6802,6803,6806,6808,6811],{"class":94,"line":662},[92,6804,6805],{"class":118},"    delay",[92,6807,866],{"class":98},[92,6809,6810],{"class":190},"3000",[92,6812,2517],{"class":98},[92,6814,6815],{"class":94,"line":667},[92,6816,4129],{"class":98},[92,6818,6819,6821,6823],{"class":94,"line":675},[92,6820,166],{"class":98},[92,6822,3287],{"class":102},[92,6824,106],{"class":98},[15,6826,6827,6828,6831,6832,6839],{},"点击按钮后：",[19,6829,6830],{},"textContent"," 虽已修改，但 ",[24,6833,6834,6835,6838],{},"画面要等 ",[19,6836,6837],{},"delay(3000)"," 跑完"," 才会更新——因为渲染步骤也要主线程空闲才能执行。",[15,6841,6842],{},"下方可亲自点击体验（约 3 秒内标题不会变，之后才刷新）：",[2715,6844,6846],{"title":6845},"JS 阻塞渲染",[83,6847,6849],{"className":2720,"code":6848,"language":2722,"meta":88,"style":88},"\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,6850,6851,6859,6874,6887,6907,6932,6940,6948,6952,6962,6973,6977,6995,6999,7011,7025,7044,7048,7052,7061,7070,7081,7085,7093,7097,7107,7114,7126,7140,7151,7155,7159,7165,7182,7195,7199,7203,7210,7226,7236,7249,7253,7257,7263,7279,7289,7301,7311,7321,7331,7341,7345],{"__ignoreMap":88},[92,6852,6853,6855,6857],{"class":94,"line":95},[92,6854,99],{"class":98},[92,6856,2731],{"class":102},[92,6858,106],{"class":98},[92,6860,6861,6863,6865,6867,6869,6872],{"class":94,"line":109},[92,6862,112],{"class":98},[92,6864,115],{"class":102},[92,6866,119],{"class":118},[92,6868,122],{"class":98},[92,6870,6871],{"class":125},"\"demo\"",[92,6873,106],{"class":98},[92,6875,6876,6878,6880,6883,6885],{"class":94,"line":131},[92,6877,134],{"class":98},[92,6879,11],{"class":102},[92,6881,6882],{"class":98},">{{ title }}\u003C\u002F",[92,6884,11],{"class":102},[92,6886,106],{"class":98},[92,6888,6889,6891,6893,6895,6897,6900,6903,6905],{"class":94,"line":153},[92,6890,134],{"class":98},[92,6892,15],{"class":102},[92,6894,119],{"class":118},[92,6896,122],{"class":98},[92,6898,6899],{"class":125},"\"hint\"",[92,6901,6902],{"class":98},">点击按钮后，标题会延迟约 3 秒才变化。\u003C\u002F",[92,6904,15],{"class":102},[92,6906,106],{"class":98},[92,6908,6909,6911,6913,6915,6917,6919,6921,6923,6926,6928,6930],{"class":94,"line":163},[92,6910,134],{"class":98},[92,6912,3179],{"class":102},[92,6914,119],{"class":118},[92,6916,122],{"class":98},[92,6918,3186],{"class":125},[92,6920,3197],{"class":118},[92,6922,122],{"class":98},[92,6924,6925],{"class":125},"\"onChange\"",[92,6927,6659],{"class":98},[92,6929,3179],{"class":102},[92,6931,106],{"class":98},[92,6933,6934,6936,6938],{"class":94,"line":238},[92,6935,156],{"class":98},[92,6937,115],{"class":102},[92,6939,106],{"class":98},[92,6941,6942,6944,6946],{"class":94,"line":245},[92,6943,166],{"class":98},[92,6945,2731],{"class":102},[92,6947,106],{"class":98},[92,6949,6950],{"class":94,"line":253},[92,6951,242],{"emptyLinePlaceholder":241},[92,6953,6954,6956,6958,6960],{"class":94,"line":268},[92,6955,99],{"class":98},[92,6957,3287],{"class":102},[92,6959,3290],{"class":118},[92,6961,106],{"class":98},[92,6963,6964,6966,6969,6971],{"class":94,"line":281},[92,6965,3298],{"class":200},[92,6967,6968],{"class":98}," { ref } ",[92,6970,3304],{"class":200},[92,6972,3307],{"class":125},[92,6974,6975],{"class":94,"line":293},[92,6976,242],{"emptyLinePlaceholder":241},[92,6978,6979,6981,6984,6986,6988,6990,6993],{"class":94,"line":642},[92,6980,2497],{"class":200},[92,6982,6983],{"class":190}," title",[92,6985,2503],{"class":200},[92,6987,3081],{"class":118},[92,6989,866],{"class":98},[92,6991,6992],{"class":125},"'Hello, Event Loop!'",[92,6994,2517],{"class":98},[92,6996,6997],{"class":94,"line":657},[92,6998,242],{"emptyLinePlaceholder":241},[92,7000,7001,7003,7005,7007,7009],{"class":94,"line":662},[92,7002,3471],{"class":200},[92,7004,6722],{"class":118},[92,7006,866],{"class":98},[92,7008,6727],{"class":3479},[92,7010,3483],{"class":98},[92,7012,7013,7015,7017,7019,7021,7023],{"class":94,"line":667},[92,7014,3509],{"class":200},[92,7016,6736],{"class":190},[92,7018,2503],{"class":200},[92,7020,6741],{"class":98},[92,7022,3480],{"class":118},[92,7024,3582],{"class":98},[92,7026,7027,7030,7032,7034,7036,7038,7040,7042],{"class":94,"line":675},[92,7028,7029],{"class":200},"  while",[92,7031,6753],{"class":98},[92,7033,3480],{"class":118},[92,7035,3610],{"class":98},[92,7037,3520],{"class":200},[92,7039,3431],{"class":98},[92,7041,99],{"class":200},[92,7043,6766],{"class":98},[92,7045,7046],{"class":94,"line":688},[92,7047,235],{"class":98},[92,7049,7050],{"class":94,"line":701},[92,7051,242],{"emptyLinePlaceholder":241},[92,7053,7054,7056,7059],{"class":94,"line":712},[92,7055,3471],{"class":200},[92,7057,7058],{"class":118}," onChange",[92,7060,3984],{"class":98},[92,7062,7063,7066,7068],{"class":94,"line":723},[92,7064,7065],{"class":98},"  title.value ",[92,7067,122],{"class":200},[92,7069,6800],{"class":125},[92,7071,7072,7075,7077,7079],{"class":94,"line":738},[92,7073,7074],{"class":118},"  delay",[92,7076,866],{"class":98},[92,7078,6810],{"class":190},[92,7080,2517],{"class":98},[92,7082,7083],{"class":94,"line":752},[92,7084,235],{"class":98},[92,7086,7087,7089,7091],{"class":94,"line":3029},[92,7088,166],{"class":98},[92,7090,3287],{"class":102},[92,7092,106],{"class":98},[92,7094,7095],{"class":94,"line":3050},[92,7096,242],{"emptyLinePlaceholder":241},[92,7098,7099,7101,7103,7105],{"class":94,"line":3059},[92,7100,99],{"class":98},[92,7102,1425],{"class":102},[92,7104,4225],{"class":118},[92,7106,106],{"class":98},[92,7108,7109,7112],{"class":94,"line":3074},[92,7110,7111],{"class":118},".demo",[92,7113,185],{"class":98},[92,7115,7116,7118,7120,7122,7124],{"class":94,"line":3106},[92,7117,4241],{"class":190},[92,7119,194],{"class":98},[92,7121,5094],{"class":190},[92,7123,201],{"class":200},[92,7125,204],{"class":98},[92,7127,7128,7130,7132,7134,7136,7138],{"class":94,"line":3115},[92,7129,4255],{"class":190},[92,7131,194],{"class":98},[92,7133,4260],{"class":190},[92,7135,3679],{"class":98},[92,7137,4265],{"class":190},[92,7139,204],{"class":98},[92,7141,7142,7145,7147,7149],{"class":94,"line":3135},[92,7143,7144],{"class":190},"  text-align",[92,7146,194],{"class":98},[92,7148,4649],{"class":190},[92,7150,204],{"class":98},[92,7152,7153],{"class":94,"line":3144},[92,7154,235],{"class":98},[92,7156,7157],{"class":94,"line":3153},[92,7158,242],{"emptyLinePlaceholder":241},[92,7160,7161,7163],{"class":94,"line":3158},[92,7162,11],{"class":102},[92,7164,185],{"class":98},[92,7166,7167,7169,7171,7173,7175,7178,7180],{"class":94,"line":3174},[92,7168,4291],{"class":190},[92,7170,194],{"class":98},[92,7172,869],{"class":190},[92,7174,4298],{"class":190},[92,7176,7177],{"class":190}," 12",[92,7179,201],{"class":200},[92,7181,204],{"class":98},[92,7183,7184,7186,7188,7191,7193],{"class":94,"line":3207},[92,7185,1837],{"class":190},[92,7187,194],{"class":98},[92,7189,7190],{"class":190},"1.5",[92,7192,4330],{"class":200},[92,7194,204],{"class":98},[92,7196,7197],{"class":94,"line":3213},[92,7198,235],{"class":98},[92,7200,7201],{"class":94,"line":3222},[92,7202,242],{"emptyLinePlaceholder":241},[92,7204,7205,7208],{"class":94,"line":3250},[92,7206,7207],{"class":118},".hint",[92,7209,185],{"class":98},[92,7211,7212,7214,7216,7218,7220,7222,7224],{"class":94,"line":3259},[92,7213,4291],{"class":190},[92,7215,194],{"class":98},[92,7217,869],{"class":190},[92,7219,4298],{"class":190},[92,7221,5298],{"class":190},[92,7223,201],{"class":200},[92,7225,204],{"class":98},[92,7227,7228,7230,7232,7234],{"class":94,"line":3268},[92,7229,1477],{"class":190},[92,7231,194],{"class":98},[92,7233,4315],{"class":190},[92,7235,204],{"class":98},[92,7237,7238,7240,7242,7245,7247],{"class":94,"line":3277},[92,7239,1837],{"class":190},[92,7241,194],{"class":98},[92,7243,7244],{"class":190},"0.9",[92,7246,4330],{"class":200},[92,7248,204],{"class":98},[92,7250,7251],{"class":94,"line":3282},[92,7252,235],{"class":98},[92,7254,7255],{"class":94,"line":3295},[92,7256,242],{"emptyLinePlaceholder":241},[92,7258,7259,7261],{"class":94,"line":3310},[92,7260,5282],{"class":118},[92,7262,185],{"class":98},[92,7264,7265,7267,7269,7271,7273,7275,7277],{"class":94,"line":3315},[92,7266,4241],{"class":190},[92,7268,194],{"class":98},[92,7270,731],{"class":190},[92,7272,201],{"class":200},[92,7274,3644],{"class":190},[92,7276,201],{"class":200},[92,7278,204],{"class":98},[92,7280,7281,7283,7285,7287],{"class":94,"line":3334},[92,7282,627],{"class":190},[92,7284,194],{"class":98},[92,7286,805],{"class":190},[92,7288,204],{"class":98},[92,7290,7291,7293,7295,7297,7299],{"class":94,"line":3352},[92,7292,4404],{"class":190},[92,7294,194],{"class":98},[92,7296,4675],{"class":190},[92,7298,201],{"class":200},[92,7300,204],{"class":98},[92,7302,7303,7305,7307,7309],{"class":94,"line":3370},[92,7304,4419],{"class":190},[92,7306,194],{"class":98},[92,7308,5134],{"class":190},[92,7310,204],{"class":98},[92,7312,7313,7315,7317,7319],{"class":94,"line":3388},[92,7314,1477],{"class":190},[92,7316,194],{"class":98},[92,7318,5347],{"class":190},[92,7320,204],{"class":98},[92,7322,7323,7325,7327,7329],{"class":94,"line":3407},[92,7324,4731],{"class":190},[92,7326,194],{"class":98},[92,7328,4736],{"class":190},[92,7330,204],{"class":98},[92,7332,7333,7335,7337,7339],{"class":94,"line":3412},[92,7334,5366],{"class":190},[92,7336,194],{"class":98},[92,7338,5371],{"class":190},[92,7340,204],{"class":98},[92,7342,7343],{"class":94,"line":3426},[92,7344,235],{"class":98},[92,7346,7347,7349,7351],{"class":94,"line":3438},[92,7348,166],{"class":98},[92,7350,1425],{"class":102},[92,7352,106],{"class":98},[78,7354,7356],{"id":7355},"任务有优先级吗","任务有优先级吗？",[15,7358,7359,7362,7363,7366],{},[24,7360,7361],{},"单个任务","在所属队列里通常是先进先出，没有「插队」；但 ",[24,7364,7365],{},"队列之间"," 有优先级差异。",[15,7368,7369,7370,2175],{},"W3C 现行表述要点（",[51,7371,7374],{"href":7372,"rel":7373},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fwebappapis.html#perform-a-microtask-checkpoint",[55],"Perform a microtask checkpoint",[342,7376,7377,7384,7387],{},[345,7378,7379,7380,7383],{},"每个任务有 ",[24,7381,7382],{},"任务类型","；同类型任务在同一队列，不同类型可分到不同队列。",[345,7385,7386],{},"一次事件循环中，浏览器可按情况从不同队列取任务。",[345,7388,7389,7390,7393],{},"浏览器必须维护 ",[24,7391,7392],{},"微队列（microtask queue）","，其中任务优先于其他队列执行。",[2591,7395,7396],{},[15,7397,7398,7399,7402],{},"随着浏览器复杂度提升，简单区分「宏队列 \u002F 微队列」已不足以描述全部行为，但 ",[24,7400,7401],{},"微任务优先清空"," 仍是硬性要求。",[15,7404,7405],{},"在 Chrome 实现中，至少包括：",[366,7407,7408,7421],{},[369,7409,7410],{},[372,7411,7412,7415,7418],{},[375,7413,7414],{},"队列",[375,7416,7417],{},"典型内容",[375,7419,7420],{},"优先级（相对）",[384,7422,7423,7440,7451],{},[372,7424,7425,7428,7437],{},[389,7426,7427],{},"微队列",[389,7429,7430,31,7433,7436],{},[19,7431,7432],{},"Promise.then",[19,7434,7435],{},"MutationObserver"," 等",[389,7438,7439],{},"最高",[372,7441,7442,7445,7448],{},[389,7443,7444],{},"交互队列",[389,7446,7447],{},"用户操作产生的事件处理",[389,7449,7450],{},"高",[372,7452,7453,7456,7463],{},[389,7454,7455],{},"延时队列",[389,7457,7458,394,7460,7462],{},[19,7459,6550],{},[19,7461,6553],{}," 到期回调",[389,7464,7465],{},"中",[15,7467,7468],{},"立即把函数放进微队列的常见写法：",[2483,7470,7472],{"lang":2485,"title":7471},"Promise 入微队列",[83,7473,7475],{"className":2489,"code":7474,"language":2485,"meta":88,"style":88},"Promise.resolve().then(() => {\n  console.log('microtask')\n})\n",[19,7476,7477,7500,7514],{"__ignoreMap":88},[92,7478,7479,7482,7485,7488,7491,7494,7496,7498],{"class":94,"line":95},[92,7480,7481],{"class":190},"Promise",[92,7483,7484],{"class":98},".",[92,7486,7487],{"class":118},"resolve",[92,7489,7490],{"class":98},"().",[92,7492,7493],{"class":118},"then",[92,7495,3734],{"class":98},[92,7497,3688],{"class":200},[92,7499,185],{"class":98},[92,7501,7502,7505,7507,7509,7512],{"class":94,"line":109},[92,7503,7504],{"class":98},"  console.",[92,7506,2541],{"class":118},[92,7508,866],{"class":98},[92,7510,7511],{"class":125},"'microtask'",[92,7513,2517],{"class":98},[92,7515,7516],{"class":94,"line":131},[92,7517,7518],{"class":98},"})\n",[78,7520,7521],{"id":7521},"常见面试题",[438,7523,7525],{"id":7524},"阐述-js-的事件循环","阐述 JS 的事件循环",[15,7527,7528,7529,7532,7533,7536],{},"事件循环是渲染主线程的工作方式：开启不会结束的循环，每次从队列取一个任务执行；其他线程在合适时机把任务加到队列末尾。任务按类型分队列，浏览器在一次循环中决定取哪个队列；",[24,7530,7531],{},"微队列任务必须优先调度执行","。Chrome 源码层面可理解为 ",[19,7534,7535],{},"for"," 循环 + 队列取任务，而非过去教科书里单一的「宏队列」模型。",[438,7538,7540],{"id":7539},"计时器能精确计时吗","计时器能精确计时吗？",[15,7542,7543,7546],{},[24,7544,7545],{},"不能做到严格精确","，原因包括：",[1663,7548,7549,7552,7555],{},[345,7550,7551],{},"硬件与 OS 计时本身存在误差，JS 计时器最终依赖系统调用。",[345,7553,7554],{},"W3C 规定：嵌套超过 5 层的计时器，最小间隔为 4ms，短于 4ms 的设定会被抬高。",[345,7556,7557,7558,57],{},"回调只在主线程空闲时执行，前面若有长任务，到期时间到了也会 ",[24,7559,7560],{},"晚跑",[78,7562,1381],{"id":1381},[342,7564,7565,7571,7576,7585],{},[345,7566,7567,7568,7570],{},"浏览器多进程隔离标签页；",[24,7569,2676],{}," 是页面与 JS 的核心调度点。",[345,7572,7573,7575],{},[24,7574,5546],{}," 用消息队列 + 无限循环保证任务有序执行。",[345,7577,7578,7580,7581,7584],{},[24,7579,6587],{}," 避免主线程等待 I\u002FO；",[24,7582,7583],{},"长同步 JS"," 仍会阻塞渲染与交互。",[345,7586,7587,7588,7591],{},"理解 ",[24,7589,7590],{},"微队列优先"," 与多队列模型，比死记「宏\u002F微」更符合当前规范与 Chrome 行为。",[1425,7593,7594],{},"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":88,"searchDepth":131,"depth":131,"links":7596},[7597,7602,7603,7606,7607,7608,7612],{"id":6383,"depth":109,"text":6383,"children":7598},[7599,7600,7601],{"id":6386,"depth":131,"text":6387},{"id":6403,"depth":131,"text":6404},{"id":6423,"depth":131,"text":6424},{"id":6455,"depth":109,"text":6456},{"id":6534,"depth":109,"text":6535,"children":7604},[7605],{"id":6602,"depth":131,"text":6603},{"id":6621,"depth":109,"text":6622},{"id":7355,"depth":109,"text":7356},{"id":7521,"depth":109,"text":7521,"children":7609},[7610,7611],{"id":7524,"depth":131,"text":7525},{"id":7539,"depth":131,"text":7540},{"id":1381,"depth":109,"text":1381},"2026-06-24","梳理渲染主线程如何调度任务、异步为何必要、JS 为何会阻塞渲染，以及 Chrome 中延时\u002F交互\u002F微队列的优先级。",{},{"title":6362,"description":7614},"blog\u002Fjs-event-loop",[5521,7619,1449],"event-loop","zpAwwSlMoh5xOkPrZCWcA8rP62VybczZfOtCHemEflo",{"id":7622,"title":7623,"body":7624,"category":7995,"date":7996,"description":7997,"draft":1440,"extension":1441,"meta":7998,"navigation":241,"path":7999,"seo":8000,"stem":8001,"tags":8002,"__hash__":8006},"blog\u002Fblog\u002Fweb-piano.md","网页钢琴与 Web Audio 合成",{"type":8,"value":7625,"toc":7985},[7626,7629,7649,7652,7656,7666,7833,7837,7847,7855,7874,7878,7889,7893,7949,7956,7959,7970,7973,7975,7982],[11,7627,7623],{"id":7628},"网页钢琴与-web-audio-合成",[15,7630,7631,7632,7635,7636,7640,7641,7644,7645,7648],{},"Web Audio 不只能分析已有音频——用 ",[24,7633,7634],{},"振荡器（Oscillator）"," 也能从零合成声音。下面 demo 实现了一个 3 个八度的网页钢琴：按住琴键持续发声，松手渐弱；空格键控制延音踏板；还可点击内置乐谱自动演奏。若你读过 ",[51,7637,7639],{"href":7638},"\u002Fblog\u002Faudio-visualizer","Web Audio 音乐可视化","，那篇讲的是 ",[24,7642,7643],{},"AnalyserNode 分析播放","，本篇则走 ",[24,7646,7647],{},"合成发声"," 路线。",[78,7650,7651],{"id":7651},"核心链路",[438,7653,7655],{"id":7654},"_1-音高音符名-频率","1. 音高：音符名 → 频率",[15,7657,7658,7659,31,7662,7665],{},"每个琴键对应如 ",[19,7660,7661],{},"C4",[19,7663,7664],{},"F#5"," 的音符名。通过 MIDI 公式换算频率（A4 = 440Hz）：",[83,7667,7669],{"className":2489,"code":7668,"language":2485,"meta":88,"style":88},"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,7670,7671,7685,7735,7758,7793,7829],{"__ignoreMap":88},[92,7672,7673,7675,7678,7680,7683],{"class":94,"line":95},[92,7674,3471],{"class":200},[92,7676,7677],{"class":118}," noteToFreq",[92,7679,866],{"class":98},[92,7681,7682],{"class":3479},"note",[92,7684,3483],{"class":98},[92,7686,7687,7689,7692,7694,7697,7700,7702,7704,7707,7710,7713,7716,7719,7722,7725,7728,7731,7733],{"class":94,"line":109},[92,7688,3509],{"class":200},[92,7690,7691],{"class":190}," match",[92,7693,2503],{"class":200},[92,7695,7696],{"class":98}," note.",[92,7698,7699],{"class":118},"match",[92,7701,866],{"class":98},[92,7703,1393],{"class":125},[92,7705,7706],{"class":200},"^",[92,7708,866],{"class":7709},"sA_wV",[92,7711,7712],{"class":190},"[A-G]",[92,7714,7715],{"class":7709},"#",[92,7717,7718],{"class":200},"?",[92,7720,7721],{"class":7709},")(",[92,7723,7724],{"class":190},"\\d",[92,7726,7727],{"class":7709},")",[92,7729,7730],{"class":200},"$",[92,7732,1393],{"class":125},[92,7734,2517],{"class":98},[92,7736,7737,7739,7742,7745,7747,7750,7753,7755],{"class":94,"line":131},[92,7738,3509],{"class":200},[92,7740,7741],{"class":98}," [, ",[92,7743,7744],{"class":190},"name",[92,7746,3679],{"class":98},[92,7748,7749],{"class":190},"octaveStr",[92,7751,7752],{"class":98},"] ",[92,7754,122],{"class":200},[92,7756,7757],{"class":98}," match\n",[92,7759,7760,7762,7765,7767,7769,7772,7775,7777,7779,7781,7783,7785,7787,7790],{"class":94,"line":153},[92,7761,3509],{"class":200},[92,7763,7764],{"class":190}," midi",[92,7766,2503],{"class":200},[92,7768,3492],{"class":98},[92,7770,7771],{"class":118},"Number",[92,7773,7774],{"class":98},"(octaveStr) ",[92,7776,3694],{"class":200},[92,7778,4525],{"class":190},[92,7780,3685],{"class":98},[92,7782,3550],{"class":200},[92,7784,7177],{"class":190},[92,7786,3556],{"class":200},[92,7788,7789],{"class":190}," NOTE_INDEX",[92,7791,7792],{"class":98},"[name]\n",[92,7794,7795,7798,7801,7804,7806,7809,7811,7813,7816,7818,7821,7823,7825,7827],{"class":94,"line":163},[92,7796,7797],{"class":200},"  return",[92,7799,7800],{"class":190}," 440",[92,7802,7803],{"class":200}," *",[92,7805,3541],{"class":98},[92,7807,7808],{"class":118},"pow",[92,7810,866],{"class":98},[92,7812,4748],{"class":190},[92,7814,7815],{"class":98},", (midi ",[92,7817,3520],{"class":200},[92,7819,7820],{"class":190}," 69",[92,7822,3685],{"class":98},[92,7824,1393],{"class":200},[92,7826,7177],{"class":190},[92,7828,2517],{"class":98},[92,7830,7831],{"class":94,"line":238},[92,7832,235],{"class":98},[438,7834,7836],{"id":7835},"_2-发声振荡器-adsr-包络","2. 发声：振荡器 + ADSR 包络",[15,7838,7839,7840,7843,7844,340],{},"每次按键创建一个 ",[19,7841,7842],{},"OscillatorNode","（三角波）和 ",[19,7845,7846],{},"GainNode",[83,7848,7853],{"className":7849,"code":7851,"language":7852},[7850],"language-text","Oscillator → GainNode → destination\n","text",[19,7854,7851],{"__ignoreMap":88},[15,7856,7857,7858,7861,7862,7865,7866,7869,7870,7873],{},"按下时 ",[19,7859,7860],{},"gain"," 从极小值指数爬升到 ",[19,7863,7864],{},"PEAK_GAIN","（attack ≈ 20ms）；松手时指数衰减到 0 再 ",[19,7867,7868],{},"stop"," 振荡器。多音同奏用 ",[19,7871,7872],{},"Map\u003Cnote, voice>"," 管理，每个音符独立一条链路。",[438,7875,7877],{"id":7876},"_3-延音踏板","3. 延音踏板",[15,7879,7880,7881,7884,7885,7888],{},"踩下踏板（空格或点击踏板按钮）时，松开的键不会立刻 ",[19,7882,7883],{},"releaseVoice","，声音会保持到抬踏板。抬踏板后，所有 ",[19,7886,7887],{},"keyHeld === false"," 的 voice 才进入释放包络。",[438,7890,7892],{"id":7891},"_4-三路输入","4. 三路输入",[366,7894,7895,7904],{},[369,7896,7897],{},[372,7898,7899,7901],{},[375,7900,5585],{},[375,7902,7903],{},"处理方式",[384,7905,7906,7926,7937],{},[372,7907,7908,7911],{},[389,7909,7910],{},"鼠标 \u002F 触摸",[389,7912,7913,7916,7917,1399,7920,5960,7923],{},[19,7914,7915],{},"pointerdown"," 捕获 → ",[19,7918,7919],{},"pressNote",[19,7921,7922],{},"pointerup",[19,7924,7925],{},"releaseNote",[372,7927,7928,7931],{},[389,7929,7930],{},"物理键盘",[389,7932,7933,7936],{},[19,7934,7935],{},"KEY_MAP"," 映射 QWERTY 键到音符",[372,7938,7939,7942],{},[389,7940,7941],{},"内置乐谱",[389,7943,7944,7945,7948],{},"按 BPM 计算节拍时长，",[19,7946,7947],{},"playNoteTimed"," 定时发声",[15,7950,7951,7952,7955],{},"乐谱播放用 ",[19,7953,7954],{},"playToken"," 取消机制：切换曲目或点停止时递增 token，异步循环检测到 token 变化即退出。",[78,7957,7958],{"id":7958},"在线体验",[15,7960,7961,7962,7965,7966,57],{},"点击或键盘演奏（需用户手势后 ",[19,7963,7964],{},"AudioContext"," 才会 resume）。也可 ",[51,7967,7969],{"href":7968},"\u002Fdemos\u002Fweb-piano","全屏预览",[7971,7972],"web-piano-demo",{},[78,7974,1381],{"id":1381},[15,7976,7977,7978,7981],{},"网页钢琴的核心是 ",[24,7979,7980],{},"振荡器合成 + 包络塑形 + 多 voice 管理","。和音乐可视化的 AnalyserNode 不同，这里完全在「生成」声音。真实钢琴音色需要更复杂的采样或物理建模，但三角波 + 简单 ADSR 已足够演示 Web Audio 的合成路径。想继续深入，可以试试换波形、加滤波器，或接入 SoundFont 采样。",[1425,7983,7984],{},"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":88,"searchDepth":131,"depth":131,"links":7986},[7987,7993,7994],{"id":7651,"depth":109,"text":7651,"children":7988},[7989,7990,7991,7992],{"id":7654,"depth":131,"text":7655},{"id":7835,"depth":131,"text":7836},{"id":7876,"depth":131,"text":7877},{"id":7891,"depth":131,"text":7892},{"id":7958,"depth":109,"text":7958},{"id":1381,"depth":109,"text":1381},"music","2026-06-20","用振荡器与 GainNode 包络合成钢琴音，支持键盘演奏、延音踏板与内置乐谱自动播放。",{},"\u002Fblog\u002Fweb-piano",{"title":7623,"description":7997},"blog\u002Fweb-piano",[8003,8004,8005],"web-audio","piano","synthesis","X7pBoWNSCuyPLsw20K-xCjEh7X0xvqwlB3lQ2I-Xk4o",{"id":8008,"title":8009,"body":8010,"category":5514,"date":8250,"description":8251,"draft":1440,"extension":1441,"meta":8252,"navigation":241,"path":8253,"seo":8254,"stem":8255,"tags":8256,"__hash__":8260},"blog\u002Fblog\u002Finfinite-parallax-scroll.md","无限视差全屏滚动",{"type":8,"value":8011,"toc":8240},[8012,8014,8028,8030,8034,8047,8053,8074,8078,8107,8111,8122,8191,8195,8209,8211,8218,8221,8223],[11,8013,8009],{"id":8009},[15,8015,8016,8017,1599,8020,8023,8024,8027],{},"全屏图片轮播不一定要用 Swiper。把原生滚动禁掉，自己接管 ",[19,8018,8019],{},"wheel",[19,8021,8022],{},"touch","，用 ",[24,8025,8026],{},"prev \u002F cur \u002F next 三个 DOM 窗口","循环展示图片，配合遮罩高度动画和视差位移，就能做出无限滚动的切屏效果。下方 demo 可滚轮或滑动切换。",[78,8029,7651],{"id":7651},[438,8031,8033],{"id":8032},"_1-禁原生滚动统一输入","1. 禁原生滚动，统一输入",[15,8035,8036,8039,8040,8043,8044,340],{},[19,8037,8038],{},"html, body { overflow: hidden }","（全屏页）或容器 ",[19,8041,8042],{},"touch-action: none","，所有滚动意图都转成 ",[19,8045,8046],{},"pixelDelta",[83,8048,8051],{"className":8049,"code":8050,"language":7852},[7850],"wheel \u002F touch → applyScrollDelta → targetProgress ± step\n                                      ↓\n                              rAF lerp → progress → render()\n",[19,8052,8050],{"__ignoreMap":88},[15,8054,8055,1599,8057,2321,8059,8065,8066,8069,8070,8073],{},[19,8056,8019],{},[19,8058,8022],{},[24,8060,8061,8062],{},"只改 ",[19,8063,8064],{},"targetProgress","，不直接改 ",[19,8067,8068],{},"progress","，中间用 ",[19,8071,8072],{},"LERP"," 平滑追赶，手感更跟手。",[438,8075,8077],{"id":8076},"_2-三屏窗口-循环索引","2. 三屏窗口 + 循环索引",[15,8079,8080,8081,31,8084,31,8087,8090,8091,8094,8095,8098,8099,8102,8103,8106],{},"DOM 里始终只有三张 slide：",[19,8082,8083],{},"prev",[19,8085,8086],{},"cur",[19,8088,8089],{},"next","。当前 ",[19,8092,8093],{},"index"," 指向居中那张；切屏完成后 ",[19,8096,8097],{},"index ± 1","，重新 ",[19,8100,8101],{},"bindImages"," 绑定 ",[19,8104,8105],{},"(index-1, index, index+1)"," 取模后的图片 URL。图片列表再长，DOM 节点数也不变。",[438,8108,8110],{"id":8109},"_3-mask-高度实现切屏","3. mask 高度实现切屏",[15,8112,8113,8114,8117,8118,8121],{},"每张 slide 内有一层 ",[19,8115,8116],{},"slide__mask","，通过改 ",[19,8119,8120],{},"height"," 控制图片可见区域：",[366,8123,8124,8137],{},[369,8125,8126],{},[372,8127,8128,8131,8134],{},[375,8129,8130],{},"方向",[375,8132,8133],{},"动画",[375,8135,8136],{},"mask 变化",[384,8138,8139,8161,8180],{},[372,8140,8141,8144,8149],{},[389,8142,8143],{},"向下滚",[389,8145,8146],{},[19,8147,8148],{},"scroll-down",[389,8150,8151,8153,8154,5960,8157,8160],{},[19,8152,8089],{}," 的 mask 从 ",[19,8155,8156],{},"0%",[19,8158,8159],{},"100%","，新图从上落下",[372,8162,8163,8166,8171],{},[389,8164,8165],{},"向上滚",[389,8167,8168],{},[19,8169,8170],{},"scroll-up",[389,8172,8173,8153,8175,5960,8177,8179],{},[19,8174,8086],{},[19,8176,8159],{},[19,8178,8156],{},"，当前图收起露出上一张",[372,8181,8182,8185,8188],{},[389,8183,8184],{},"静止",[389,8186,8187],{},"idle",[389,8189,8190],{},"prev\u002Fcur 全显，next 隐藏",[438,8192,8194],{"id":8193},"_4-视差位移","4. 视差位移",[15,8196,8197,8198,8201,8202,8204,8205,8208],{},"新图落下前，图片先 ",[19,8199,8200],{},"translateY(PARALLAX_SHIFT%)"," 偏上一点；",[19,8203,8068],{}," 从 0→1 时逐渐回到 0。绝对值越大，下落感越强。位移由 JS 每帧写入，不用 CSS ",[19,8206,8207],{},"transition","，和 lerp 进度同步。",[78,8210,7958],{"id":7958},[15,8212,8213,8214,57],{},"在 demo 区域内滚轮或上下滑动切换图片。全屏体验可打开 ",[51,8215,8217],{"href":8216},"\u002Fdemos\u002Fparallax-scroll","独立预览页",[8219,8220],"parallax-scroll-demo",{},[78,8222,1381],{"id":1381},[15,8224,8225,8226,8229,8230,8233,8234,1599,8237,8239],{},"无限视差滚动的本质是 ",[24,8227,8228],{},"有限 DOM + 循环索引 + 自定义进度","。难点不在图片数量，而在输入统一（wheel 行\u002F页模式、触控板、触摸）、进度可逆（滚到一半往回滚能取消）、以及 ",[19,8231,8232],{},"prefers-reduced-motion"," 时关掉 lerp 拖尾。如果你要做类似效果，建议先把三屏窗口和 mask 动画跑通，再调 ",[19,8235,8236],{},"SCROLL_THRESHOLD",[19,8238,8072],{}," 找手感。",{"title":88,"searchDepth":131,"depth":131,"links":8241},[8242,8248,8249],{"id":7651,"depth":109,"text":7651,"children":8243},[8244,8245,8246,8247],{"id":8032,"depth":131,"text":8033},{"id":8076,"depth":131,"text":8077},{"id":8109,"depth":131,"text":8110},{"id":8193,"depth":131,"text":8194},{"id":7958,"depth":109,"text":7958},{"id":1381,"depth":109,"text":1381},"2026-06-15","禁用原生滚动，用 wheel 与 touch 驱动 prev\u002Fcur\u002Fnext 三屏窗口，mask 高度动画与 rAF lerp 实现无限视差切屏。",{},"\u002Fblog\u002Finfinite-parallax-scroll",{"title":8009,"description":8251},"blog\u002Finfinite-parallax-scroll",[8257,8258,8259,8022],"scroll","parallax","animation","HTL-V7yHnEHTcmos1lrSu5suLz2IHx5hmawb99kBb-0",{"id":8262,"title":8263,"body":8264,"category":5514,"date":8592,"description":8593,"draft":1440,"extension":1441,"meta":8594,"navigation":241,"path":8595,"seo":8596,"stem":8597,"tags":8598,"__hash__":8602},"blog\u002Fblog\u002Fcanvas-random-tree.md","Canvas 递归绘制随机分形树",{"type":8,"value":8265,"toc":8582},[8266,8269,8272,8274,8278,8284,8309,8316,8320,8335,8456,8460,8474,8535,8539,8554,8556,8563,8566,8568,8579],[11,8267,8263],{"id":8268},"canvas-递归绘制随机分形树",[15,8270,8271],{},"分形树是 Canvas 入门的经典练习：从树干出发，每画一节枝条就递归分叉，直到深度耗尽。加上伪随机种子，每次点击都能生成形态各异但风格统一的树。下面 demo 支持点击换树、窗口缩放高清重绘。",[78,8273,7651],{"id":7651},[438,8275,8277],{"id":8276},"_1-递归分形depth-驱动一切","1. 递归分形：depth 驱动一切",[15,8279,8280,8283],{},[19,8281,8282],{},"drawBranch(x, y, len, angle, depth, maxDepth)"," 是核心函数：",[1663,8285,8286,8293,8296,8303],{},[345,8287,8288,8289,8292],{},"画当前枝段（线宽由 ",[19,8290,8291],{},"depth \u002F maxDepth"," 的平方决定，主干粗、末梢细）",[345,8294,8295],{},"按深度决定分叉数量：主干区 2～3 叉，末梢 0～1 叉",[345,8297,8298,8299,8302],{},"子枝长度乘以 ",[19,8300,8301],{},"0.63～0.78"," 的随机缩放，逐层缩短",[345,8304,8305,8308],{},[19,8306,8307],{},"depth \u003C= 2"," 时在末梢稀疏开花",[15,8310,8311,8312,8315],{},"较粗的枝段还有概率从",[24,8313,8314],{},"线段中途","再分叉，让树形更自然。",[438,8317,8319],{"id":8318},"_2-角度约束树枝只朝上半平面","2. 角度约束：树枝只朝上半平面",[15,8321,8322,8323,8326,8327,8330,8331,8334],{},"Canvas 的 Y 轴向下，所以 ",[19,8324,8325],{},"sin(angle) \u003C= 0"," 表示朝上。",[19,8328,8329],{},"clampAngleUpward"," 把角度限制在 ",[19,8332,8333],{},"[-π, 0]","，避免枝条插进地面：",[83,8336,8338],{"className":2489,"code":8337,"language":2485,"meta":88,"style":88},"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,8339,8340,8354,8366,8400,8426,8445,8452],{"__ignoreMap":88},[92,8341,8342,8344,8347,8349,8352],{"class":94,"line":95},[92,8343,3471],{"class":200},[92,8345,8346],{"class":118}," clampAngleUpward",[92,8348,866],{"class":98},[92,8350,8351],{"class":3479},"angle",[92,8353,3483],{"class":98},[92,8355,8356,8359,8361,8363],{"class":94,"line":109},[92,8357,8358],{"class":200},"  let",[92,8360,3691],{"class":98},[92,8362,122],{"class":200},[92,8364,8365],{"class":98}," angle\n",[92,8367,8368,8370,8373,8376,8379,8382,8385,8388,8391,8393,8395,8397],{"class":94,"line":131},[92,8369,7029],{"class":200},[92,8371,8372],{"class":98}," (a ",[92,8374,8375],{"class":200},"\u003C=",[92,8377,8378],{"class":200}," -",[92,8380,8381],{"class":98},"Math.",[92,8383,8384],{"class":190},"PI",[92,8386,8387],{"class":98},") a ",[92,8389,8390],{"class":200},"+=",[92,8392,3541],{"class":98},[92,8394,8384],{"class":190},[92,8396,7803],{"class":200},[92,8398,8399],{"class":190}," 2\n",[92,8401,8402,8404,8406,8409,8411,8413,8415,8418,8420,8422,8424],{"class":94,"line":153},[92,8403,7029],{"class":200},[92,8405,8372],{"class":98},[92,8407,8408],{"class":200},">",[92,8410,3541],{"class":98},[92,8412,8384],{"class":190},[92,8414,8387],{"class":98},[92,8416,8417],{"class":200},"-=",[92,8419,3541],{"class":98},[92,8421,8384],{"class":190},[92,8423,7803],{"class":200},[92,8425,8399],{"class":190},[92,8427,8428,8430,8432,8434,8436,8438,8440,8442],{"class":94,"line":163},[92,8429,3489],{"class":200},[92,8431,8372],{"class":98},[92,8433,8408],{"class":200},[92,8435,4298],{"class":190},[92,8437,8387],{"class":98},[92,8439,122],{"class":200},[92,8441,8378],{"class":200},[92,8443,8444],{"class":98},"a\n",[92,8446,8447,8449],{"class":94,"line":238},[92,8448,7797],{"class":200},[92,8450,8451],{"class":98}," a\n",[92,8453,8454],{"class":94,"line":245},[92,8455,235],{"class":98},[438,8457,8459],{"id":8458},"_3-lcg-伪随机可复现的随机","3. LCG 伪随机：可复现的「随机」",[15,8461,8462,8463,8466,8467,8470,8471,8473],{},"用线性同余生成器（LCG）代替 ",[19,8464,8465],{},"Math.random()","，同一 ",[19,8468,8469],{},"seed"," 下每次绘制结果一致；点击画布时重置 ",[19,8472,8469],{},"，得到新树：",[83,8475,8477],{"className":2489,"code":8476,"language":2485,"meta":88,"style":88},"function rand() {\n  seed = (seed * 16807 + 0) % 2147483647\n  return (seed - 1) \u002F 2147483646\n}\n",[19,8478,8479,8488,8514,8531],{"__ignoreMap":88},[92,8480,8481,8483,8486],{"class":94,"line":95},[92,8482,3471],{"class":200},[92,8484,8485],{"class":118}," rand",[92,8487,3984],{"class":98},[92,8489,8490,8493,8495,8498,8500,8503,8505,8507,8509,8511],{"class":94,"line":109},[92,8491,8492],{"class":98},"  seed ",[92,8494,122],{"class":200},[92,8496,8497],{"class":98}," (seed ",[92,8499,3550],{"class":200},[92,8501,8502],{"class":190}," 16807",[92,8504,3556],{"class":200},[92,8506,4298],{"class":190},[92,8508,3685],{"class":98},[92,8510,263],{"class":200},[92,8512,8513],{"class":190}," 2147483647\n",[92,8515,8516,8518,8520,8522,8524,8526,8528],{"class":94,"line":131},[92,8517,7797],{"class":200},[92,8519,8497],{"class":98},[92,8521,3520],{"class":200},[92,8523,4525],{"class":190},[92,8525,3685],{"class":98},[92,8527,1393],{"class":200},[92,8529,8530],{"class":190}," 2147483646\n",[92,8532,8533],{"class":94,"line":153},[92,8534,235],{"class":98},[438,8536,8538],{"id":8537},"_4-devicepixelratio-高清适配","4. devicePixelRatio 高清适配",[15,8540,8541,8542,8545,8546,8549,8550,8553],{},"设置 ",[19,8543,8544],{},"canvas.width = cssWidth * dpr","，再用 ",[19,8547,8548],{},"ctx.setTransform(dpr, 0, 0, dpr, 0, 0)"," 缩放坐标系，Retina 屏上线条不会发虚。",[19,8551,8552],{},"resize"," 时按容器尺寸重算并整棵重绘。",[78,8555,7958],{"id":7958},[15,8557,8558,8559,8562],{},"点击下方画布可重新生成一棵树。也可 ",[51,8560,7969],{"href":8561},"\u002Fdemos\u002Frandom-tree"," 打开独立页面。",[8564,8565],"random-tree-demo",{},[78,8567,1381],{"id":1381},[15,8569,8570,8571,8574,8575,8578],{},"随机分形树的套路很固定：",[24,8572,8573],{},"递归 + 深度递减 + 随机参数","。难点在于细节——线宽平滑过渡、中途分叉、角度约束、末梢开花，这些让「算法树」看起来像「自然树」。如果你要做自己的生成艺术，可以从固定 ",[19,8576,8577],{},"maxDepth"," 和单一分叉规则开始，再逐步加随机性和装饰。",[1425,8580,8581],{},"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":88,"searchDepth":131,"depth":131,"links":8583},[8584,8590,8591],{"id":7651,"depth":109,"text":7651,"children":8585},[8586,8587,8588,8589],{"id":8276,"depth":131,"text":8277},{"id":8318,"depth":131,"text":8319},{"id":8458,"depth":131,"text":8459},{"id":8537,"depth":131,"text":8538},{"id":7958,"depth":109,"text":7958},{"id":1381,"depth":109,"text":1381},"2026-06-10","用 Canvas 递归分形画随机树，LCG 伪随机保证可复现，点击换一棵，并适配高清屏 DPR。",{},"\u002Fblog\u002Fcanvas-random-tree",{"title":8263,"description":8593},"blog\u002Fcanvas-random-tree",[8599,8600,8601],"canvas","recursion","generative-art","aFdlBHe97GxQsBjnQGInjuLSEwD6EV7SRTsDTScAShA",{"id":8604,"title":7639,"body":8605,"category":7995,"date":8882,"description":8883,"draft":1440,"extension":1441,"meta":8884,"navigation":241,"path":7638,"seo":8885,"stem":8886,"tags":8887,"__hash__":8889},"blog\u002Fblog\u002Faudio-visualizer.md",{"type":8,"value":8606,"toc":8873},[8607,8610,8628,8630,8652,8656,8664,8670,8683,8718,8733,8737,8746,8789,8792,8795,8799,8822,8824,8833,8836,8838,8851,8861,8870],[11,8608,7639],{"id":8609},"web-audio-音乐可视化",[15,8611,8612,8613,8616,8617,8620,8621,8545,8624,8627],{},"浏览器里的音乐播放器不只是 ",[19,8614,8615],{},"\u003Caudio>"," 控件。通过 ",[24,8618,8619],{},"Web Audio API"," 把音频流接入 ",[19,8622,8623],{},"AnalyserNode",[24,8625,8626],{},"Canvas"," 读取频谱数据，就能做出随节拍律动的可视化。下方 demo 支持四种频谱样式、LRC 歌词滚动与歌单切换。",[78,8629,7651],{"id":7651},[15,8631,8632,8633,8636,8637,8639,8640,8643,8644,8647,8648,8651],{},"整个 demo 可以拆成三条并行管线：",[24,8634,8635],{},"音频图","负责把 ",[19,8638,8615],{}," 接入 Web Audio；",[24,8641,8642],{},"Canvas 动画","每帧读取分析器数据并绘制；",[24,8645,8646],{},"歌词","根据 ",[19,8649,8650],{},"currentTime"," 滚动高亮。",[438,8653,8655],{"id":8654},"_1-音频图从元素到-analysernode","1. 音频图：从元素到 AnalyserNode",[15,8657,8658,8660,8661,8663],{},[19,8659,8615],{}," 本身只负责解码和播放。第一次点击播放时，才创建 ",[19,8662,7964],{}," 并把元素挂到音频图上：",[83,8665,8668],{"className":8666,"code":8667,"language":7852},[7850],"\u003Caudio> → MediaElementSource → AnalyserNode → destination（扬声器）\n                              ↓\n                    每帧读取频谱 \u002F 波形数据\n",[19,8669,8667],{"__ignoreMap":88},[15,8671,8672,8674,8675,8678,8679,8682],{},[19,8673,8623],{}," 是可视化的数据来源。",[19,8676,8677],{},"fftSize"," 设为 256（128 个频点），",[19,8680,8681],{},"smoothingTimeConstant"," 控制相邻帧的平滑程度——数值越大，柱状跳动越「黏」，越小则越灵敏。",[83,8684,8686],{"className":2489,"code":8685,"language":2485,"meta":88,"style":88},"audioCtx = new AudioContext()\nsource = audioCtx.createMediaElementSource(audio)\nanalyser = audioCtx.createAnalyser()\nanalyser.fftSize = 256\nsource.connect(analyser)\nanalyser.connect(audioCtx.destination)\n",[19,8687,8688,8693,8698,8703,8708,8713],{"__ignoreMap":88},[92,8689,8690],{"class":94,"line":95},[92,8691,8692],{},"audioCtx = new AudioContext()\n",[92,8694,8695],{"class":94,"line":109},[92,8696,8697],{},"source = audioCtx.createMediaElementSource(audio)\n",[92,8699,8700],{"class":94,"line":131},[92,8701,8702],{},"analyser = audioCtx.createAnalyser()\n",[92,8704,8705],{"class":94,"line":153},[92,8706,8707],{},"analyser.fftSize = 256\n",[92,8709,8710],{"class":94,"line":163},[92,8711,8712],{},"source.connect(analyser)\n",[92,8714,8715],{"class":94,"line":238},[92,8716,8717],{},"analyser.connect(audioCtx.destination)\n",[15,8719,8720,8721,8724,8725,8728,8729,8732],{},"浏览器要求 ",[24,8722,8723],{},"用户手势"," 后才能 ",[19,8726,8727],{},"resume()"," 音频上下文，所以 demo 必须点播放才能启动；暂停时取消 ",[19,8730,8731],{},"requestAnimationFrame","，Canvas 回到 idle 态。",[438,8734,8736],{"id":8735},"_2-canvas-绘制同一数据源四种画法","2. Canvas 绘制：同一数据源，四种画法",[15,8738,8739,8740,8742,8743,8745],{},"绘制循环在 ",[19,8741,8731],{}," 里跑。根据当前模式，从 ",[19,8744,8623],{}," 取不同数据：",[366,8747,8748,8761],{},[369,8749,8750],{},[372,8751,8752,8755,8758],{},[375,8753,8754],{},"模式",[375,8756,8757],{},"读取方法",[375,8759,8760],{},"绘制思路",[384,8762,8763,8776],{},[372,8764,8765,8768,8773],{},[389,8766,8767],{},"圆形 \u002F 柱状 \u002F 粒子",[389,8769,8770],{},[19,8771,8772],{},"getByteFrequencyData",[389,8774,8775],{},"128 个频点映射为半径、柱高或粒子位移",[372,8777,8778,8781,8786],{},[389,8779,8780],{},"波形",[389,8782,8783],{},[19,8784,8785],{},"getByteTimeDomainData",[389,8787,8788],{},"时域采样连成曲线，并做帧间平滑",[15,8790,8791],{},"频谱类模式用频率能量驱动视觉；波形模式看的是振幅随时间的变化。切歌或切模式时会清空帧间缓存，避免上一首的能量「残留」。",[15,8793,8794],{},"每首歌还配了一套主题色（主色、辅色、光晕），切歌时同步更新 Canvas 渐变和 UI 变量。",[438,8796,8798],{"id":8797},"_3-歌词同步","3. 歌词同步",[15,8800,8801,8802,8805,8806,8809,8810,8813,8814,8817,8818,8821],{},"LRC 文本先解析成 ",[19,8803,8804],{},"{ time, text }[]","，播放过程中根据 ",[19,8807,8808],{},"audio.currentTime"," 二分查找当前行，用 ",[19,8811,8812],{},"transform: translateY(...)"," 把高亮行滚到视口中央。",[19,8815,8816],{},"timeupdate"," 事件触发频繁，滚动逻辑做了 500ms 节流；点击某行歌词则 ",[19,8819,8820],{},"seek"," 到对应时间。",[78,8823,7958],{"id":7958},[15,8825,8826,8827,8829,8830,8562],{},"下方为完整交互 demo（需点击播放后启动 ",[19,8828,7964],{},"）。也可 ",[51,8831,7969],{"href":8832},"\u002Fdemos\u002Faudio-viz",[8834,8835],"audio-visualizer-demo",{},[78,8837,1381],{"id":1381},[15,8839,8840,8841,8850],{},"Web Audio 可视化并不复杂：",[24,8842,8843,8844,8846,8847,8849],{},"把 ",[19,8845,8615],{}," 接入 ",[19,8848,8623],{},"，再在 Canvas 里每帧读数据、画图形","。难点在于体验细节——播放前后的 idle 动画、切歌时的状态重置、波形与频谱不同的平滑策略，以及歌词与进度的双向联动。",[15,8852,8853,8854,8857,8858,8860],{},"四种频谱样式共用同一套分析器，只是映射方式不同；这也是前端可视化里常见的模式：",[24,8855,8856],{},"数据层稳定，表现层可插拔","。如果你要做自己的播放器可视化，可以从一个 ",[19,8859,8623],{}," + 一种绘制函数开始，再逐步加模式和主题。",[15,8862,8863,8864,8867,8868,57],{},"想走另一条 Web Audio 路线——用振荡器",[24,8865,8866],{},"合成","声音而非分析播放——可以看 ",[51,8869,7623],{"href":7999},[1425,8871,8872],{},"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":88,"searchDepth":131,"depth":131,"links":8874},[8875,8880,8881],{"id":7651,"depth":109,"text":7651,"children":8876},[8877,8878,8879],{"id":8654,"depth":131,"text":8655},{"id":8735,"depth":131,"text":8736},{"id":8797,"depth":131,"text":8798},{"id":7958,"depth":109,"text":7958},{"id":1381,"depth":109,"text":1381},"2026-05-18","用 Canvas 与 Web Audio API 实现圆形、柱状、波形、粒子四种频谱，并同步 LRC 歌词。",{},{"title":7639,"description":8883},"blog\u002Faudio-visualizer",[8003,8599,8888,2722],"visualization","ghCDv_tcwtPfmSAefPGprSYdKOWg6tvA3kUQQMnVylU",{"id":8891,"title":8892,"body":8893,"category":175,"date":11272,"description":11273,"draft":1440,"extension":1441,"meta":11274,"navigation":241,"path":11275,"seo":11276,"stem":11277,"tags":11278,"__hash__":11279},"blog\u002Fblog\u002Fcss-border-tricks.md","CSS 边框两式：动画渐变条纹与 border-image",{"type":8,"value":8894,"toc":11267},[8895,8898,8915,8919,8929,8951,8961,9449,9463,9466,10438,10442,10448,10466,10469,10513,10526,10618,10624,11229,11231,11261,11264],[11,8896,8892],{"id":8897},"css-边框两式动画渐变条纹与-border-image",[15,8899,8900,8901,8904,8905,8908,8909,8914],{},"给卡片加边框，不一定只靠 ",[19,8902,8903],{},"border: 1px solid","。纯 CSS 可以用",[24,8906,8907],{},"双层背景","画出会流动的渐变条纹；有切图素材时，用 ",[24,8910,8911],{},[19,8912,8913],{},"border-image"," 让装饰边框随容器伸缩。两种方案都不依赖 JavaScript，下面分别拆解。",[78,8916,8918],{"id":8917},"方案一动画渐变条纹边框","方案一：动画渐变条纹边框",[15,8920,8921,8922,8925,8926,8928],{},"思路是把 ",[19,8923,8924],{},"border"," 设为透明，再用两层 ",[19,8927,2574],{}," 分别填充内容区和边框区：",[342,8930,8931,8940],{},[345,8932,8933,1254,8936,8939],{},[24,8934,8935],{},"内层",[19,8937,8938],{},"padding-box","）：纯白底，盖住中间",[345,8941,8942,1254,8945,2175,8947,8950],{},[24,8943,8944],{},"外层",[19,8946,21],{},[19,8948,8949],{},"repeating-linear-gradient"," 画斜向色块条纹",[15,8952,8953,8956,8957,8960],{},[19,8954,8955],{},"@keyframes"," 只移动外层背景的 ",[19,8958,8959],{},"background-position","，hover 时条纹就会沿对角线流动。",[2483,8962,8964],{"lang":175,"title":8963},"条纹边框核心 CSS",[83,8965,8967],{"className":173,"code":8966,"language":175,"meta":88,"style":88},".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,8968,8969,8976,8989,9018,9031,9067,9071,9083,9106,9118,9125,9146,9154,9163,9179,9215,9244,9274,9314,9319,9326,9330,9334,9341,9362,9366,9370,9379,9386,9393,9402,9441,9445],{"__ignoreMap":88},[92,8970,8971,8974],{"class":94,"line":95},[92,8972,8973],{"class":118},".card",[92,8975,185],{"class":98},[92,8977,8978,8981,8983,8985,8987],{"class":94,"line":109},[92,8979,8980],{"class":3479},"  --stripe-length",[92,8982,194],{"class":98},[92,8984,5094],{"class":190},[92,8986,201],{"class":200},[92,8988,204],{"class":98},[92,8990,8991,8994,8996,8999,9001,9004,9006,9009,9011,9013,9016],{"class":94,"line":131},[92,8992,8993],{"class":3479},"  --stripe-width",[92,8995,194],{"class":98},[92,8997,8998],{"class":190},"calc",[92,9000,866],{"class":98},[92,9002,9003],{"class":190},"var",[92,9005,866],{"class":98},[92,9007,9008],{"class":3479},"--stripe-length",[92,9010,3685],{"class":98},[92,9012,1393],{"class":200},[92,9014,9015],{"class":190}," 3",[92,9017,875],{"class":98},[92,9019,9020,9023,9025,9027,9029],{"class":94,"line":153},[92,9021,9022],{"class":3479},"  --stripe-gap",[92,9024,194],{"class":98},[92,9026,731],{"class":190},[92,9028,201],{"class":200},[92,9030,204],{"class":98},[92,9032,9033,9036,9038,9040,9042,9044,9046,9048,9050,9052,9055,9057,9060,9063,9065],{"class":94,"line":163},[92,9034,9035],{"class":3479},"  --stripe-period",[92,9037,194],{"class":98},[92,9039,8998],{"class":190},[92,9041,3674],{"class":98},[92,9043,9003],{"class":190},[92,9045,866],{"class":98},[92,9047,9008],{"class":3479},[92,9049,3685],{"class":98},[92,9051,3694],{"class":200},[92,9053,9054],{"class":190}," var",[92,9056,866],{"class":98},[92,9058,9059],{"class":3479},"--stripe-gap",[92,9061,9062],{"class":98},")) * ",[92,9064,4748],{"class":190},[92,9066,875],{"class":98},[92,9068,9069],{"class":94,"line":238},[92,9070,242],{"emptyLinePlaceholder":241},[92,9072,9073,9075,9077,9079,9081],{"class":94,"line":245},[92,9074,4241],{"class":190},[92,9076,194],{"class":98},[92,9078,731],{"class":190},[92,9080,201],{"class":200},[92,9082,204],{"class":98},[92,9084,9085,9087,9089,9091,9093,9096,9098,9101,9104],{"class":94,"line":253},[92,9086,627],{"class":190},[92,9088,194],{"class":98},[92,9090,9003],{"class":190},[92,9092,866],{"class":98},[92,9094,9095],{"class":3479},"--stripe-width",[92,9097,3685],{"class":98},[92,9099,9100],{"class":190},"solid",[92,9102,9103],{"class":190}," transparent",[92,9105,204],{"class":98},[92,9107,9108,9110,9112,9114,9116],{"class":94,"line":268},[92,9109,4404],{"class":190},[92,9111,194],{"class":98},[92,9113,5262],{"class":190},[92,9115,201],{"class":200},[92,9117,204],{"class":98},[92,9119,9120,9122],{"class":94,"line":281},[92,9121,4419],{"class":190},[92,9123,9124],{"class":98},":\n",[92,9126,9127,9130,9132,9135,9137,9139,9141,9143],{"class":94,"line":293},[92,9128,9129],{"class":190},"    linear-gradient",[92,9131,866],{"class":98},[92,9133,9134],{"class":190},"#fff",[92,9136,3679],{"class":98},[92,9138,9134],{"class":190},[92,9140,3685],{"class":98},[92,9142,8938],{"class":190},[92,9144,9145],{"class":98},",\n",[92,9147,9148,9151],{"class":94,"line":642},[92,9149,9150],{"class":190},"    repeating-linear-gradient",[92,9152,9153],{"class":98},"(\n",[92,9155,9156,9159,9161],{"class":94,"line":657},[92,9157,9158],{"class":190},"        -45",[92,9160,872],{"class":200},[92,9162,9145],{"class":98},[92,9164,9165,9168,9170,9172,9174,9176],{"class":94,"line":662},[92,9166,9167],{"class":190},"        #2dd4bf",[92,9169,4298],{"class":190},[92,9171,9054],{"class":190},[92,9173,866],{"class":98},[92,9175,9008],{"class":3479},[92,9177,9178],{"class":98},"),\n",[92,9180,9181,9184,9186,9188,9190,9192,9194,9196,9198,9200,9202,9204,9206,9208,9210,9212],{"class":94,"line":667},[92,9182,9183],{"class":190},"        #fff",[92,9185,9054],{"class":190},[92,9187,866],{"class":98},[92,9189,9008],{"class":3479},[92,9191,3685],{"class":98},[92,9193,8998],{"class":190},[92,9195,866],{"class":98},[92,9197,9003],{"class":190},[92,9199,866],{"class":98},[92,9201,9008],{"class":3479},[92,9203,3685],{"class":98},[92,9205,3694],{"class":200},[92,9207,9054],{"class":190},[92,9209,866],{"class":98},[92,9211,9059],{"class":3479},[92,9213,9214],{"class":98},")),\n",[92,9216,9217,9220,9223,9225,9227,9229,9231,9233,9235,9237,9239,9241],{"class":94,"line":675},[92,9218,9219],{"class":190},"        #fb7185",[92,9221,9222],{"class":190}," calc",[92,9224,866],{"class":98},[92,9226,9003],{"class":190},[92,9228,866],{"class":98},[92,9230,9008],{"class":3479},[92,9232,3685],{"class":98},[92,9234,3694],{"class":200},[92,9236,9054],{"class":190},[92,9238,866],{"class":98},[92,9240,9059],{"class":3479},[92,9242,9243],{"class":98},"))\n",[92,9245,9246,9249,9251,9253,9255,9257,9259,9261,9264,9266,9268,9270,9272],{"class":94,"line":688},[92,9247,9248],{"class":190},"          calc",[92,9250,866],{"class":98},[92,9252,9003],{"class":190},[92,9254,866],{"class":98},[92,9256,9008],{"class":3479},[92,9258,3685],{"class":98},[92,9260,3550],{"class":200},[92,9262,9263],{"class":190}," 2",[92,9265,3556],{"class":200},[92,9267,9054],{"class":190},[92,9269,866],{"class":98},[92,9271,9059],{"class":3479},[92,9273,9214],{"class":98},[92,9275,9276,9278,9280,9282,9284,9286,9288,9290,9292,9294,9296,9298,9300,9302,9305,9307,9309,9312],{"class":94,"line":701},[92,9277,9183],{"class":190},[92,9279,9222],{"class":190},[92,9281,866],{"class":98},[92,9283,9003],{"class":190},[92,9285,866],{"class":98},[92,9287,9008],{"class":3479},[92,9289,3685],{"class":98},[92,9291,3550],{"class":200},[92,9293,9263],{"class":190},[92,9295,3556],{"class":200},[92,9297,9054],{"class":190},[92,9299,866],{"class":98},[92,9301,9059],{"class":3479},[92,9303,9304],{"class":98},")) ",[92,9306,9003],{"class":190},[92,9308,866],{"class":98},[92,9310,9311],{"class":3479},"--stripe-period",[92,9313,2517],{"class":98},[92,9315,9316],{"class":94,"line":712},[92,9317,9318],{"class":98},"      )\n",[92,9320,9321,9324],{"class":94,"line":723},[92,9322,9323],{"class":190},"      border-box",[92,9325,204],{"class":98},[92,9327,9328],{"class":94,"line":738},[92,9329,235],{"class":98},[92,9331,9332],{"class":94,"line":752},[92,9333,242],{"emptyLinePlaceholder":241},[92,9335,9336,9339],{"class":94,"line":3029},[92,9337,9338],{"class":118},".card:hover",[92,9340,185],{"class":98},[92,9342,9343,9346,9349,9351,9354,9357,9360],{"class":94,"line":3050},[92,9344,9345],{"class":190},"  animation",[92,9347,9348],{"class":98},": stripe-flow ",[92,9350,4389],{"class":190},[92,9352,9353],{"class":200},"s",[92,9355,9356],{"class":190}," linear",[92,9358,9359],{"class":190}," infinite",[92,9361,204],{"class":98},[92,9363,9364],{"class":94,"line":3059},[92,9365,235],{"class":98},[92,9367,9368],{"class":94,"line":3074},[92,9369,242],{"emptyLinePlaceholder":241},[92,9371,9372,9374,9377],{"class":94,"line":3106},[92,9373,8955],{"class":200},[92,9375,9376],{"class":3479}," stripe-flow",[92,9378,185],{"class":98},[92,9380,9381,9384],{"class":94,"line":3115},[92,9382,9383],{"class":118},"  to",[92,9385,185],{"class":98},[92,9387,9388,9391],{"class":94,"line":3135},[92,9389,9390],{"class":190},"    background-position",[92,9392,9124],{"class":98},[92,9394,9395,9398,9400],{"class":94,"line":3144},[92,9396,9397],{"class":190},"      0",[92,9399,4298],{"class":190},[92,9401,9145],{"class":98},[92,9403,9404,9407,9409,9411,9413,9415,9417,9419,9421,9423,9425,9427,9429,9431,9433,9435,9437,9439],{"class":94,"line":3153},[92,9405,9406],{"class":190},"      calc",[92,9408,866],{"class":98},[92,9410,9003],{"class":190},[92,9412,866],{"class":98},[92,9414,9311],{"class":3479},[92,9416,3685],{"class":98},[92,9418,3550],{"class":200},[92,9420,4525],{"class":190},[92,9422,3685],{"class":98},[92,9424,8998],{"class":190},[92,9426,866],{"class":98},[92,9428,9003],{"class":190},[92,9430,866],{"class":98},[92,9432,9311],{"class":3479},[92,9434,3685],{"class":98},[92,9436,3550],{"class":200},[92,9438,4525],{"class":190},[92,9440,875],{"class":98},[92,9442,9443],{"class":94,"line":3158},[92,9444,4129],{"class":98},[92,9446,9447],{"class":94,"line":3174},[92,9448,235],{"class":98},[15,9450,9451,340,9454,9456,9457,9459,9460,9462],{},[24,9452,9453],{},"可调参数",[19,9455,9008],{}," 控制色块长度，",[19,9458,9059],{}," 控制白色细缝宽度，改 ",[19,9461,9095],{}," 等价于改边框粗细。",[15,9464,9465],{},"悬停卡片，观察条纹流动：",[2715,9467,9469],{"title":9468},"动画条纹边框",[83,9470,9472],{"className":2720,"code":9471,"language":2722,"meta":88,"style":88},"\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,9473,9474,9482,9497,9512,9527,9532,9540,9548,9556,9564,9568,9578,9585,9595,9606,9620,9632,9668,9680,9684,9688,9694,9706,9730,9742,9774,9798,9810,9822,9842,9852,9858,9876,9882,9890,9904,9938,9964,9992,10030,10034,10040,10059,10066,10105,10141,10168,10172,10176,10182,10200,10206,10240,10272,10288,10292,10296,10304,10310,10316,10324,10362,10366,10370,10374,10381,10391,10404,10415,10426,10430],{"__ignoreMap":88},[92,9475,9476,9478,9480],{"class":94,"line":95},[92,9477,99],{"class":98},[92,9479,2731],{"class":102},[92,9481,106],{"class":98},[92,9483,9484,9486,9488,9490,9492,9495],{"class":94,"line":109},[92,9485,112],{"class":98},[92,9487,115],{"class":102},[92,9489,119],{"class":118},[92,9491,122],{"class":98},[92,9493,9494],{"class":125},"\"stage\"",[92,9496,106],{"class":98},[92,9498,9499,9501,9503,9505,9507,9510],{"class":94,"line":131},[92,9500,134],{"class":98},[92,9502,115],{"class":102},[92,9504,119],{"class":118},[92,9506,122],{"class":98},[92,9508,9509],{"class":125},"\"card\"",[92,9511,106],{"class":98},[92,9513,9514,9516,9518,9520,9522,9525],{"class":94,"line":153},[92,9515,487],{"class":98},[92,9517,15],{"class":102},[92,9519,119],{"class":118},[92,9521,122],{"class":98},[92,9523,9524],{"class":125},"\"ct\"",[92,9526,106],{"class":98},[92,9528,9529],{"class":94,"line":163},[92,9530,9531],{"class":98},"        悬停此卡片，斜向条纹会沿对角线流动。纯 CSS 实现，无需图片。\n",[92,9533,9534,9536,9538],{"class":94,"line":238},[92,9535,1088],{"class":98},[92,9537,15],{"class":102},[92,9539,106],{"class":98},[92,9541,9542,9544,9546],{"class":94,"line":245},[92,9543,507],{"class":98},[92,9545,115],{"class":102},[92,9547,106],{"class":98},[92,9549,9550,9552,9554],{"class":94,"line":253},[92,9551,156],{"class":98},[92,9553,115],{"class":102},[92,9555,106],{"class":98},[92,9557,9558,9560,9562],{"class":94,"line":268},[92,9559,166],{"class":98},[92,9561,2731],{"class":102},[92,9563,106],{"class":98},[92,9565,9566],{"class":94,"line":281},[92,9567,242],{"emptyLinePlaceholder":241},[92,9569,9570,9572,9574,9576],{"class":94,"line":293},[92,9571,99],{"class":98},[92,9573,1425],{"class":102},[92,9575,4225],{"class":118},[92,9577,106],{"class":98},[92,9579,9580,9583],{"class":94,"line":642},[92,9581,9582],{"class":118},".stage",[92,9584,185],{"class":98},[92,9586,9587,9589,9591,9593],{"class":94,"line":657},[92,9588,1742],{"class":190},[92,9590,194],{"class":98},[92,9592,4454],{"class":190},[92,9594,204],{"class":98},[92,9596,9597,9600,9602,9604],{"class":94,"line":662},[92,9598,9599],{"class":190},"  place-items",[92,9601,194],{"class":98},[92,9603,4649],{"class":190},[92,9605,204],{"class":98},[92,9607,9608,9611,9613,9616,9618],{"class":94,"line":667},[92,9609,9610],{"class":190},"  min-height",[92,9612,194],{"class":98},[92,9614,9615],{"class":190},"220",[92,9617,201],{"class":200},[92,9619,204],{"class":98},[92,9621,9622,9624,9626,9628,9630],{"class":94,"line":675},[92,9623,4241],{"class":190},[92,9625,194],{"class":98},[92,9627,5094],{"class":190},[92,9629,201],{"class":200},[92,9631,204],{"class":98},[92,9633,9634,9636,9638,9641,9643,9646,9648,9650,9653,9655,9657,9659,9662,9664,9666],{"class":94,"line":688},[92,9635,4419],{"class":190},[92,9637,194],{"class":98},[92,9639,9640],{"class":190},"linear-gradient",[92,9642,866],{"class":98},[92,9644,9645],{"class":190},"135",[92,9647,872],{"class":200},[92,9649,3679],{"class":98},[92,9651,9652],{"class":190},"#f0fdfa",[92,9654,4298],{"class":190},[92,9656,263],{"class":200},[92,9658,3679],{"class":98},[92,9660,9661],{"class":190},"#fff5f7",[92,9663,3553],{"class":190},[92,9665,263],{"class":200},[92,9667,875],{"class":98},[92,9669,9670,9672,9674,9676,9678],{"class":94,"line":701},[92,9671,4404],{"class":190},[92,9673,194],{"class":98},[92,9675,4467],{"class":190},[92,9677,201],{"class":200},[92,9679,204],{"class":98},[92,9681,9682],{"class":94,"line":712},[92,9683,235],{"class":98},[92,9685,9686],{"class":94,"line":723},[92,9687,242],{"emptyLinePlaceholder":241},[92,9689,9690,9692],{"class":94,"line":738},[92,9691,8973],{"class":118},[92,9693,185],{"class":98},[92,9695,9696,9698,9700,9702,9704],{"class":94,"line":752},[92,9697,8980],{"class":3479},[92,9699,194],{"class":98},[92,9701,5094],{"class":190},[92,9703,201],{"class":200},[92,9705,204],{"class":98},[92,9707,9708,9710,9712,9714,9716,9718,9720,9722,9724,9726,9728],{"class":94,"line":3029},[92,9709,8993],{"class":3479},[92,9711,194],{"class":98},[92,9713,8998],{"class":190},[92,9715,866],{"class":98},[92,9717,9003],{"class":190},[92,9719,866],{"class":98},[92,9721,9008],{"class":3479},[92,9723,3685],{"class":98},[92,9725,1393],{"class":200},[92,9727,9015],{"class":190},[92,9729,875],{"class":98},[92,9731,9732,9734,9736,9738,9740],{"class":94,"line":3050},[92,9733,9022],{"class":3479},[92,9735,194],{"class":98},[92,9737,731],{"class":190},[92,9739,201],{"class":200},[92,9741,204],{"class":98},[92,9743,9744,9746,9748,9750,9752,9754,9756,9758,9760,9762,9764,9766,9768,9770,9772],{"class":94,"line":3059},[92,9745,9035],{"class":3479},[92,9747,194],{"class":98},[92,9749,8998],{"class":190},[92,9751,3674],{"class":98},[92,9753,9003],{"class":190},[92,9755,866],{"class":98},[92,9757,9008],{"class":3479},[92,9759,3685],{"class":98},[92,9761,3694],{"class":200},[92,9763,9054],{"class":190},[92,9765,866],{"class":98},[92,9767,9059],{"class":3479},[92,9769,9062],{"class":98},[92,9771,4748],{"class":190},[92,9773,875],{"class":98},[92,9775,9776,9778,9780,9783,9785,9787,9789,9791,9794,9796],{"class":94,"line":3074},[92,9777,191],{"class":190},[92,9779,194],{"class":98},[92,9781,9782],{"class":190},"min",[92,9784,866],{"class":98},[92,9786,650],{"class":190},[92,9788,263],{"class":200},[92,9790,3679],{"class":98},[92,9792,9793],{"class":190},"320",[92,9795,201],{"class":200},[92,9797,875],{"class":98},[92,9799,9800,9802,9804,9806,9808],{"class":94,"line":3106},[92,9801,4241],{"class":190},[92,9803,194],{"class":98},[92,9805,731],{"class":190},[92,9807,201],{"class":200},[92,9809,204],{"class":98},[92,9811,9812,9814,9816,9818,9820],{"class":94,"line":3115},[92,9813,4404],{"class":190},[92,9815,194],{"class":98},[92,9817,5262],{"class":190},[92,9819,201],{"class":200},[92,9821,204],{"class":98},[92,9823,9824,9826,9828,9830,9832,9834,9836,9838,9840],{"class":94,"line":3135},[92,9825,627],{"class":190},[92,9827,194],{"class":98},[92,9829,9003],{"class":190},[92,9831,866],{"class":98},[92,9833,9095],{"class":3479},[92,9835,3685],{"class":98},[92,9837,9100],{"class":190},[92,9839,9103],{"class":190},[92,9841,204],{"class":98},[92,9843,9844,9846,9848,9850],{"class":94,"line":3144},[92,9845,5366],{"class":190},[92,9847,194],{"class":98},[92,9849,5371],{"class":190},[92,9851,204],{"class":98},[92,9853,9854,9856],{"class":94,"line":3153},[92,9855,4419],{"class":190},[92,9857,9124],{"class":98},[92,9859,9860,9862,9864,9866,9868,9870,9872,9874],{"class":94,"line":3158},[92,9861,9129],{"class":190},[92,9863,866],{"class":98},[92,9865,9134],{"class":190},[92,9867,3679],{"class":98},[92,9869,9134],{"class":190},[92,9871,3685],{"class":98},[92,9873,8938],{"class":190},[92,9875,9145],{"class":98},[92,9877,9878,9880],{"class":94,"line":3174},[92,9879,9150],{"class":190},[92,9881,9153],{"class":98},[92,9883,9884,9886,9888],{"class":94,"line":3207},[92,9885,9158],{"class":190},[92,9887,872],{"class":200},[92,9889,9145],{"class":98},[92,9891,9892,9894,9896,9898,9900,9902],{"class":94,"line":3213},[92,9893,9167],{"class":190},[92,9895,4298],{"class":190},[92,9897,9054],{"class":190},[92,9899,866],{"class":98},[92,9901,9008],{"class":3479},[92,9903,9178],{"class":98},[92,9905,9906,9908,9910,9912,9914,9916,9918,9920,9922,9924,9926,9928,9930,9932,9934,9936],{"class":94,"line":3222},[92,9907,9183],{"class":190},[92,9909,9054],{"class":190},[92,9911,866],{"class":98},[92,9913,9008],{"class":3479},[92,9915,3685],{"class":98},[92,9917,8998],{"class":190},[92,9919,866],{"class":98},[92,9921,9003],{"class":190},[92,9923,866],{"class":98},[92,9925,9008],{"class":3479},[92,9927,3685],{"class":98},[92,9929,3694],{"class":200},[92,9931,9054],{"class":190},[92,9933,866],{"class":98},[92,9935,9059],{"class":3479},[92,9937,9214],{"class":98},[92,9939,9940,9942,9944,9946,9948,9950,9952,9954,9956,9958,9960,9962],{"class":94,"line":3250},[92,9941,9219],{"class":190},[92,9943,9222],{"class":190},[92,9945,866],{"class":98},[92,9947,9003],{"class":190},[92,9949,866],{"class":98},[92,9951,9008],{"class":3479},[92,9953,3685],{"class":98},[92,9955,3694],{"class":200},[92,9957,9054],{"class":190},[92,9959,866],{"class":98},[92,9961,9059],{"class":3479},[92,9963,9243],{"class":98},[92,9965,9966,9968,9970,9972,9974,9976,9978,9980,9982,9984,9986,9988,9990],{"class":94,"line":3259},[92,9967,9248],{"class":190},[92,9969,866],{"class":98},[92,9971,9003],{"class":190},[92,9973,866],{"class":98},[92,9975,9008],{"class":3479},[92,9977,3685],{"class":98},[92,9979,3550],{"class":200},[92,9981,9263],{"class":190},[92,9983,3556],{"class":200},[92,9985,9054],{"class":190},[92,9987,866],{"class":98},[92,9989,9059],{"class":3479},[92,9991,9214],{"class":98},[92,9993,9994,9996,9998,10000,10002,10004,10006,10008,10010,10012,10014,10016,10018,10020,10022,10024,10026,10028],{"class":94,"line":3268},[92,9995,9183],{"class":190},[92,9997,9222],{"class":190},[92,9999,866],{"class":98},[92,10001,9003],{"class":190},[92,10003,866],{"class":98},[92,10005,9008],{"class":3479},[92,10007,3685],{"class":98},[92,10009,3550],{"class":200},[92,10011,9263],{"class":190},[92,10013,3556],{"class":200},[92,10015,9054],{"class":190},[92,10017,866],{"class":98},[92,10019,9059],{"class":3479},[92,10021,9304],{"class":98},[92,10023,9003],{"class":190},[92,10025,866],{"class":98},[92,10027,9311],{"class":3479},[92,10029,2517],{"class":98},[92,10031,10032],{"class":94,"line":3277},[92,10033,9318],{"class":98},[92,10035,10036,10038],{"class":94,"line":3282},[92,10037,9323],{"class":190},[92,10039,204],{"class":98},[92,10041,10042,10045,10047,10049,10051,10053,10055,10057],{"class":94,"line":3295},[92,10043,10044],{"class":190},"  background-position",[92,10046,194],{"class":98},[92,10048,869],{"class":190},[92,10050,4298],{"class":190},[92,10052,3679],{"class":98},[92,10054,869],{"class":190},[92,10056,4298],{"class":190},[92,10058,204],{"class":98},[92,10060,10061,10064],{"class":94,"line":3310},[92,10062,10063],{"class":190},"  box-shadow",[92,10065,9124],{"class":98},[92,10067,10068,10071,10073,10075,10078,10080,10083,10085,10088,10090,10093,10095,10098,10100,10103],{"class":94,"line":3315},[92,10069,10070],{"class":190},"    0",[92,10072,3918],{"class":190},[92,10074,201],{"class":200},[92,10076,10077],{"class":190}," 40",[92,10079,201],{"class":200},[92,10081,10082],{"class":190}," rgba",[92,10084,866],{"class":98},[92,10086,10087],{"class":190},"45",[92,10089,3679],{"class":98},[92,10091,10092],{"class":190},"212",[92,10094,3679],{"class":98},[92,10096,10097],{"class":190},"191",[92,10099,3679],{"class":98},[92,10101,10102],{"class":190},"0.12",[92,10104,9178],{"class":98},[92,10106,10107,10109,10111,10113,10115,10117,10119,10121,10124,10126,10129,10131,10134,10136,10139],{"class":94,"line":3334},[92,10108,10070],{"class":190},[92,10110,4394],{"class":190},[92,10112,201],{"class":200},[92,10114,7177],{"class":190},[92,10116,201],{"class":200},[92,10118,10082],{"class":190},[92,10120,866],{"class":98},[92,10122,10123],{"class":190},"251",[92,10125,3679],{"class":98},[92,10127,10128],{"class":190},"113",[92,10130,3679],{"class":98},[92,10132,10133],{"class":190},"133",[92,10135,3679],{"class":98},[92,10137,10138],{"class":190},"0.08",[92,10140,875],{"class":98},[92,10142,10143,10146,10149,10152,10154,10157,10160,10162,10164,10166],{"class":94,"line":3352},[92,10144,10145],{"class":190},"  transition",[92,10147,10148],{"class":98},": transform ",[92,10150,10151],{"class":190},"0.35",[92,10153,9353],{"class":200},[92,10155,10156],{"class":190}," ease",[92,10158,10159],{"class":98},", box-shadow ",[92,10161,10151],{"class":190},[92,10163,9353],{"class":200},[92,10165,10156],{"class":190},[92,10167,204],{"class":98},[92,10169,10170],{"class":94,"line":3370},[92,10171,235],{"class":98},[92,10173,10174],{"class":94,"line":3388},[92,10175,242],{"emptyLinePlaceholder":241},[92,10177,10178,10180],{"class":94,"line":3407},[92,10179,9338],{"class":118},[92,10181,185],{"class":98},[92,10183,10184,10186,10188,10191,10193,10196,10198],{"class":94,"line":3412},[92,10185,858],{"class":190},[92,10187,194],{"class":98},[92,10189,10190],{"class":190},"translateY",[92,10192,866],{"class":98},[92,10194,10195],{"class":190},"-4",[92,10197,201],{"class":200},[92,10199,875],{"class":98},[92,10201,10202,10204],{"class":94,"line":3426},[92,10203,10063],{"class":190},[92,10205,9124],{"class":98},[92,10207,10208,10210,10212,10214,10217,10219,10221,10223,10225,10227,10229,10231,10233,10235,10238],{"class":94,"line":3438},[92,10209,10070],{"class":190},[92,10211,5298],{"class":190},[92,10213,201],{"class":200},[92,10215,10216],{"class":190}," 48",[92,10218,201],{"class":200},[92,10220,10082],{"class":190},[92,10222,866],{"class":98},[92,10224,10087],{"class":190},[92,10226,3679],{"class":98},[92,10228,10092],{"class":190},[92,10230,3679],{"class":98},[92,10232,10097],{"class":190},[92,10234,3679],{"class":98},[92,10236,10237],{"class":190},"0.2",[92,10239,9178],{"class":98},[92,10241,10242,10244,10246,10248,10250,10252,10254,10256,10258,10260,10262,10264,10266,10268,10270],{"class":94,"line":3451},[92,10243,10070],{"class":190},[92,10245,4753],{"class":190},[92,10247,201],{"class":200},[92,10249,3644],{"class":190},[92,10251,201],{"class":200},[92,10253,10082],{"class":190},[92,10255,866],{"class":98},[92,10257,10123],{"class":190},[92,10259,3679],{"class":98},[92,10261,10128],{"class":190},[92,10263,3679],{"class":98},[92,10265,10133],{"class":190},[92,10267,3679],{"class":98},[92,10269,10102],{"class":190},[92,10271,875],{"class":98},[92,10273,10274,10276,10278,10280,10282,10284,10286],{"class":94,"line":3463},[92,10275,9345],{"class":190},[92,10277,9348],{"class":98},[92,10279,4389],{"class":190},[92,10281,9353],{"class":200},[92,10283,9356],{"class":190},[92,10285,9359],{"class":190},[92,10287,204],{"class":98},[92,10289,10290],{"class":94,"line":3468},[92,10291,235],{"class":98},[92,10293,10294],{"class":94,"line":3486},[92,10295,242],{"emptyLinePlaceholder":241},[92,10297,10298,10300,10302],{"class":94,"line":3506},[92,10299,8955],{"class":200},[92,10301,9376],{"class":3479},[92,10303,185],{"class":98},[92,10305,10306,10308],{"class":94,"line":3531},[92,10307,9383],{"class":118},[92,10309,185],{"class":98},[92,10311,10312,10314],{"class":94,"line":3562},[92,10313,9390],{"class":190},[92,10315,9124],{"class":98},[92,10317,10318,10320,10322],{"class":94,"line":3567},[92,10319,9397],{"class":190},[92,10321,4298],{"class":190},[92,10323,9145],{"class":98},[92,10325,10326,10328,10330,10332,10334,10336,10338,10340,10342,10344,10346,10348,10350,10352,10354,10356,10358,10360],{"class":94,"line":3585},[92,10327,9406],{"class":190},[92,10329,866],{"class":98},[92,10331,9003],{"class":190},[92,10333,866],{"class":98},[92,10335,9311],{"class":3479},[92,10337,3685],{"class":98},[92,10339,3550],{"class":200},[92,10341,4525],{"class":190},[92,10343,3685],{"class":98},[92,10345,8998],{"class":190},[92,10347,866],{"class":98},[92,10349,9003],{"class":190},[92,10351,866],{"class":98},[92,10353,9311],{"class":3479},[92,10355,3685],{"class":98},[92,10357,3550],{"class":200},[92,10359,4525],{"class":190},[92,10361,875],{"class":98},[92,10363,10364],{"class":94,"line":3596},[92,10365,4129],{"class":98},[92,10367,10368],{"class":94,"line":3618},[92,10369,235],{"class":98},[92,10371,10372],{"class":94,"line":3630},[92,10373,242],{"emptyLinePlaceholder":241},[92,10375,10376,10379],{"class":94,"line":3655},[92,10377,10378],{"class":118},".ct",[92,10380,185],{"class":98},[92,10382,10383,10385,10387,10389],{"class":94,"line":3723},[92,10384,4291],{"class":190},[92,10386,194],{"class":98},[92,10388,869],{"class":190},[92,10390,204],{"class":98},[92,10392,10393,10395,10397,10400,10402],{"class":94,"line":3728},[92,10394,1837],{"class":190},[92,10396,194],{"class":98},[92,10398,10399],{"class":190},"15",[92,10401,201],{"class":200},[92,10403,204],{"class":98},[92,10405,10406,10408,10410,10413],{"class":94,"line":3741},[92,10407,4338],{"class":190},[92,10409,194],{"class":98},[92,10411,10412],{"class":190},"1.7",[92,10414,204],{"class":98},[92,10416,10417,10419,10421,10424],{"class":94,"line":3758},[92,10418,1477],{"class":190},[92,10420,194],{"class":98},[92,10422,10423],{"class":190},"#4a5568",[92,10425,204],{"class":98},[92,10427,10428],{"class":94,"line":3770},[92,10429,235],{"class":98},[92,10431,10432,10434,10436],{"class":94,"line":3779},[92,10433,166],{"class":98},[92,10435,1425],{"class":102},[92,10437,106],{"class":98},[78,10439,10441],{"id":10440},"方案二border-image-图片切片边框","方案二：border-image 图片切片边框",[15,10443,10444,10445,10447],{},"有九宫格切图时，",[19,10446,8913],{}," 可以把四角固定、四边平铺或拉伸。简写语法：",[83,10449,10451],{"className":173,"code":10450,"language":175,"meta":88,"style":88},"border-image: url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 round;\n",[19,10452,10453],{"__ignoreMap":88},[92,10454,10455,10457,10460,10463],{"class":94,"line":95},[92,10456,8913],{"class":102},[92,10458,10459],{"class":98},": url('\u002Fdemos\u002F",[92,10461,10462],{"class":102},"css-borders",[92,10464,10465],{"class":98},"\u002Fborderimg.png') 320 round;\n",[15,10467,10468],{},"等价于：",[366,10470,10471,10481],{},[369,10472,10473],{},[372,10474,10475,10478],{},[375,10476,10477],{},"属性",[375,10479,10480],{},"含义",[384,10482,10483,10493,10503],{},[372,10484,10485,10490],{},[389,10486,10487],{},[19,10488,10489],{},"border-image-source",[389,10491,10492],{},"装饰图 URL",[372,10494,10495,10500],{},[389,10496,10497],{},[19,10498,10499],{},"border-image-slice: 320",[389,10501,10502],{},"从四边向内切 320px（数字无单位 = 像素）",[372,10504,10505,10510],{},[389,10506,10507],{},[19,10508,10509],{},"border-image-repeat: round",[389,10511,10512],{},"边段重复并缩放以填满，不留空隙",[15,10514,10515,10517,10518,10521,10522,10525],{},[19,10516,3665],{}," 适合等宽花纹；",[19,10519,10520],{},"repeat"," 原尺寸重复可能裁切；",[19,10523,10524],{},"stretch"," 拉伸变形但一定铺满。",[2483,10527,10529],{"lang":175,"title":10528},"border-image 简写",[83,10530,10532],{"className":173,"code":10531,"language":175,"meta":88,"style":88},".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,10533,10534,10541,10557,10581,10592,10602,10614],{"__ignoreMap":88},[92,10535,10536,10539],{"class":94,"line":95},[92,10537,10538],{"class":118},".box",[92,10540,185],{"class":98},[92,10542,10543,10545,10547,10549,10551,10553,10555],{"class":94,"line":109},[92,10544,627],{"class":190},[92,10546,194],{"class":98},[92,10548,260],{"class":190},[92,10550,201],{"class":200},[92,10552,637],{"class":190},[92,10554,9103],{"class":190},[92,10556,204],{"class":98},[92,10558,10559,10562,10564,10567,10569,10572,10574,10576,10579],{"class":94,"line":131},[92,10560,10561],{"class":190},"  border-image",[92,10563,194],{"class":98},[92,10565,10566],{"class":190},"url",[92,10568,866],{"class":98},[92,10570,10571],{"class":125},"'\u002Fdemos\u002Fcss-borders\u002Fborderimg.png'",[92,10573,3685],{"class":98},[92,10575,9793],{"class":190},[92,10577,10578],{"class":190}," round",[92,10580,204],{"class":98},[92,10582,10583,10585,10587,10590],{"class":94,"line":153},[92,10584,4419],{"class":190},[92,10586,194],{"class":98},[92,10588,10589],{"class":190},"#111",[92,10591,204],{"class":98},[92,10593,10594,10596,10598,10600],{"class":94,"line":163},[92,10595,1477],{"class":190},[92,10597,194],{"class":98},[92,10599,9134],{"class":190},[92,10601,204],{"class":98},[92,10603,10604,10606,10608,10610,10612],{"class":94,"line":238},[92,10605,4241],{"class":190},[92,10607,194],{"class":98},[92,10609,1868],{"class":190},[92,10611,201],{"class":200},[92,10613,204],{"class":98},[92,10615,10616],{"class":94,"line":245},[92,10617,235],{"class":98},[15,10619,10620,10621,10623],{},"切换 ",[19,10622,10520],{}," 模式，对比边框铺法差异：",[2715,10625,10627],{"title":10626},"border-image 切片边框",[83,10628,10630],{"className":2720,"code":10629,"language":2722,"meta":88,"style":88},"\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,10631,10632,10640,10654,10670,10675,10692,10713,10732,10752,10760,10768,10790,10795,10803,10811,10819,10823,10833,10844,10848,10866,10870,10889,10909,10914,10922,10926,10936,10942,10954,10965,10977,10981,10985,10992,11002,11012,11024,11037,11049,11060,11064,11068,11077,11093,11105,11122,11126,11130,11136,11147,11163,11173,11183,11195,11205,11217,11221],{"__ignoreMap":88},[92,10633,10634,10636,10638],{"class":94,"line":95},[92,10635,99],{"class":98},[92,10637,2731],{"class":102},[92,10639,106],{"class":98},[92,10641,10642,10644,10646,10648,10650,10652],{"class":94,"line":109},[92,10643,112],{"class":98},[92,10645,115],{"class":102},[92,10647,119],{"class":118},[92,10649,122],{"class":98},[92,10651,9494],{"class":125},[92,10653,106],{"class":98},[92,10655,10656,10658,10661,10663,10665,10668],{"class":94,"line":131},[92,10657,134],{"class":98},[92,10659,10660],{"class":102},"label",[92,10662,119],{"class":118},[92,10664,122],{"class":98},[92,10666,10667],{"class":125},"\"toolbar\"",[92,10669,106],{"class":98},[92,10671,10672],{"class":94,"line":153},[92,10673,10674],{"class":98},"      border-image-repeat\n",[92,10676,10677,10679,10682,10685,10687,10690],{"class":94,"line":163},[92,10678,487],{"class":98},[92,10680,10681],{"class":102},"select",[92,10683,10684],{"class":118}," v-model",[92,10686,122],{"class":98},[92,10688,10689],{"class":125},"\"repeat\"",[92,10691,106],{"class":98},[92,10693,10694,10696,10699,10701,10703,10706,10709,10711],{"class":94,"line":238},[92,10695,1031],{"class":98},[92,10697,10698],{"class":102},"option",[92,10700,3536],{"class":118},[92,10702,122],{"class":98},[92,10704,10705],{"class":125},"\"round\"",[92,10707,10708],{"class":98},">round\u003C\u002F",[92,10710,10698],{"class":102},[92,10712,106],{"class":98},[92,10714,10715,10717,10719,10721,10723,10725,10728,10730],{"class":94,"line":245},[92,10716,1031],{"class":98},[92,10718,10698],{"class":102},[92,10720,3536],{"class":118},[92,10722,122],{"class":98},[92,10724,10689],{"class":125},[92,10726,10727],{"class":98},">repeat\u003C\u002F",[92,10729,10698],{"class":102},[92,10731,106],{"class":98},[92,10733,10734,10736,10738,10740,10742,10745,10748,10750],{"class":94,"line":253},[92,10735,1031],{"class":98},[92,10737,10698],{"class":102},[92,10739,3536],{"class":118},[92,10741,122],{"class":98},[92,10743,10744],{"class":125},"\"stretch\"",[92,10746,10747],{"class":98},">stretch\u003C\u002F",[92,10749,10698],{"class":102},[92,10751,106],{"class":98},[92,10753,10754,10756,10758],{"class":94,"line":268},[92,10755,1088],{"class":98},[92,10757,10681],{"class":102},[92,10759,106],{"class":98},[92,10761,10762,10764,10766],{"class":94,"line":281},[92,10763,507],{"class":98},[92,10765,10660],{"class":102},[92,10767,106],{"class":98},[92,10769,10770,10772,10774,10776,10778,10781,10783,10785,10788],{"class":94,"line":293},[92,10771,134],{"class":98},[92,10773,115],{"class":102},[92,10775,119],{"class":118},[92,10777,122],{"class":98},[92,10779,10780],{"class":125},"\"box\"",[92,10782,2928],{"class":118},[92,10784,122],{"class":98},[92,10786,10787],{"class":125},"\"boxStyle\"",[92,10789,106],{"class":98},[92,10791,10792],{"class":94,"line":642},[92,10793,10794],{"class":98},"      border-image 让装饰图随容器伸缩。切换上方 repeat 模式观察边段铺法。\n",[92,10796,10797,10799,10801],{"class":94,"line":657},[92,10798,507],{"class":98},[92,10800,115],{"class":102},[92,10802,106],{"class":98},[92,10804,10805,10807,10809],{"class":94,"line":662},[92,10806,156],{"class":98},[92,10808,115],{"class":102},[92,10810,106],{"class":98},[92,10812,10813,10815,10817],{"class":94,"line":667},[92,10814,166],{"class":98},[92,10816,2731],{"class":102},[92,10818,106],{"class":98},[92,10820,10821],{"class":94,"line":675},[92,10822,242],{"emptyLinePlaceholder":241},[92,10824,10825,10827,10829,10831],{"class":94,"line":688},[92,10826,99],{"class":98},[92,10828,3287],{"class":102},[92,10830,3290],{"class":118},[92,10832,106],{"class":98},[92,10834,10835,10837,10840,10842],{"class":94,"line":701},[92,10836,3298],{"class":200},[92,10838,10839],{"class":98}," { computed, ref } ",[92,10841,3304],{"class":200},[92,10843,3307],{"class":125},[92,10845,10846],{"class":94,"line":712},[92,10847,242],{"emptyLinePlaceholder":241},[92,10849,10850,10852,10855,10857,10859,10861,10864],{"class":94,"line":723},[92,10851,2497],{"class":200},[92,10853,10854],{"class":190}," repeat",[92,10856,2503],{"class":200},[92,10858,3081],{"class":118},[92,10860,866],{"class":98},[92,10862,10863],{"class":125},"'round'",[92,10865,2517],{"class":98},[92,10867,10868],{"class":94,"line":738},[92,10869,242],{"emptyLinePlaceholder":241},[92,10871,10872,10874,10877,10879,10882,10884,10886],{"class":94,"line":752},[92,10873,2497],{"class":200},[92,10875,10876],{"class":190}," boxStyle",[92,10878,2503],{"class":200},[92,10880,10881],{"class":118}," computed",[92,10883,3734],{"class":98},[92,10885,3688],{"class":200},[92,10887,10888],{"class":98}," ({\n",[92,10890,10891,10894,10897,10899,10901,10904,10907],{"class":94,"line":3029},[92,10892,10893],{"class":98},"  borderImage: ",[92,10895,10896],{"class":125},"`url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 ${",[92,10898,10520],{"class":98},[92,10900,7484],{"class":125},[92,10902,10903],{"class":98},"value",[92,10905,10906],{"class":125},"}`",[92,10908,9145],{"class":98},[92,10910,10911],{"class":94,"line":3050},[92,10912,10913],{"class":98},"}))\n",[92,10915,10916,10918,10920],{"class":94,"line":3059},[92,10917,166],{"class":98},[92,10919,3287],{"class":102},[92,10921,106],{"class":98},[92,10923,10924],{"class":94,"line":3074},[92,10925,242],{"emptyLinePlaceholder":241},[92,10927,10928,10930,10932,10934],{"class":94,"line":3106},[92,10929,99],{"class":98},[92,10931,1425],{"class":102},[92,10933,4225],{"class":118},[92,10935,106],{"class":98},[92,10937,10938,10940],{"class":94,"line":3115},[92,10939,9582],{"class":118},[92,10941,185],{"class":98},[92,10943,10944,10946,10948,10950,10952],{"class":94,"line":3135},[92,10945,4241],{"class":190},[92,10947,194],{"class":98},[92,10949,5094],{"class":190},[92,10951,201],{"class":200},[92,10953,204],{"class":98},[92,10955,10956,10958,10960,10963],{"class":94,"line":3144},[92,10957,4419],{"class":190},[92,10959,194],{"class":98},[92,10961,10962],{"class":190},"#f0f0f0",[92,10964,204],{"class":98},[92,10966,10967,10969,10971,10973,10975],{"class":94,"line":3153},[92,10968,4404],{"class":190},[92,10970,194],{"class":98},[92,10972,4467],{"class":190},[92,10974,201],{"class":200},[92,10976,204],{"class":98},[92,10978,10979],{"class":94,"line":3158},[92,10980,235],{"class":98},[92,10982,10983],{"class":94,"line":3174},[92,10984,242],{"emptyLinePlaceholder":241},[92,10986,10987,10990],{"class":94,"line":3207},[92,10988,10989],{"class":118},".toolbar",[92,10991,185],{"class":98},[92,10993,10994,10996,10998,11000],{"class":94,"line":3213},[92,10995,1742],{"class":190},[92,10997,194],{"class":98},[92,10999,4636],{"class":190},[92,11001,204],{"class":98},[92,11003,11004,11006,11008,11010],{"class":94,"line":3222},[92,11005,4644],{"class":190},[92,11007,194],{"class":98},[92,11009,4649],{"class":190},[92,11011,204],{"class":98},[92,11013,11014,11016,11018,11020,11022],{"class":94,"line":3250},[92,11015,4462],{"class":190},[92,11017,194],{"class":98},[92,11019,4675],{"class":190},[92,11021,201],{"class":200},[92,11023,204],{"class":98},[92,11025,11026,11028,11030,11033,11035],{"class":94,"line":3259},[92,11027,4670],{"class":190},[92,11029,194],{"class":98},[92,11031,11032],{"class":190},"16",[92,11034,201],{"class":200},[92,11036,204],{"class":98},[92,11038,11039,11041,11043,11045,11047],{"class":94,"line":3268},[92,11040,1837],{"class":190},[92,11042,194],{"class":98},[92,11044,5262],{"class":190},[92,11046,201],{"class":200},[92,11048,204],{"class":98},[92,11050,11051,11053,11055,11058],{"class":94,"line":3277},[92,11052,1477],{"class":190},[92,11054,194],{"class":98},[92,11056,11057],{"class":190},"#374151",[92,11059,204],{"class":98},[92,11061,11062],{"class":94,"line":3282},[92,11063,235],{"class":98},[92,11065,11066],{"class":94,"line":3295},[92,11067,242],{"emptyLinePlaceholder":241},[92,11069,11070,11072,11075],{"class":94,"line":3310},[92,11071,10989],{"class":118},[92,11073,11074],{"class":102}," select",[92,11076,185],{"class":98},[92,11078,11079,11081,11083,11085,11087,11089,11091],{"class":94,"line":3315},[92,11080,4241],{"class":190},[92,11082,194],{"class":98},[92,11084,4409],{"class":190},[92,11086,201],{"class":200},[92,11088,4753],{"class":190},[92,11090,201],{"class":200},[92,11092,204],{"class":98},[92,11094,11095,11097,11099,11101,11103],{"class":94,"line":3334},[92,11096,4404],{"class":190},[92,11098,194],{"class":98},[92,11100,4689],{"class":190},[92,11102,201],{"class":200},[92,11104,204],{"class":98},[92,11106,11107,11109,11111,11113,11115,11117,11120],{"class":94,"line":3352},[92,11108,627],{"class":190},[92,11110,194],{"class":98},[92,11112,4389],{"class":190},[92,11114,201],{"class":200},[92,11116,637],{"class":190},[92,11118,11119],{"class":190}," #d1d5db",[92,11121,204],{"class":98},[92,11123,11124],{"class":94,"line":3370},[92,11125,235],{"class":98},[92,11127,11128],{"class":94,"line":3388},[92,11129,242],{"emptyLinePlaceholder":241},[92,11131,11132,11134],{"class":94,"line":3407},[92,11133,10538],{"class":118},[92,11135,185],{"class":98},[92,11137,11138,11141,11143,11145],{"class":94,"line":3412},[92,11139,11140],{"class":190},"  box-sizing",[92,11142,194],{"class":98},[92,11144,21],{"class":190},[92,11146,204],{"class":98},[92,11148,11149,11151,11153,11155,11157,11159,11161],{"class":94,"line":3426},[92,11150,627],{"class":190},[92,11152,194],{"class":98},[92,11154,260],{"class":190},[92,11156,201],{"class":200},[92,11158,637],{"class":190},[92,11160,9103],{"class":190},[92,11162,204],{"class":98},[92,11164,11165,11167,11169,11171],{"class":94,"line":3438},[92,11166,4419],{"class":190},[92,11168,194],{"class":98},[92,11170,10589],{"class":190},[92,11172,204],{"class":98},[92,11174,11175,11177,11179,11181],{"class":94,"line":3451},[92,11176,1477],{"class":190},[92,11178,194],{"class":98},[92,11180,9134],{"class":190},[92,11182,204],{"class":98},[92,11184,11185,11187,11189,11191,11193],{"class":94,"line":3463},[92,11186,4241],{"class":190},[92,11188,194],{"class":98},[92,11190,1868],{"class":190},[92,11192,201],{"class":200},[92,11194,204],{"class":98},[92,11196,11197,11199,11201,11203],{"class":94,"line":3468},[92,11198,4338],{"class":190},[92,11200,194],{"class":98},[92,11202,10412],{"class":190},[92,11204,204],{"class":98},[92,11206,11207,11209,11211,11213,11215],{"class":94,"line":3486},[92,11208,1837],{"class":190},[92,11210,194],{"class":98},[92,11212,10399],{"class":190},[92,11214,201],{"class":200},[92,11216,204],{"class":98},[92,11218,11219],{"class":94,"line":3506},[92,11220,235],{"class":98},[92,11222,11223,11225,11227],{"class":94,"line":3531},[92,11224,166],{"class":98},[92,11226,1425],{"class":102},[92,11228,106],{"class":98},[78,11230,1381],{"id":1381},[342,11232,11233,11246],{},[345,11234,11235,11238,11239,11241,11242,11241,11244],{},[24,11236,11237],{},"无素材、要动效"," → 双层 ",[19,11240,2574],{}," + ",[19,11243,8949],{},[19,11245,8955],{},[345,11247,11248,5960,11251,11253,11254,11257,11258,11260],{},[24,11249,11250],{},"有切图、要质感",[19,11252,8913],{}," + 合适的 ",[19,11255,11256],{},"slice"," 与 ",[19,11259,10520],{}," 模式",[15,11262,11263],{},"两者可以组合：内容区用纯色或渐变，边框区分别用 CSS 条纹或图片切片。选哪种取决于设计稿有没有现成九宫格素材。",[1425,11265,11266],{},"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":88,"searchDepth":131,"depth":131,"links":11268},[11269,11270,11271],{"id":8917,"depth":109,"text":8918},{"id":10440,"depth":109,"text":10441},{"id":1381,"depth":109,"text":1381},"2026-05-15","用双层 background 实现会动的条纹边框，或用 border-image 切片装饰图做自适应边框。",{},"\u002Fblog\u002Fcss-border-tricks",{"title":8892,"description":11273},"blog\u002Fcss-border-tricks",[8924,8259,8913],"8YZziFPovjlIbtJigRJMhVdL1HGrqD3ngLg-jPkvETc",{"id":11281,"title":11282,"body":11283,"category":175,"date":14181,"description":14182,"draft":1440,"extension":1441,"meta":14183,"navigation":241,"path":14184,"seo":14185,"stem":14186,"tags":14187,"__hash__":14191},"blog\u002Fblog\u002Fcss-responsive-text.md","纯 CSS 响应式文字切换",{"type":8,"value":11284,"toc":14174},[11285,11288,11299,11302,11313,11317,11324,11356,11365,11368,11632,11635,11757,11773,11777,11783,11904,12081,12090,12093,12139,12146,12149,12163,12166,14134,14140,14142,14171],[11,11286,11282],{"id":11287},"纯-css-响应式文字切换",[15,11289,11290,11291,11294,11295,11298],{},"响应式页面里，同一位置有时需要展示不同文案：窄屏写「手机端」，宽屏写「桌面端」。第一反应往往是 ",[19,11292,11293],{},"window.resize"," 监听加 JS 改 DOM——其实用 ",[24,11296,11297],{},"CSS 媒体查询"," 就能做到，无需脚本、不阻塞渲染，对 SEO 和首屏也更友好。",[15,11300,11301],{},"本文对比两种纯 CSS 写法，并说明各自适用场景。示例断点统一为：",[342,11303,11304,11307,11310],{},[345,11305,11306],{},"手机：\u003C 640px",[345,11308,11309],{},"平板：640px ~ 1023px",[345,11311,11312],{},"桌面：≥ 1024px",[78,11314,11316],{"id":11315},"方案一伪元素-content","方案一：伪元素 + content",[15,11318,11319,11320,11323],{},"HTML 里放一个空元素（或只有装饰性内容），真正显示的文案写在 CSS ",[19,11321,11322],{},"content"," 里，按断点覆盖：",[83,11325,11327],{"className":85,"code":11326,"language":87,"meta":88,"style":88},"\u003Cp class=\"responsive-text\" aria-label=\"随视口变化的提示文字\">\u003C\u002Fp>\n",[19,11328,11329],{"__ignoreMap":88},[92,11330,11331,11333,11335,11337,11339,11342,11345,11347,11350,11352,11354],{"class":94,"line":95},[92,11332,99],{"class":98},[92,11334,15],{"class":102},[92,11336,119],{"class":118},[92,11338,122],{"class":98},[92,11340,11341],{"class":125},"\"responsive-text\"",[92,11343,11344],{"class":118}," aria-label",[92,11346,122],{"class":98},[92,11348,11349],{"class":125},"\"随视口变化的提示文字\"",[92,11351,146],{"class":98},[92,11353,15],{"class":102},[92,11355,106],{"class":98},[15,11357,11358,11361,11362,11364],{},[19,11359,11360],{},"aria-label"," 给读屏软件提供可访问的固定描述；视觉文案由 ",[19,11363,6052],{}," 承担。",[15,11366,11367],{},"用 SCSS mixin 可以避免重复写媒体查询：",[2483,11369,11372],{"lang":11370,"title":11371},"scss","responsive-text mixin",[83,11373,11376],{"className":11374,"code":11375,"language":11370,"meta":88,"style":88},"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,11377,11378,11392,11406,11410,11437,11446,11457,11461,11465,11475,11490,11499,11510,11515,11519,11523,11527,11536,11550,11558,11568,11572,11576,11580,11584,11588,11595,11604,11611,11618,11623,11628],{"__ignoreMap":88},[92,11379,11380,11383,11385,11388,11390],{"class":94,"line":95},[92,11381,11382],{"class":3479},"$bp-tablet",[92,11384,194],{"class":98},[92,11386,11387],{"class":190},"640",[92,11389,201],{"class":200},[92,11391,204],{"class":98},[92,11393,11394,11397,11399,11402,11404],{"class":94,"line":109},[92,11395,11396],{"class":3479},"$bp-desktop",[92,11398,194],{"class":98},[92,11400,11401],{"class":190},"1024",[92,11403,201],{"class":200},[92,11405,204],{"class":98},[92,11407,11408],{"class":94,"line":131},[92,11409,242],{"emptyLinePlaceholder":241},[92,11411,11412,11415,11418,11420,11423,11425,11428,11431,11434],{"class":94,"line":153},[92,11413,11414],{"class":200},"@mixin",[92,11416,11417],{"class":118}," responsive-text",[92,11419,866],{"class":98},[92,11421,11422],{"class":3479},"$mobile",[92,11424,3679],{"class":98},[92,11426,11427],{"class":3479},"$tablet",[92,11429,11430],{"class":98},": null, ",[92,11432,11433],{"class":3479},"$desktop",[92,11435,11436],{"class":98},": null) {\n",[92,11438,11439,11442,11444],{"class":94,"line":163},[92,11440,11441],{"class":102},"  &",[92,11443,6052],{"class":118},[92,11445,185],{"class":98},[92,11447,11448,11451,11453,11455],{"class":94,"line":238},[92,11449,11450],{"class":102},"    content",[92,11452,194],{"class":98},[92,11454,11422],{"class":3479},[92,11456,204],{"class":98},[92,11458,11459],{"class":94,"line":245},[92,11460,4129],{"class":98},[92,11462,11463],{"class":94,"line":253},[92,11464,242],{"emptyLinePlaceholder":241},[92,11466,11467,11470,11473],{"class":94,"line":268},[92,11468,11469],{"class":200},"  @if",[92,11471,11472],{"class":3479}," $tablet",[92,11474,185],{"class":98},[92,11476,11477,11480,11482,11484,11486,11488],{"class":94,"line":281},[92,11478,11479],{"class":200},"    @media",[92,11481,3492],{"class":98},[92,11483,4492],{"class":190},[92,11485,194],{"class":98},[92,11487,11382],{"class":3479},[92,11489,3483],{"class":98},[92,11491,11492,11495,11497],{"class":94,"line":293},[92,11493,11494],{"class":102},"      &",[92,11496,6052],{"class":118},[92,11498,185],{"class":98},[92,11500,11501,11504,11506,11508],{"class":94,"line":642},[92,11502,11503],{"class":102},"        content",[92,11505,194],{"class":98},[92,11507,11427],{"class":3479},[92,11509,204],{"class":98},[92,11511,11512],{"class":94,"line":657},[92,11513,11514],{"class":98},"      }\n",[92,11516,11517],{"class":94,"line":662},[92,11518,3812],{"class":98},[92,11520,11521],{"class":94,"line":667},[92,11522,4129],{"class":98},[92,11524,11525],{"class":94,"line":675},[92,11526,242],{"emptyLinePlaceholder":241},[92,11528,11529,11531,11534],{"class":94,"line":688},[92,11530,11469],{"class":200},[92,11532,11533],{"class":3479}," $desktop",[92,11535,185],{"class":98},[92,11537,11538,11540,11542,11544,11546,11548],{"class":94,"line":701},[92,11539,11479],{"class":200},[92,11541,3492],{"class":98},[92,11543,4492],{"class":190},[92,11545,194],{"class":98},[92,11547,11396],{"class":3479},[92,11549,3483],{"class":98},[92,11551,11552,11554,11556],{"class":94,"line":712},[92,11553,11494],{"class":102},[92,11555,6052],{"class":118},[92,11557,185],{"class":98},[92,11559,11560,11562,11564,11566],{"class":94,"line":723},[92,11561,11503],{"class":102},[92,11563,194],{"class":98},[92,11565,11433],{"class":3479},[92,11567,204],{"class":98},[92,11569,11570],{"class":94,"line":738},[92,11571,11514],{"class":98},[92,11573,11574],{"class":94,"line":752},[92,11575,3812],{"class":98},[92,11577,11578],{"class":94,"line":3029},[92,11579,4129],{"class":98},[92,11581,11582],{"class":94,"line":3050},[92,11583,235],{"class":98},[92,11585,11586],{"class":94,"line":3059},[92,11587,242],{"emptyLinePlaceholder":241},[92,11589,11590,11593],{"class":94,"line":3074},[92,11591,11592],{"class":118},".responsive-text",[92,11594,185],{"class":98},[92,11596,11597,11600,11602],{"class":94,"line":3106},[92,11598,11599],{"class":200},"  @include",[92,11601,11417],{"class":118},[92,11603,9153],{"class":98},[92,11605,11606,11609],{"class":94,"line":3115},[92,11607,11608],{"class":125},"    \"📱 手机端：窄屏阅读体验\"",[92,11610,9145],{"class":98},[92,11612,11613,11616],{"class":94,"line":3135},[92,11614,11615],{"class":125},"    \"📟 平板端：中等宽度布局\"",[92,11617,9145],{"class":98},[92,11619,11620],{"class":94,"line":3144},[92,11621,11622],{"class":125},"    \"🖥️ 桌面端：宽屏完整展示\"\n",[92,11624,11625],{"class":94,"line":3153},[92,11626,11627],{"class":98},"  );\n",[92,11629,11630],{"class":94,"line":3158},[92,11631,235],{"class":98},[15,11633,11634],{},"编译后的核心 CSS 等价于：",[2483,11636,11638],{"lang":175,"title":11637},"编译结果（纯 CSS）",[83,11639,11641],{"className":173,"code":11640,"language":175,"meta":88,"style":88},".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,11642,11643,11650,11662,11666,11670,11686,11693,11704,11708,11712,11716,11732,11738,11749,11753],{"__ignoreMap":88},[92,11644,11645,11648],{"class":94,"line":95},[92,11646,11647],{"class":118},".responsive-text::before",[92,11649,185],{"class":98},[92,11651,11652,11655,11657,11660],{"class":94,"line":109},[92,11653,11654],{"class":190},"  content",[92,11656,194],{"class":98},[92,11658,11659],{"class":125},"\"📱 手机端：窄屏阅读体验\"",[92,11661,204],{"class":98},[92,11663,11664],{"class":94,"line":131},[92,11665,235],{"class":98},[92,11667,11668],{"class":94,"line":153},[92,11669,242],{"emptyLinePlaceholder":241},[92,11671,11672,11674,11676,11678,11680,11682,11684],{"class":94,"line":163},[92,11673,4487],{"class":200},[92,11675,3492],{"class":98},[92,11677,4492],{"class":190},[92,11679,194],{"class":98},[92,11681,11387],{"class":190},[92,11683,201],{"class":200},[92,11685,3483],{"class":98},[92,11687,11688,11691],{"class":94,"line":238},[92,11689,11690],{"class":118},"  .responsive-text::before",[92,11692,185],{"class":98},[92,11694,11695,11697,11699,11702],{"class":94,"line":245},[92,11696,11450],{"class":190},[92,11698,194],{"class":98},[92,11700,11701],{"class":125},"\"📟 平板端：中等宽度布局\"",[92,11703,204],{"class":98},[92,11705,11706],{"class":94,"line":253},[92,11707,4129],{"class":98},[92,11709,11710],{"class":94,"line":268},[92,11711,235],{"class":98},[92,11713,11714],{"class":94,"line":281},[92,11715,242],{"emptyLinePlaceholder":241},[92,11717,11718,11720,11722,11724,11726,11728,11730],{"class":94,"line":293},[92,11719,4487],{"class":200},[92,11721,3492],{"class":98},[92,11723,4492],{"class":190},[92,11725,194],{"class":98},[92,11727,11401],{"class":190},[92,11729,201],{"class":200},[92,11731,3483],{"class":98},[92,11733,11734,11736],{"class":94,"line":642},[92,11735,11690],{"class":118},[92,11737,185],{"class":98},[92,11739,11740,11742,11744,11747],{"class":94,"line":657},[92,11741,11450],{"class":190},[92,11743,194],{"class":98},[92,11745,11746],{"class":125},"\"🖥️ 桌面端：宽屏完整展示\"",[92,11748,204],{"class":98},[92,11750,11751],{"class":94,"line":662},[92,11752,4129],{"class":98},[92,11754,11755],{"class":94,"line":667},[92,11756,235],{"class":98},[15,11758,11759,11762,11763,340,11766,11768,11769,11772],{},[24,11760,11761],{},"优点","：HTML 极简，改文案只动样式。",[24,11764,11765],{},"局限",[19,11767,11322],{}," 只能是字符串，无法嵌入 ",[19,11770,11771],{},"\u003Cem>"," 等富文本标签。",[78,11774,11776],{"id":11775},"方案二多段-span-display-切换","方案二：多段 span + display 切换",[15,11778,11779,11780,11782],{},"需要高亮关键词、换行或内联标签时，把各断点文案写成真实 DOM，用 ",[19,11781,1638],{}," 控制显隐：",[83,11784,11786],{"className":85,"code":11785,"language":87,"meta":88,"style":88},"\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,11787,11788,11803,11838,11867,11896],{"__ignoreMap":88},[92,11789,11790,11792,11794,11796,11798,11801],{"class":94,"line":95},[92,11791,99],{"class":98},[92,11793,15],{"class":102},[92,11795,119],{"class":118},[92,11797,122],{"class":98},[92,11799,11800],{"class":125},"\"responsive-spans\"",[92,11802,106],{"class":98},[92,11804,11805,11807,11809,11811,11813,11816,11819,11821,11824,11826,11829,11831,11834,11836],{"class":94,"line":109},[92,11806,112],{"class":98},[92,11808,92],{"class":102},[92,11810,119],{"class":118},[92,11812,122],{"class":98},[92,11814,11815],{"class":125},"\"is-mobile\"",[92,11817,11818],{"class":98},">当前宽度 ",[92,11820,99],{"class":2936},[92,11822,11823],{"class":98}," 640px，显示\u003C",[92,11825,1034],{"class":102},[92,11827,11828],{"class":98},">手机\u003C\u002F",[92,11830,1034],{"class":102},[92,11832,11833],{"class":98},">文案。\u003C\u002F",[92,11835,92],{"class":102},[92,11837,106],{"class":98},[92,11839,11840,11842,11844,11846,11848,11851,11854,11856,11859,11861,11863,11865],{"class":94,"line":131},[92,11841,112],{"class":98},[92,11843,92],{"class":102},[92,11845,119],{"class":118},[92,11847,122],{"class":98},[92,11849,11850],{"class":125},"\"is-tablet\"",[92,11852,11853],{"class":98},">当前宽度 640px ~ 1023px，显示\u003C",[92,11855,1034],{"class":102},[92,11857,11858],{"class":98},">平板\u003C\u002F",[92,11860,1034],{"class":102},[92,11862,11833],{"class":98},[92,11864,92],{"class":102},[92,11866,106],{"class":98},[92,11868,11869,11871,11873,11875,11877,11880,11883,11885,11888,11890,11892,11894],{"class":94,"line":153},[92,11870,112],{"class":98},[92,11872,92],{"class":102},[92,11874,119],{"class":118},[92,11876,122],{"class":98},[92,11878,11879],{"class":125},"\"is-desktop\"",[92,11881,11882],{"class":98},">当前宽度 ≥ 1024px，显示\u003C",[92,11884,1034],{"class":102},[92,11886,11887],{"class":98},">桌面\u003C\u002F",[92,11889,1034],{"class":102},[92,11891,11833],{"class":98},[92,11893,92],{"class":102},[92,11895,106],{"class":98},[92,11897,11898,11900,11902],{"class":94,"line":163},[92,11899,166],{"class":98},[92,11901,15],{"class":102},[92,11903,106],{"class":98},[2483,11905,11907],{"lang":11370,"title":11906},"按断点显示\u002F隐藏",[83,11908,11910],{"className":11374,"code":11909,"language":11370,"meta":88,"style":88},".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,11911,11912,11919,11926,11937,11941,11945,11952,11963,11967,11971,11988,12005,12020,12024,12028,12044,12058,12073,12077],{"__ignoreMap":88},[92,11913,11914,11917],{"class":94,"line":95},[92,11915,11916],{"class":118},".responsive-spans",[92,11918,185],{"class":98},[92,11920,11921,11924],{"class":94,"line":109},[92,11922,11923],{"class":102},"  span",[92,11925,185],{"class":98},[92,11927,11928,11931,11933,11935],{"class":94,"line":131},[92,11929,11930],{"class":190},"    display",[92,11932,194],{"class":98},[92,11934,805],{"class":190},[92,11936,204],{"class":98},[92,11938,11939],{"class":94,"line":153},[92,11940,4129],{"class":98},[92,11942,11943],{"class":94,"line":163},[92,11944,242],{"emptyLinePlaceholder":241},[92,11946,11947,11950],{"class":94,"line":238},[92,11948,11949],{"class":118},"  .is-mobile",[92,11951,185],{"class":98},[92,11953,11954,11956,11958,11961],{"class":94,"line":245},[92,11955,11930],{"class":190},[92,11957,194],{"class":98},[92,11959,11960],{"class":190},"inline",[92,11962,204],{"class":98},[92,11964,11965],{"class":94,"line":253},[92,11966,4129],{"class":98},[92,11968,11969],{"class":94,"line":268},[92,11970,242],{"emptyLinePlaceholder":241},[92,11972,11973,11976,11978,11980,11982,11984,11986],{"class":94,"line":281},[92,11974,11975],{"class":200},"  @media",[92,11977,3492],{"class":98},[92,11979,4492],{"class":190},[92,11981,194],{"class":98},[92,11983,11387],{"class":190},[92,11985,201],{"class":200},[92,11987,3483],{"class":98},[92,11989,11990,11993,11996,11998,12000,12002],{"class":94,"line":293},[92,11991,11992],{"class":118},"    .is-mobile",[92,11994,11995],{"class":98}," { ",[92,11997,1638],{"class":190},[92,11999,194],{"class":98},[92,12001,805],{"class":190},[92,12003,12004],{"class":98},"; }\n",[92,12006,12007,12010,12012,12014,12016,12018],{"class":94,"line":642},[92,12008,12009],{"class":118},"    .is-tablet",[92,12011,11995],{"class":98},[92,12013,1638],{"class":190},[92,12015,194],{"class":98},[92,12017,11960],{"class":190},[92,12019,12004],{"class":98},[92,12021,12022],{"class":94,"line":657},[92,12023,4129],{"class":98},[92,12025,12026],{"class":94,"line":662},[92,12027,242],{"emptyLinePlaceholder":241},[92,12029,12030,12032,12034,12036,12038,12040,12042],{"class":94,"line":667},[92,12031,11975],{"class":200},[92,12033,3492],{"class":98},[92,12035,4492],{"class":190},[92,12037,194],{"class":98},[92,12039,11401],{"class":190},[92,12041,201],{"class":200},[92,12043,3483],{"class":98},[92,12045,12046,12048,12050,12052,12054,12056],{"class":94,"line":675},[92,12047,12009],{"class":118},[92,12049,11995],{"class":98},[92,12051,1638],{"class":190},[92,12053,194],{"class":98},[92,12055,805],{"class":190},[92,12057,12004],{"class":98},[92,12059,12060,12063,12065,12067,12069,12071],{"class":94,"line":688},[92,12061,12062],{"class":118},"    .is-desktop",[92,12064,11995],{"class":98},[92,12066,1638],{"class":190},[92,12068,194],{"class":98},[92,12070,11960],{"class":190},[92,12072,12004],{"class":98},[92,12074,12075],{"class":94,"line":701},[92,12076,4129],{"class":98},[92,12078,12079],{"class":94,"line":712},[92,12080,235],{"class":98},[15,12082,12083,12085,12086,12089],{},[24,12084,11761],{},"：支持富文本、SEO 友好的真实文本（爬虫能索引到当前可见段）。",[24,12087,12088],{},"代价","：HTML 略冗长，三份文案都要维护。",[78,12091,12092],{"id":12092},"如何选择",[366,12094,12095,12105],{},[369,12096,12097],{},[372,12098,12099,12102],{},[375,12100,12101],{},"场景",[375,12103,12104],{},"推荐方案",[384,12106,12107,12117,12127],{},[372,12108,12109,12112],{},[389,12110,12111],{},"纯装饰性标语、emoji 提示",[389,12113,12114,12115],{},"伪元素 ",[19,12116,11322],{},[372,12118,12119,12122],{},[389,12120,12121],{},"带强调、链接、多行排版",[389,12123,12124,12125],{},"多段 ",[19,12126,92],{},[372,12128,12129,12132],{},[389,12130,12131],{},"强 SEO \u002F 无障碍",[389,12133,12134,12136,12137],{},[19,12135,92],{}," + 语义标签；伪元素方案记得加 ",[19,12138,11360],{},[15,12140,12141,12142,12145],{},"两种方案都",[24,12143,12144],{},"不触发回流中的脚本","，性能友好，也适合 SSR 静态页。",[78,12147,12148],{"id":12148},"交互演示",[15,12150,12151,12152,12162],{},"博客内的 REPL 预览区只有约 300px 宽，",[24,12153,12154,12155,12157,12158,12161],{},"视口 ",[19,12156,4487],{}," 与容器 ",[19,12159,12160],{},"@container"," 的 640 \u002F 1024 断点都凑不齐","。下方用滑块设定「逻辑宽度」，由 CSS 按档位切换文案（断点已缩小为 180px \u002F 260px 以适配预览区；正文方案仍为 640 \u002F 1024）。",[15,12164,12165],{},"拖动滑块或点预设按钮，观察文字与「当前档位」变化：",[2715,12167,12169],{"title":12168},"响应式文字切换",[83,12170,12172],{"className":2720,"code":12171,"language":2722,"meta":88,"style":88},"\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,12173,12174,12182,12197,12211,12241,12248,12258,12268,12278,12283,12288,12296,12302,12310,12319,12328,12332,12337,12345,12351,12359,12368,12377,12381,12386,12394,12402,12406,12421,12434,12441,12451,12460,12470,12480,12490,12494,12514,12522,12530,12534,12541,12551,12561,12571,12576,12591,12611,12634,12648,12675,12702,12729,12737,12745,12753,12761,12769,12773,12783,12793,12797,12814,12818,12835,12856,12874,12881,12885,12893,12897,12907,12914,12924,12936,12948,12972,12976,12980,12986,12996,13008,13020,13032,13036,13040,13047,13057,13069,13082,13094,13104,13108,13112,13121,13132,13142,13154,13169,13181,13191,13201,13212,13222,13252,13256,13260,13271,13281,13285,13289,13300,13310,13321,13356,13360,13364,13371,13381,13391,13403,13415,13425,13429,13433,13442,13452,13464,13468,13472,13479,13492,13502,13513,13523,13527,13531,13538,13551,13568,13580,13595,13605,13609,13613,13619,13631,13642,13652,13656,13660,13667,13683,13695,13705,13719,13731,13741,13745,13749,13755,13771,13784,13795,13806,13817,13821,13825,13835,13845,13849,13853,13862,13872,13876,13880,13889,13899,13903,13907,13913,13923,13935,13946,13957,13961,13965,13974,13984,13988,13992,14004,14014,14018,14022,14033,14043,14047,14051,14062,14072,14076,14080,14089,14101,14112,14122,14126],{"__ignoreMap":88},[92,12175,12176,12178,12180],{"class":94,"line":95},[92,12177,99],{"class":98},[92,12179,2731],{"class":102},[92,12181,106],{"class":98},[92,12183,12184,12186,12188,12190,12192,12195],{"class":94,"line":109},[92,12185,112],{"class":98},[92,12187,115],{"class":102},[92,12189,119],{"class":118},[92,12191,122],{"class":98},[92,12193,12194],{"class":125},"\"playground\"",[92,12196,106],{"class":98},[92,12198,12199,12201,12203,12205,12207,12209],{"class":94,"line":131},[92,12200,134],{"class":98},[92,12202,115],{"class":102},[92,12204,119],{"class":118},[92,12206,122],{"class":98},[92,12208,10667],{"class":125},[92,12210,106],{"class":98},[92,12212,12213,12215,12217,12219,12221,12224,12227,12229,12232,12234,12236,12239],{"class":94,"line":153},[92,12214,487],{"class":98},[92,12216,115],{"class":102},[92,12218,119],{"class":118},[92,12220,122],{"class":98},[92,12222,12223],{"class":125},"\"segmented\"",[92,12225,12226],{"class":118}," role",[92,12228,122],{"class":98},[92,12230,12231],{"class":125},"\"group\"",[92,12233,11344],{"class":118},[92,12235,122],{"class":98},[92,12237,12238],{"class":125},"\"选择档位\"",[92,12240,106],{"class":98},[92,12242,12243,12245],{"class":94,"line":163},[92,12244,1031],{"class":98},[92,12246,12247],{"class":102},"button\n",[92,12249,12250,12253,12255],{"class":94,"line":238},[92,12251,12252],{"class":118},"          type",[92,12254,122],{"class":98},[92,12256,12257],{"class":125},"\"button\"\n",[92,12259,12260,12263,12265],{"class":94,"line":245},[92,12261,12262],{"class":118},"          :class",[92,12264,122],{"class":98},[92,12266,12267],{"class":125},"\"{ active: tier === 'mobile' }\"\n",[92,12269,12270,12273,12275],{"class":94,"line":253},[92,12271,12272],{"class":118},"          @click",[92,12274,122],{"class":98},[92,12276,12277],{"class":125},"\"width = 150\"\n",[92,12279,12280],{"class":94,"line":268},[92,12281,12282],{"class":98},"        >\n",[92,12284,12285],{"class":94,"line":281},[92,12286,12287],{"class":98},"          手机\n",[92,12289,12290,12292,12294],{"class":94,"line":293},[92,12291,1079],{"class":98},[92,12293,3179],{"class":102},[92,12295,106],{"class":98},[92,12297,12298,12300],{"class":94,"line":642},[92,12299,1031],{"class":98},[92,12301,12247],{"class":102},[92,12303,12304,12306,12308],{"class":94,"line":657},[92,12305,12252],{"class":118},[92,12307,122],{"class":98},[92,12309,12257],{"class":125},[92,12311,12312,12314,12316],{"class":94,"line":662},[92,12313,12262],{"class":118},[92,12315,122],{"class":98},[92,12317,12318],{"class":125},"\"{ active: tier === 'tablet' }\"\n",[92,12320,12321,12323,12325],{"class":94,"line":667},[92,12322,12272],{"class":118},[92,12324,122],{"class":98},[92,12326,12327],{"class":125},"\"width = 220\"\n",[92,12329,12330],{"class":94,"line":675},[92,12331,12282],{"class":98},[92,12333,12334],{"class":94,"line":688},[92,12335,12336],{"class":98},"          平板\n",[92,12338,12339,12341,12343],{"class":94,"line":701},[92,12340,1079],{"class":98},[92,12342,3179],{"class":102},[92,12344,106],{"class":98},[92,12346,12347,12349],{"class":94,"line":712},[92,12348,1031],{"class":98},[92,12350,12247],{"class":102},[92,12352,12353,12355,12357],{"class":94,"line":723},[92,12354,12252],{"class":118},[92,12356,122],{"class":98},[92,12358,12257],{"class":125},[92,12360,12361,12363,12365],{"class":94,"line":738},[92,12362,12262],{"class":118},[92,12364,122],{"class":98},[92,12366,12367],{"class":125},"\"{ active: tier === 'desktop' }\"\n",[92,12369,12370,12372,12374],{"class":94,"line":752},[92,12371,12272],{"class":118},[92,12373,122],{"class":98},[92,12375,12376],{"class":125},"\"width = 320\"\n",[92,12378,12379],{"class":94,"line":3029},[92,12380,12282],{"class":98},[92,12382,12383],{"class":94,"line":3050},[92,12384,12385],{"class":98},"          桌面\n",[92,12387,12388,12390,12392],{"class":94,"line":3059},[92,12389,1079],{"class":98},[92,12391,3179],{"class":102},[92,12393,106],{"class":98},[92,12395,12396,12398,12400],{"class":94,"line":3074},[92,12397,1088],{"class":98},[92,12399,115],{"class":102},[92,12401,106],{"class":98},[92,12403,12404],{"class":94,"line":3106},[92,12405,242],{"emptyLinePlaceholder":241},[92,12407,12408,12410,12412,12414,12416,12419],{"class":94,"line":3115},[92,12409,487],{"class":98},[92,12411,115],{"class":102},[92,12413,119],{"class":118},[92,12415,122],{"class":98},[92,12417,12418],{"class":125},"\"slider-row\"",[92,12420,106],{"class":98},[92,12422,12423,12425,12427,12430,12432],{"class":94,"line":3135},[92,12424,1031],{"class":98},[92,12426,92],{"class":102},[92,12428,12429],{"class":98},">宽度\u003C\u002F",[92,12431,92],{"class":102},[92,12433,106],{"class":98},[92,12435,12436,12438],{"class":94,"line":3144},[92,12437,1031],{"class":98},[92,12439,12440],{"class":102},"input\n",[92,12442,12443,12446,12448],{"class":94,"line":3153},[92,12444,12445],{"class":118},"          v-model.number",[92,12447,122],{"class":98},[92,12449,12450],{"class":125},"\"width\"\n",[92,12452,12453,12455,12457],{"class":94,"line":3158},[92,12454,12252],{"class":118},[92,12456,122],{"class":98},[92,12458,12459],{"class":125},"\"range\"\n",[92,12461,12462,12465,12467],{"class":94,"line":3174},[92,12463,12464],{"class":118},"          min",[92,12466,122],{"class":98},[92,12468,12469],{"class":125},"\"120\"\n",[92,12471,12472,12475,12477],{"class":94,"line":3207},[92,12473,12474],{"class":118},"          max",[92,12476,122],{"class":98},[92,12478,12479],{"class":125},"\"400\"\n",[92,12481,12482,12485,12487],{"class":94,"line":3213},[92,12483,12484],{"class":118},"          step",[92,12486,122],{"class":98},[92,12488,12489],{"class":125},"\"10\"\n",[92,12491,12492],{"class":94,"line":3222},[92,12493,12282],{"class":98},[92,12495,12496,12498,12500,12502,12504,12507,12510,12512],{"class":94,"line":3250},[92,12497,1031],{"class":98},[92,12499,92],{"class":102},[92,12501,119],{"class":118},[92,12503,122],{"class":98},[92,12505,12506],{"class":125},"\"width-readout\"",[92,12508,12509],{"class":98},">{{ width }}px\u003C\u002F",[92,12511,92],{"class":102},[92,12513,106],{"class":98},[92,12515,12516,12518,12520],{"class":94,"line":3259},[92,12517,1088],{"class":98},[92,12519,115],{"class":102},[92,12521,106],{"class":98},[92,12523,12524,12526,12528],{"class":94,"line":3268},[92,12525,507],{"class":98},[92,12527,115],{"class":102},[92,12529,106],{"class":98},[92,12531,12532],{"class":94,"line":3277},[92,12533,242],{"emptyLinePlaceholder":241},[92,12535,12536,12538],{"class":94,"line":3282},[92,12537,134],{"class":98},[92,12539,12540],{"class":102},"div\n",[92,12542,12543,12546,12548],{"class":94,"line":3295},[92,12544,12545],{"class":118},"      class",[92,12547,122],{"class":98},[92,12549,12550],{"class":125},"\"viewport\"\n",[92,12552,12553,12556,12558],{"class":94,"line":3310},[92,12554,12555],{"class":118},"      :class",[92,12557,122],{"class":98},[92,12559,12560],{"class":125},"\"`tier-${tier}`\"\n",[92,12562,12563,12566,12568],{"class":94,"line":3315},[92,12564,12565],{"class":118},"      :style",[92,12567,122],{"class":98},[92,12569,12570],{"class":125},"\"{ width: `${width}px` }\"\n",[92,12572,12573],{"class":94,"line":3334},[92,12574,12575],{"class":98},"    >\n",[92,12577,12578,12580,12583,12585,12587,12589],{"class":94,"line":3352},[92,12579,487],{"class":98},[92,12581,12582],{"class":102},"main",[92,12584,119],{"class":118},[92,12586,122],{"class":98},[92,12588,6871],{"class":125},[92,12590,106],{"class":98},[92,12592,12593,12595,12597,12599,12601,12604,12607,12609],{"class":94,"line":3370},[92,12594,1031],{"class":98},[92,12596,15],{"class":102},[92,12598,119],{"class":118},[92,12600,122],{"class":98},[92,12602,12603],{"class":125},"\"demo-label\"",[92,12605,12606],{"class":98},">预览\u003C\u002F",[92,12608,15],{"class":102},[92,12610,106],{"class":98},[92,12612,12613,12615,12617,12619,12621,12623,12625,12627,12630,12632],{"class":94,"line":3388},[92,12614,1031],{"class":98},[92,12616,15],{"class":102},[92,12618,119],{"class":118},[92,12620,122],{"class":98},[92,12622,11341],{"class":125},[92,12624,11344],{"class":118},[92,12626,122],{"class":98},[92,12628,12629],{"class":125},"\"随容器宽度变化的提示文字\"",[92,12631,2937],{"class":2936},[92,12633,106],{"class":98},[92,12635,12636,12638,12640,12642,12644,12646],{"class":94,"line":3407},[92,12637,1031],{"class":98},[92,12639,15],{"class":102},[92,12641,119],{"class":118},[92,12643,122],{"class":98},[92,12645,11800],{"class":125},[92,12647,106],{"class":98},[92,12649,12650,12652,12654,12656,12658,12660,12663,12665,12667,12669,12671,12673],{"class":94,"line":3412},[92,12651,1053],{"class":98},[92,12653,92],{"class":102},[92,12655,119],{"class":118},[92,12657,122],{"class":98},[92,12659,11815],{"class":125},[92,12661,12662],{"class":98},">窄容器，显示\u003C",[92,12664,1034],{"class":102},[92,12666,11828],{"class":98},[92,12668,1034],{"class":102},[92,12670,11833],{"class":98},[92,12672,92],{"class":102},[92,12674,106],{"class":98},[92,12676,12677,12679,12681,12683,12685,12687,12690,12692,12694,12696,12698,12700],{"class":94,"line":3426},[92,12678,1053],{"class":98},[92,12680,92],{"class":102},[92,12682,119],{"class":118},[92,12684,122],{"class":98},[92,12686,11850],{"class":125},[92,12688,12689],{"class":98},">中等容器，显示\u003C",[92,12691,1034],{"class":102},[92,12693,11858],{"class":98},[92,12695,1034],{"class":102},[92,12697,11833],{"class":98},[92,12699,92],{"class":102},[92,12701,106],{"class":98},[92,12703,12704,12706,12708,12710,12712,12714,12717,12719,12721,12723,12725,12727],{"class":94,"line":3438},[92,12705,1053],{"class":98},[92,12707,92],{"class":102},[92,12709,119],{"class":118},[92,12711,122],{"class":98},[92,12713,11879],{"class":125},[92,12715,12716],{"class":98},">宽容器，显示\u003C",[92,12718,1034],{"class":102},[92,12720,11887],{"class":98},[92,12722,1034],{"class":102},[92,12724,11833],{"class":98},[92,12726,92],{"class":102},[92,12728,106],{"class":98},[92,12730,12731,12733,12735],{"class":94,"line":3451},[92,12732,1079],{"class":98},[92,12734,15],{"class":102},[92,12736,106],{"class":98},[92,12738,12739,12741,12743],{"class":94,"line":3463},[92,12740,1088],{"class":98},[92,12742,12582],{"class":102},[92,12744,106],{"class":98},[92,12746,12747,12749,12751],{"class":94,"line":3468},[92,12748,507],{"class":98},[92,12750,115],{"class":102},[92,12752,106],{"class":98},[92,12754,12755,12757,12759],{"class":94,"line":3486},[92,12756,156],{"class":98},[92,12758,115],{"class":102},[92,12760,106],{"class":98},[92,12762,12763,12765,12767],{"class":94,"line":3506},[92,12764,166],{"class":98},[92,12766,2731],{"class":102},[92,12768,106],{"class":98},[92,12770,12771],{"class":94,"line":3531},[92,12772,242],{"emptyLinePlaceholder":241},[92,12774,12775,12777,12779,12781],{"class":94,"line":3562},[92,12776,99],{"class":98},[92,12778,3287],{"class":102},[92,12780,3290],{"class":118},[92,12782,106],{"class":98},[92,12784,12785,12787,12789,12791],{"class":94,"line":3567},[92,12786,3298],{"class":200},[92,12788,10839],{"class":98},[92,12790,3304],{"class":200},[92,12792,3307],{"class":125},[92,12794,12795],{"class":94,"line":3585},[92,12796,242],{"emptyLinePlaceholder":241},[92,12798,12799,12801,12804,12806,12808,12810,12812],{"class":94,"line":3596},[92,12800,2497],{"class":200},[92,12802,12803],{"class":190}," width",[92,12805,2503],{"class":200},[92,12807,3081],{"class":118},[92,12809,866],{"class":98},[92,12811,618],{"class":190},[92,12813,2517],{"class":98},[92,12815,12816],{"class":94,"line":3618},[92,12817,242],{"emptyLinePlaceholder":241},[92,12819,12820,12822,12825,12827,12829,12831,12833],{"class":94,"line":3630},[92,12821,2497],{"class":200},[92,12823,12824],{"class":190}," tier",[92,12826,2503],{"class":200},[92,12828,10881],{"class":118},[92,12830,3734],{"class":98},[92,12832,3688],{"class":200},[92,12834,185],{"class":98},[92,12836,12837,12839,12842,12845,12848,12850,12853],{"class":94,"line":3655},[92,12838,3489],{"class":200},[92,12840,12841],{"class":98}," (width.value ",[92,12843,12844],{"class":200},">=",[92,12846,12847],{"class":190}," 260",[92,12849,3685],{"class":98},[92,12851,12852],{"class":200},"return",[92,12854,12855],{"class":125}," 'desktop'\n",[92,12857,12858,12860,12862,12864,12867,12869,12871],{"class":94,"line":3723},[92,12859,3489],{"class":200},[92,12861,12841],{"class":98},[92,12863,12844],{"class":200},[92,12865,12866],{"class":190}," 180",[92,12868,3685],{"class":98},[92,12870,12852],{"class":200},[92,12872,12873],{"class":125}," 'tablet'\n",[92,12875,12876,12878],{"class":94,"line":3728},[92,12877,7797],{"class":200},[92,12879,12880],{"class":125}," 'mobile'\n",[92,12882,12883],{"class":94,"line":3741},[92,12884,7518],{"class":98},[92,12886,12887,12889,12891],{"class":94,"line":3758},[92,12888,166],{"class":98},[92,12890,3287],{"class":102},[92,12892,106],{"class":98},[92,12894,12895],{"class":94,"line":3770},[92,12896,242],{"emptyLinePlaceholder":241},[92,12898,12899,12901,12903,12905],{"class":94,"line":3779},[92,12900,99],{"class":98},[92,12902,1425],{"class":102},[92,12904,4225],{"class":118},[92,12906,106],{"class":98},[92,12908,12909,12912],{"class":94,"line":3788},[92,12910,12911],{"class":118},".playground",[92,12913,185],{"class":98},[92,12915,12916,12918,12920,12922],{"class":94,"line":3796},[92,12917,11140],{"class":190},[92,12919,194],{"class":98},[92,12921,21],{"class":190},[92,12923,204],{"class":98},[92,12925,12926,12928,12930,12932,12934],{"class":94,"line":3809},[92,12927,191],{"class":190},[92,12929,194],{"class":98},[92,12931,650],{"class":190},[92,12933,263],{"class":200},[92,12935,204],{"class":98},[92,12937,12938,12940,12942,12944,12946],{"class":94,"line":3815},[92,12939,4241],{"class":190},[92,12941,194],{"class":98},[92,12943,4467],{"class":190},[92,12945,201],{"class":200},[92,12947,204],{"class":98},[92,12949,12950,12952,12954,12956,12958,12961,12963,12966,12968,12970],{"class":94,"line":3836},[92,12951,4255],{"class":190},[92,12953,194],{"class":98},[92,12955,4260],{"class":190},[92,12957,3679],{"class":98},[92,12959,12960],{"class":190},"-apple-system",[92,12962,3679],{"class":98},[92,12964,12965],{"class":125},"\"Segoe UI\"",[92,12967,3679],{"class":98},[92,12969,4265],{"class":190},[92,12971,204],{"class":98},[92,12973,12974],{"class":94,"line":3847},[92,12975,235],{"class":98},[92,12977,12978],{"class":94,"line":3868},[92,12979,242],{"emptyLinePlaceholder":241},[92,12981,12982,12984],{"class":94,"line":3928},[92,12983,10989],{"class":118},[92,12985,185],{"class":98},[92,12987,12988,12990,12992,12994],{"class":94,"line":3933},[92,12989,1742],{"class":190},[92,12991,194],{"class":98},[92,12993,4636],{"class":190},[92,12995,204],{"class":98},[92,12997,12998,13001,13003,13006],{"class":94,"line":3941},[92,12999,13000],{"class":190},"  flex-direction",[92,13002,194],{"class":98},[92,13004,13005],{"class":190},"column",[92,13007,204],{"class":98},[92,13009,13010,13012,13014,13016,13018],{"class":94,"line":3955},[92,13011,4462],{"class":190},[92,13013,194],{"class":98},[92,13015,731],{"class":190},[92,13017,201],{"class":200},[92,13019,204],{"class":98},[92,13021,13022,13024,13026,13028,13030],{"class":94,"line":3960},[92,13023,4670],{"class":190},[92,13025,194],{"class":98},[92,13027,4467],{"class":190},[92,13029,201],{"class":200},[92,13031,204],{"class":98},[92,13033,13034],{"class":94,"line":3966},[92,13035,235],{"class":98},[92,13037,13038],{"class":94,"line":3971},[92,13039,242],{"emptyLinePlaceholder":241},[92,13041,13042,13045],{"class":94,"line":3976},[92,13043,13044],{"class":118},".segmented",[92,13046,185],{"class":98},[92,13048,13049,13051,13053,13055],{"class":94,"line":3987},[92,13050,1742],{"class":190},[92,13052,194],{"class":98},[92,13054,4636],{"class":190},[92,13056,204],{"class":98},[92,13058,13059,13061,13063,13065,13067],{"class":94,"line":3997},[92,13060,4462],{"class":190},[92,13062,194],{"class":98},[92,13064,4748],{"class":190},[92,13066,201],{"class":200},[92,13068,204],{"class":98},[92,13070,13071,13073,13075,13078,13080],{"class":94,"line":4006},[92,13072,4241],{"class":190},[92,13074,194],{"class":98},[92,13076,13077],{"class":190},"3",[92,13079,201],{"class":200},[92,13081,204],{"class":98},[92,13083,13084,13086,13088,13090,13092],{"class":94,"line":4016},[92,13085,4404],{"class":190},[92,13087,194],{"class":98},[92,13089,4675],{"class":190},[92,13091,201],{"class":200},[92,13093,204],{"class":98},[92,13095,13096,13098,13100,13102],{"class":94,"line":4026},[92,13097,4419],{"class":190},[92,13099,194],{"class":98},[92,13101,4424],{"class":190},[92,13103,204],{"class":98},[92,13105,13106],{"class":94,"line":4035},[92,13107,235],{"class":98},[92,13109,13110],{"class":94,"line":4045},[92,13111,242],{"emptyLinePlaceholder":241},[92,13113,13114,13116,13119],{"class":94,"line":4050},[92,13115,13044],{"class":118},[92,13117,13118],{"class":102}," button",[92,13120,185],{"class":98},[92,13122,13123,13126,13128,13130],{"class":94,"line":4055},[92,13124,13125],{"class":190},"  flex",[92,13127,194],{"class":98},[92,13129,4389],{"class":190},[92,13131,204],{"class":98},[92,13133,13134,13136,13138,13140],{"class":94,"line":4065},[92,13135,627],{"class":190},[92,13137,194],{"class":98},[92,13139,805],{"class":190},[92,13141,204],{"class":98},[92,13143,13144,13146,13148,13150,13152],{"class":94,"line":4079},[92,13145,4404],{"class":190},[92,13147,194],{"class":98},[92,13149,4689],{"class":190},[92,13151,201],{"class":200},[92,13153,204],{"class":98},[92,13155,13156,13158,13160,13163,13165,13167],{"class":94,"line":4086},[92,13157,4241],{"class":190},[92,13159,194],{"class":98},[92,13161,13162],{"class":190},"7",[92,13164,201],{"class":200},[92,13166,4298],{"class":190},[92,13168,204],{"class":98},[92,13170,13171,13173,13175,13177,13179],{"class":94,"line":4094},[92,13172,1837],{"class":190},[92,13174,194],{"class":98},[92,13176,4467],{"class":190},[92,13178,201],{"class":200},[92,13180,204],{"class":98},[92,13182,13183,13185,13187,13189],{"class":94,"line":4106},[92,13184,4731],{"class":190},[92,13186,194],{"class":98},[92,13188,197],{"class":190},[92,13190,204],{"class":98},[92,13192,13193,13195,13197,13199],{"class":94,"line":4117},[92,13194,1477],{"class":190},[92,13196,194],{"class":98},[92,13198,4315],{"class":190},[92,13200,204],{"class":98},[92,13202,13203,13205,13207,13210],{"class":94,"line":4126},[92,13204,4419],{"class":190},[92,13206,194],{"class":98},[92,13208,13209],{"class":190},"transparent",[92,13211,204],{"class":98},[92,13213,13214,13216,13218,13220],{"class":94,"line":4132},[92,13215,5366],{"class":190},[92,13217,194],{"class":98},[92,13219,5371],{"class":190},[92,13221,204],{"class":98},[92,13223,13224,13226,13228,13230,13233,13235,13237,13239,13241,13243,13245,13248,13250],{"class":94,"line":4137},[92,13225,10145],{"class":190},[92,13227,194],{"class":98},[92,13229,2574],{"class":2936},[92,13231,13232],{"class":190}," 0.15",[92,13234,9353],{"class":200},[92,13236,3679],{"class":98},[92,13238,2043],{"class":190},[92,13240,13232],{"class":190},[92,13242,9353],{"class":200},[92,13244,10159],{"class":98},[92,13246,13247],{"class":190},"0.15",[92,13249,9353],{"class":200},[92,13251,204],{"class":98},[92,13253,13254],{"class":94,"line":4142},[92,13255,235],{"class":98},[92,13257,13258],{"class":94,"line":4152},[92,13259,242],{"emptyLinePlaceholder":241},[92,13261,13262,13264,13266,13269],{"class":94,"line":4162},[92,13263,13044],{"class":118},[92,13265,13118],{"class":102},[92,13267,13268],{"class":118},":hover",[92,13270,185],{"class":98},[92,13272,13273,13275,13277,13279],{"class":94,"line":4170},[92,13274,1477],{"class":190},[92,13276,194],{"class":98},[92,13278,5456],{"class":190},[92,13280,204],{"class":98},[92,13282,13283],{"class":94,"line":4178},[92,13284,235],{"class":98},[92,13286,13287],{"class":94,"line":4183},[92,13288,242],{"emptyLinePlaceholder":241},[92,13290,13291,13293,13295,13298],{"class":94,"line":4188},[92,13292,13044],{"class":118},[92,13294,13118],{"class":102},[92,13296,13297],{"class":118},".active",[92,13299,185],{"class":98},[92,13301,13302,13304,13306,13308],{"class":94,"line":4204},[92,13303,4419],{"class":190},[92,13305,194],{"class":98},[92,13307,9134],{"class":190},[92,13309,204],{"class":98},[92,13311,13312,13314,13316,13319],{"class":94,"line":4213},[92,13313,1477],{"class":190},[92,13315,194],{"class":98},[92,13317,13318],{"class":190},"#0f172a",[92,13320,204],{"class":98},[92,13322,13323,13325,13327,13329,13331,13333,13335,13337,13340,13342,13344,13347,13350,13352,13354],{"class":94,"line":4218},[92,13324,10063],{"class":190},[92,13326,194],{"class":98},[92,13328,869],{"class":190},[92,13330,4525],{"class":190},[92,13332,201],{"class":200},[92,13334,9263],{"class":190},[92,13336,201],{"class":200},[92,13338,13339],{"class":190}," rgb",[92,13341,866],{"class":98},[92,13343,10399],{"class":190},[92,13345,13346],{"class":190}," 23",[92,13348,13349],{"class":190}," 42",[92,13351,394],{"class":98},[92,13353,10138],{"class":190},[92,13355,875],{"class":98},[92,13357,13358],{"class":94,"line":4230},[92,13359,235],{"class":98},[92,13361,13362],{"class":94,"line":4238},[92,13363,242],{"emptyLinePlaceholder":241},[92,13365,13366,13369],{"class":94,"line":4252},[92,13367,13368],{"class":118},".slider-row",[92,13370,185],{"class":98},[92,13372,13373,13375,13377,13379],{"class":94,"line":4270},[92,13374,1742],{"class":190},[92,13376,194],{"class":98},[92,13378,4636],{"class":190},[92,13380,204],{"class":98},[92,13382,13383,13385,13387,13389],{"class":94,"line":4275},[92,13384,4644],{"class":190},[92,13386,194],{"class":98},[92,13388,4649],{"class":190},[92,13390,204],{"class":98},[92,13392,13393,13395,13397,13399,13401],{"class":94,"line":4280},[92,13394,4462],{"class":190},[92,13396,194],{"class":98},[92,13398,4675],{"class":190},[92,13400,201],{"class":200},[92,13402,204],{"class":98},[92,13404,13405,13407,13409,13411,13413],{"class":94,"line":4288},[92,13406,1837],{"class":190},[92,13408,194],{"class":98},[92,13410,4721],{"class":190},[92,13412,201],{"class":200},[92,13414,204],{"class":98},[92,13416,13417,13419,13421,13423],{"class":94,"line":4308},[92,13418,1477],{"class":190},[92,13420,194],{"class":98},[92,13422,4315],{"class":190},[92,13424,204],{"class":98},[92,13426,13427],{"class":94,"line":4320},[92,13428,235],{"class":98},[92,13430,13431],{"class":94,"line":4335},[92,13432,242],{"emptyLinePlaceholder":241},[92,13434,13435,13437,13440],{"class":94,"line":4348},[92,13436,13368],{"class":118},[92,13438,13439],{"class":102}," input",[92,13441,185],{"class":98},[92,13443,13444,13446,13448,13450],{"class":94,"line":4353},[92,13445,13125],{"class":190},[92,13447,194],{"class":98},[92,13449,4389],{"class":190},[92,13451,204],{"class":98},[92,13453,13454,13457,13459,13462],{"class":94,"line":4358},[92,13455,13456],{"class":190},"  accent-color",[92,13458,194],{"class":98},[92,13460,13461],{"class":190},"#0ea5e9",[92,13463,204],{"class":98},[92,13465,13466],{"class":94,"line":4368},[92,13467,235],{"class":98},[92,13469,13470],{"class":94,"line":4382},[92,13471,242],{"emptyLinePlaceholder":241},[92,13473,13474,13477],{"class":94,"line":4401},[92,13475,13476],{"class":118},".width-readout",[92,13478,185],{"class":98},[92,13480,13481,13484,13486,13488,13490],{"class":94,"line":4416},[92,13482,13483],{"class":190},"  min-width",[92,13485,194],{"class":98},[92,13487,13077],{"class":190},[92,13489,4330],{"class":200},[92,13491,204],{"class":98},[92,13493,13494,13496,13498,13500],{"class":94,"line":4429},[92,13495,4903],{"class":190},[92,13497,194],{"class":98},[92,13499,4908],{"class":190},[92,13501,204],{"class":98},[92,13503,13504,13506,13508,13511],{"class":94,"line":4434},[92,13505,7144],{"class":190},[92,13507,194],{"class":98},[92,13509,13510],{"class":190},"right",[92,13512,204],{"class":98},[92,13514,13515,13517,13519,13521],{"class":94,"line":4439},[92,13516,1477],{"class":190},[92,13518,194],{"class":98},[92,13520,5456],{"class":190},[92,13522,204],{"class":98},[92,13524,13525],{"class":94,"line":4447},[92,13526,235],{"class":98},[92,13528,13529],{"class":94,"line":4459},[92,13530,242],{"emptyLinePlaceholder":241},[92,13532,13533,13536],{"class":94,"line":4474},[92,13534,13535],{"class":118},".viewport",[92,13537,185],{"class":98},[92,13539,13540,13543,13545,13547,13549],{"class":94,"line":4479},[92,13541,13542],{"class":190},"  max-width",[92,13544,194],{"class":98},[92,13546,650],{"class":190},[92,13548,263],{"class":200},[92,13550,204],{"class":98},[92,13552,13553,13555,13557,13559,13561,13563,13566],{"class":94,"line":4484},[92,13554,627],{"class":190},[92,13556,194],{"class":98},[92,13558,4389],{"class":190},[92,13560,201],{"class":200},[92,13562,637],{"class":190},[92,13564,13565],{"class":190}," #334155",[92,13567,204],{"class":98},[92,13569,13570,13572,13574,13576,13578],{"class":94,"line":4504},[92,13571,4404],{"class":190},[92,13573,194],{"class":98},[92,13575,731],{"class":190},[92,13577,201],{"class":200},[92,13579,204],{"class":98},[92,13581,13582,13584,13587,13589,13591,13593],{"class":94,"line":4512},[92,13583,10145],{"class":190},[92,13585,13586],{"class":98},": width ",[92,13588,13247],{"class":190},[92,13590,9353],{"class":200},[92,13592,10156],{"class":190},[92,13594,204],{"class":98},[92,13596,13597,13599,13601,13603],{"class":94,"line":4532},[92,13598,5024],{"class":190},[92,13600,194],{"class":98},[92,13602,5029],{"class":190},[92,13604,204],{"class":98},[92,13606,13607],{"class":94,"line":4537},[92,13608,235],{"class":98},[92,13610,13611],{"class":94,"line":4542},[92,13612,242],{"emptyLinePlaceholder":241},[92,13614,13615,13617],{"class":94,"line":4547},[92,13616,7111],{"class":118},[92,13618,185],{"class":98},[92,13620,13621,13623,13625,13627,13629],{"class":94,"line":4555},[92,13622,4241],{"class":190},[92,13624,194],{"class":98},[92,13626,11032],{"class":190},[92,13628,201],{"class":200},[92,13630,204],{"class":98},[92,13632,13633,13635,13637,13640],{"class":94,"line":4568},[92,13634,4419],{"class":190},[92,13636,194],{"class":98},[92,13638,13639],{"class":190},"#1e293b",[92,13641,204],{"class":98},[92,13643,13644,13646,13648,13650],{"class":94,"line":4581},[92,13645,1477],{"class":190},[92,13647,194],{"class":98},[92,13649,4424],{"class":190},[92,13651,204],{"class":98},[92,13653,13654],{"class":94,"line":4593},[92,13655,235],{"class":98},[92,13657,13658],{"class":94,"line":4611},[92,13659,242],{"emptyLinePlaceholder":241},[92,13661,13662,13665],{"class":94,"line":4616},[92,13663,13664],{"class":118},".demo-label",[92,13666,185],{"class":98},[92,13668,13669,13671,13673,13675,13677,13679,13681],{"class":94,"line":4621},[92,13670,4291],{"class":190},[92,13672,194],{"class":98},[92,13674,869],{"class":190},[92,13676,4298],{"class":190},[92,13678,7177],{"class":190},[92,13680,201],{"class":200},[92,13682,204],{"class":98},[92,13684,13685,13687,13689,13691,13693],{"class":94,"line":4629},[92,13686,1837],{"class":190},[92,13688,194],{"class":98},[92,13690,4721],{"class":190},[92,13692,201],{"class":200},[92,13694,204],{"class":98},[92,13696,13697,13699,13701,13703],{"class":94,"line":4641},[92,13698,4731],{"class":190},[92,13700,194],{"class":98},[92,13702,197],{"class":190},[92,13704,204],{"class":98},[92,13706,13707,13710,13712,13715,13717],{"class":94,"line":4654},[92,13708,13709],{"class":190},"  letter-spacing",[92,13711,194],{"class":98},[92,13713,13714],{"class":190},"0.04",[92,13716,1034],{"class":200},[92,13718,204],{"class":98},[92,13720,13721,13724,13726,13729],{"class":94,"line":4667},[92,13722,13723],{"class":190},"  text-transform",[92,13725,194],{"class":98},[92,13727,13728],{"class":190},"uppercase",[92,13730,204],{"class":98},[92,13732,13733,13735,13737,13739],{"class":94,"line":4682},[92,13734,1477],{"class":190},[92,13736,194],{"class":98},[92,13738,4315],{"class":190},[92,13740,204],{"class":98},[92,13742,13743],{"class":94,"line":4696},[92,13744,235],{"class":98},[92,13746,13747],{"class":94,"line":4701},[92,13748,242],{"emptyLinePlaceholder":241},[92,13750,13751,13753],{"class":94,"line":4706},[92,13752,11592],{"class":118},[92,13754,185],{"class":98},[92,13756,13757,13759,13761,13763,13765,13767,13769],{"class":94,"line":4714},[92,13758,4291],{"class":190},[92,13760,194],{"class":98},[92,13762,869],{"class":190},[92,13764,4298],{"class":190},[92,13766,7177],{"class":190},[92,13768,201],{"class":200},[92,13770,204],{"class":98},[92,13772,13773,13775,13777,13780,13782],{"class":94,"line":4728},[92,13774,1837],{"class":190},[92,13776,194],{"class":98},[92,13778,13779],{"class":190},"18",[92,13781,201],{"class":200},[92,13783,204],{"class":98},[92,13785,13786,13788,13790,13793],{"class":94,"line":4741},[92,13787,4731],{"class":190},[92,13789,194],{"class":98},[92,13791,13792],{"class":190},"700",[92,13794,204],{"class":98},[92,13796,13797,13799,13801,13804],{"class":94,"line":4760},[92,13798,4338],{"class":190},[92,13800,194],{"class":98},[92,13802,13803],{"class":190},"1.4",[92,13805,204],{"class":98},[92,13807,13808,13810,13812,13815],{"class":94,"line":4774},[92,13809,1477],{"class":190},[92,13811,194],{"class":98},[92,13813,13814],{"class":190},"#38bdf8",[92,13816,204],{"class":98},[92,13818,13819],{"class":94,"line":4779},[92,13820,235],{"class":98},[92,13822,13823],{"class":94,"line":4784},[92,13824,242],{"emptyLinePlaceholder":241},[92,13826,13827,13830,13833],{"class":94,"line":4792},[92,13828,13829],{"class":118},".tier-mobile",[92,13831,13832],{"class":118}," .responsive-text::before",[92,13834,185],{"class":98},[92,13836,13837,13839,13841,13843],{"class":94,"line":4804},[92,13838,11654],{"class":190},[92,13840,194],{"class":98},[92,13842,11659],{"class":125},[92,13844,204],{"class":98},[92,13846,13847],{"class":94,"line":4816},[92,13848,235],{"class":98},[92,13850,13851],{"class":94,"line":4821},[92,13852,242],{"emptyLinePlaceholder":241},[92,13854,13855,13858,13860],{"class":94,"line":4826},[92,13856,13857],{"class":118},".tier-tablet",[92,13859,13832],{"class":118},[92,13861,185],{"class":98},[92,13863,13864,13866,13868,13870],{"class":94,"line":4834},[92,13865,11654],{"class":190},[92,13867,194],{"class":98},[92,13869,11701],{"class":125},[92,13871,204],{"class":98},[92,13873,13874],{"class":94,"line":4846},[92,13875,235],{"class":98},[92,13877,13878],{"class":94,"line":4858},[92,13879,242],{"emptyLinePlaceholder":241},[92,13881,13882,13885,13887],{"class":94,"line":4863},[92,13883,13884],{"class":118},".tier-desktop",[92,13886,13832],{"class":118},[92,13888,185],{"class":98},[92,13890,13891,13893,13895,13897],{"class":94,"line":4868},[92,13892,11654],{"class":190},[92,13894,194],{"class":98},[92,13896,11746],{"class":125},[92,13898,204],{"class":98},[92,13900,13901],{"class":94,"line":4876},[92,13902,235],{"class":98},[92,13904,13905],{"class":94,"line":4889},[92,13906,242],{"emptyLinePlaceholder":241},[92,13908,13909,13911],{"class":94,"line":4900},[92,13910,11916],{"class":118},[92,13912,185],{"class":98},[92,13914,13915,13917,13919,13921],{"class":94,"line":4913},[92,13916,4291],{"class":190},[92,13918,194],{"class":98},[92,13920,869],{"class":190},[92,13922,204],{"class":98},[92,13924,13925,13927,13929,13931,13933],{"class":94,"line":4924},[92,13926,1837],{"class":190},[92,13928,194],{"class":98},[92,13930,5383],{"class":190},[92,13932,201],{"class":200},[92,13934,204],{"class":98},[92,13936,13937,13939,13941,13944],{"class":94,"line":4929},[92,13938,4338],{"class":190},[92,13940,194],{"class":98},[92,13942,13943],{"class":190},"1.6",[92,13945,204],{"class":98},[92,13947,13948,13950,13952,13955],{"class":94,"line":4934},[92,13949,1477],{"class":190},[92,13951,194],{"class":98},[92,13953,13954],{"class":190},"#cbd5e1",[92,13956,204],{"class":98},[92,13958,13959],{"class":94,"line":4942},[92,13960,235],{"class":98},[92,13962,13963],{"class":94,"line":4954},[92,13964,242],{"emptyLinePlaceholder":241},[92,13966,13967,13969,13972],{"class":94,"line":4959},[92,13968,11916],{"class":118},[92,13970,13971],{"class":102}," span",[92,13973,185],{"class":98},[92,13975,13976,13978,13980,13982],{"class":94,"line":4964},[92,13977,1742],{"class":190},[92,13979,194],{"class":98},[92,13981,805],{"class":190},[92,13983,204],{"class":98},[92,13985,13986],{"class":94,"line":4972},[92,13987,235],{"class":98},[92,13989,13990],{"class":94,"line":4983},[92,13991,242],{"emptyLinePlaceholder":241},[92,13993,13994,13996,13999,14002],{"class":94,"line":4997},[92,13995,13829],{"class":118},[92,13997,13998],{"class":118}," .responsive-spans",[92,14000,14001],{"class":118}," .is-mobile",[92,14003,185],{"class":98},[92,14005,14006,14008,14010,14012],{"class":94,"line":5010},[92,14007,1742],{"class":190},[92,14009,194],{"class":98},[92,14011,11960],{"class":190},[92,14013,204],{"class":98},[92,14015,14016],{"class":94,"line":5021},[92,14017,235],{"class":98},[92,14019,14020],{"class":94,"line":5034},[92,14021,242],{"emptyLinePlaceholder":241},[92,14023,14024,14026,14028,14031],{"class":94,"line":5039},[92,14025,13857],{"class":118},[92,14027,13998],{"class":118},[92,14029,14030],{"class":118}," .is-tablet",[92,14032,185],{"class":98},[92,14034,14035,14037,14039,14041],{"class":94,"line":5044},[92,14036,1742],{"class":190},[92,14038,194],{"class":98},[92,14040,11960],{"class":190},[92,14042,204],{"class":98},[92,14044,14045],{"class":94,"line":5052},[92,14046,235],{"class":98},[92,14048,14049],{"class":94,"line":5063},[92,14050,242],{"emptyLinePlaceholder":241},[92,14052,14053,14055,14057,14060],{"class":94,"line":5076},[92,14054,13884],{"class":118},[92,14056,13998],{"class":118},[92,14058,14059],{"class":118}," .is-desktop",[92,14061,185],{"class":98},[92,14063,14064,14066,14068,14070],{"class":94,"line":5087},[92,14065,1742],{"class":190},[92,14067,194],{"class":98},[92,14069,11960],{"class":190},[92,14071,204],{"class":98},[92,14073,14074],{"class":94,"line":5101},[92,14075,235],{"class":98},[92,14077,14078],{"class":94,"line":5114},[92,14079,242],{"emptyLinePlaceholder":241},[92,14081,14082,14084,14087],{"class":94,"line":5127},[92,14083,11916],{"class":118},[92,14085,14086],{"class":102}," em",[92,14088,185],{"class":98},[92,14090,14091,14094,14096,14099],{"class":94,"line":5139},[92,14092,14093],{"class":190},"  font-style",[92,14095,194],{"class":98},[92,14097,14098],{"class":190},"normal",[92,14100,204],{"class":98},[92,14102,14103,14105,14107,14110],{"class":94,"line":5152},[92,14104,1477],{"class":190},[92,14106,194],{"class":98},[92,14108,14109],{"class":190},"#f472b6",[92,14111,204],{"class":98},[92,14113,14114,14116,14118,14120],{"class":94,"line":5157},[92,14115,4731],{"class":190},[92,14117,194],{"class":98},[92,14119,4736],{"class":190},[92,14121,204],{"class":98},[92,14123,14124],{"class":94,"line":5162},[92,14125,235],{"class":98},[92,14127,14128,14130,14132],{"class":94,"line":5170},[92,14129,166],{"class":98},[92,14131,1425],{"class":102},[92,14133,106],{"class":98},[15,14135,14136,14137,14139],{},"将上文代码接入你的页面并部署后，拖窄浏览器窗口，或使用开发者工具的设备模拟，即可验证真实视口的 ",[19,14138,4487],{}," 断点效果。",[78,14141,1381],{"id":1381},[342,14143,14144,14157,14165],{},[345,14145,14146,14147,14150,14151,14153,14154,14156],{},"用 ",[19,14148,14149],{},"@media (min-width)"," 按断点覆盖 ",[19,14152,11322],{}," 或切换 ",[19,14155,1638],{},"，即可实现无 JS 的响应式文案",[345,14158,14159,14160,14162,14163],{},"纯字符串标语用 ",[19,14161,6052],{}," + mixin 最省事；富文本用多段 ",[19,14164,92],{},[345,14166,14167,14168,14170],{},"伪元素内容对读屏不友好，务必补充 ",[19,14169,11360],{}," 或选用真实 DOM 方案",[1425,14172,14173],{},"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":88,"searchDepth":131,"depth":131,"links":14175},[14176,14177,14178,14179,14180],{"id":11315,"depth":109,"text":11316},{"id":11775,"depth":109,"text":11776},{"id":12092,"depth":109,"text":12092},{"id":12148,"depth":109,"text":12148},{"id":1381,"depth":109,"text":1381},"2026-05-12","不依赖 JavaScript，用媒体查询配合伪元素 content 或多段 span 显示\u002F隐藏，随视口宽度自动切换文案。",{},"\u002Fblog\u002Fcss-responsive-text",{"title":11282,"description":14182},"blog\u002Fcss-responsive-text",[14188,14189,14190],"responsive","media-queries","pseudo-element","DeEdWkyNdRu8JUinAkU4L1nVNQUpWqvb9ku3Q6Mc1CY",{"id":14193,"title":14194,"body":14195,"category":2485,"date":14618,"description":14619,"draft":1440,"extension":1441,"meta":14620,"navigation":241,"path":14621,"seo":14622,"stem":14623,"tags":14624,"__hash__":14626},"blog\u002Fblog\u002Fbig-int-add.md","大整数相加",{"type":8,"value":14196,"toc":14609},[14197,14199,14223,14230,14233,14263,14267,14276,14370,14385,14389,14399,14482,14495,14498,14504,14507,14557,14561,14567,14582,14585,14587,14607],[11,14198,14194],{"id":14194},[15,14200,14201,14202,14204,14205,14208,14209,14212,14213,14216,14217,814,14219,14222],{},"JavaScript 的 ",[19,14203,7771],{}," 基于 IEEE 754 双精度浮点，安全整数范围是 ",[19,14206,14207],{},"-(2^53 - 1)"," 到 ",[19,14210,14211],{},"2^53 - 1","（即 ",[19,14214,14215],{},"Number.MAX_SAFE_INTEGER","）。当两个「大正整数」字符串相加时，不能直接用 ",[19,14218,3694],{},[19,14220,14221],{},"Number()"," 转换，否则会丢失精度。",[15,14224,14225,14226,14229],{},"这道题的核心思路是：",[24,14227,14228],{},"模拟小学竖式加法","——从低位到高位逐位相加，维护进位。",[78,14231,14232],{"id":14232},"思路",[1663,14234,14235,14238,14241,14247,14257,14260],{},[345,14236,14237],{},"将两个操作数转为字符串（或本来就是字符串）",[345,14239,14240],{},"从最后一位（个位）向前遍历",[345,14242,14243,14244],{},"对应位数字相加，再加上进位 ",[19,14245,14246],{},"carry",[345,14248,14249,14250,14253,14254],{},"当前位结果 = ",[19,14251,14252],{},"sum % 10","，新进位 = ",[19,14255,14256],{},"Math.floor(sum \u002F 10)",[345,14258,14259],{},"遍历结束后若仍有进位，需要补一位",[345,14261,14262],{},"将结果数组反转（或从高位拼接）得到最终字符串",[78,14264,14266],{"id":14265},"实现一数组收集后反转","实现一：数组收集后反转",[15,14268,14269,14270,14272,14273,57],{},"从字符串末尾双指针向前扫，结果先 ",[19,14271,3624],{}," 到数组，最后 ",[19,14274,14275],{},"reverse().join(\"\")",[2483,14277,14279],{"lang":2485,"title":14278},"addBigIntegers",[83,14280,14282],{"className":2489,"code":14281,"language":2485,"meta":88,"style":88},"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,14283,14284,14289,14294,14299,14304,14309,14314,14319,14323,14328,14333,14338,14343,14348,14353,14357,14361,14366],{"__ignoreMap":88},[92,14285,14286],{"class":94,"line":95},[92,14287,14288],{},"function addBigIntegers(a, b) {\n",[92,14290,14291],{"class":94,"line":109},[92,14292,14293],{},"  const strA = String(a);\n",[92,14295,14296],{"class":94,"line":131},[92,14297,14298],{},"  const strB = String(b);\n",[92,14300,14301],{"class":94,"line":153},[92,14302,14303],{},"  let i = strA.length - 1;\n",[92,14305,14306],{"class":94,"line":163},[92,14307,14308],{},"  let j = strB.length - 1;\n",[92,14310,14311],{"class":94,"line":238},[92,14312,14313],{},"  let carry = 0;\n",[92,14315,14316],{"class":94,"line":245},[92,14317,14318],{},"  const result = [];\n",[92,14320,14321],{"class":94,"line":253},[92,14322,242],{"emptyLinePlaceholder":241},[92,14324,14325],{"class":94,"line":268},[92,14326,14327],{},"  while (i >= 0 || j >= 0 || carry > 0) {\n",[92,14329,14330],{"class":94,"line":281},[92,14331,14332],{},"    const digitA = i >= 0 ? Number(strA[i--]) : 0;\n",[92,14334,14335],{"class":94,"line":293},[92,14336,14337],{},"    const digitB = j >= 0 ? Number(strB[j--]) : 0;\n",[92,14339,14340],{"class":94,"line":642},[92,14341,14342],{},"    const sum = digitA + digitB + carry;\n",[92,14344,14345],{"class":94,"line":657},[92,14346,14347],{},"    result.push(sum % 10);\n",[92,14349,14350],{"class":94,"line":662},[92,14351,14352],{},"    carry = Math.floor(sum \u002F 10);\n",[92,14354,14355],{"class":94,"line":667},[92,14356,4129],{},[92,14358,14359],{"class":94,"line":675},[92,14360,242],{"emptyLinePlaceholder":241},[92,14362,14363],{"class":94,"line":688},[92,14364,14365],{},"  return result.reverse().join(\"\");\n",[92,14367,14368],{"class":94,"line":701},[92,14369,235],{},[15,14371,14372,14373,14376,14377,14380,14381,14384],{},"注意 ",[19,14374,14375],{},"while"," 条件里的 ",[19,14378,14379],{},"carry > 0","：最高位相加后若产生进位（如 ",[19,14382,14383],{},"999 + 1","），循环需要多跑一轮。",[78,14386,14388],{"id":14387},"实现二左对齐补零高位拼接","实现二：左对齐补零，高位拼接",[15,14390,14391,14392,14395,14396,57],{},"另一种写法是先去掉前导零、用 ",[19,14393,14394],{},"padStart"," 对齐长度，再从右向左遍历，把每位结果",[24,14397,14398],{},"拼到字符串前面",[2483,14400,14402],{"lang":2485,"title":14401},"addBigIntegers（对齐版）",[83,14403,14405],{"className":2489,"code":14404,"language":2485,"meta":88,"style":88},"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,14406,14407,14411,14416,14421,14426,14431,14436,14440,14445,14450,14455,14459,14464,14468,14473,14478],{"__ignoreMap":88},[92,14408,14409],{"class":94,"line":95},[92,14410,14288],{},[92,14412,14413],{"class":94,"line":109},[92,14414,14415],{},"  a = String(a).replace(\u002F^0+\u002F, \"\") || \"0\";\n",[92,14417,14418],{"class":94,"line":131},[92,14419,14420],{},"  b = String(b).replace(\u002F^0+\u002F, \"\") || \"0\";\n",[92,14422,14423],{"class":94,"line":153},[92,14424,14425],{},"  const lth = Math.max(a.length, b.length);\n",[92,14427,14428],{"class":94,"line":163},[92,14429,14430],{},"  a = a.padStart(lth, \"0\");\n",[92,14432,14433],{"class":94,"line":238},[92,14434,14435],{},"  b = b.padStart(lth, \"0\");\n",[92,14437,14438],{"class":94,"line":245},[92,14439,14313],{},[92,14441,14442],{"class":94,"line":253},[92,14443,14444],{},"  let result = \"\";\n",[92,14446,14447],{"class":94,"line":268},[92,14448,14449],{},"  for (let i = lth - 1; i >= 0; i--) {\n",[92,14451,14452],{"class":94,"line":281},[92,14453,14454],{},"    const sum = Number(a[i]) + Number(b[i]) + carry;\n",[92,14456,14457],{"class":94,"line":293},[92,14458,14352],{},[92,14460,14461],{"class":94,"line":642},[92,14462,14463],{},"    result = String(sum % 10) + result;\n",[92,14465,14466],{"class":94,"line":657},[92,14467,4129],{},[92,14469,14470],{"class":94,"line":662},[92,14471,14472],{},"  if (carry > 0) result = String(carry) + result;\n",[92,14474,14475],{"class":94,"line":667},[92,14476,14477],{},"  return result;\n",[92,14479,14480],{"class":94,"line":675},[92,14481,235],{},[15,14483,14484,14485,1254,14488,5960,14491,14494],{},"相比实现一，这版额外处理了",[24,14486,14487],{},"前导零",[19,14489,14490],{},"\"0123\" + \"456\"",[19,14492,14493],{},"\"579\"","），对小整数也适用。",[78,14496,14497],{"id":14497},"测试用例",[83,14499,14502],{"className":14500,"code":14501,"language":7852,"meta":88},[7850],"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,14503,14501],{"__ignoreMap":88},[78,14505,14506],{"id":14506},"复杂度与边界",[366,14508,14509,14519],{},[369,14510,14511],{},[372,14512,14513,14516],{},[375,14514,14515],{},"项目",[375,14517,14518],{},"说明",[384,14520,14521,14529,14537,14549],{},[372,14522,14523,14526],{},[389,14524,14525],{},"时间复杂度",[389,14527,14528],{},"O(max(m, n))，m、n 为两数位数",[372,14530,14531,14534],{},[389,14532,14533],{},"空间复杂度",[389,14535,14536],{},"O(max(m, n))，存放结果",[372,14538,14539,14542],{},[389,14540,14541],{},"负数",[389,14543,14544,14545,14548],{},"本题通常只考大",[24,14546,14547],{},"正","整数；若需支持负数，要先处理符号与绝对值大小比较",[372,14550,14551,14554],{},[389,14552,14553],{},"小数",[389,14555,14556],{},"需先对齐小数点，再分别处理整数与小数部分",[78,14558,14560],{"id":14559},"延伸bigint","延伸：BigInt",[15,14562,14563,14564,340],{},"现代环境可直接用 ",[19,14565,14566],{},"BigInt",[83,14568,14570],{"className":2489,"code":14569,"language":2485,"meta":88,"style":88},"String(BigInt(\"999999999999999999999\") + BigInt(\"1\"))\n\u002F\u002F → \"1000000000000000000000\"\n",[19,14571,14572,14577],{"__ignoreMap":88},[92,14573,14574],{"class":94,"line":95},[92,14575,14576],{},"String(BigInt(\"999999999999999999999\") + BigInt(\"1\"))\n",[92,14578,14579],{"class":94,"line":109},[92,14580,14581],{},"\u002F\u002F → \"1000000000000000000000\"\n",[15,14583,14584],{},"面试手写时仍建议掌握字符串模拟竖式加法——考察的是对进位、边界和字符串操作的理解，而非 API 记忆。",[78,14586,1381],{"id":1381},[342,14588,14589,14595,14601,14604],{},[345,14590,14591,14592,14594],{},"大整数相加不能依赖 ",[19,14593,7771],{},"，应逐位模拟竖式加法",[345,14596,14597,14598,14600],{},"双指针从末尾向前扫，或 ",[19,14599,14394],{}," 对齐后从右向左拼结果",[345,14602,14603],{},"循环条件要覆盖「最后一位仍有进位」的情况",[345,14605,14606],{},"对齐版实现还能统一处理前导零与小整数输入",[1425,14608,8872],{},{"title":88,"searchDepth":131,"depth":131,"links":14610},[14611,14612,14613,14614,14615,14616,14617],{"id":14232,"depth":109,"text":14232},{"id":14265,"depth":109,"text":14266},{"id":14387,"depth":109,"text":14388},{"id":14497,"depth":109,"text":14497},{"id":14506,"depth":109,"text":14506},{"id":14559,"depth":109,"text":14560},{"id":1381,"depth":109,"text":1381},"2026-05-10","用字符串模拟竖式加法，处理超出 Number 精度的大正整数求和，常见前端面试手写题。",{},"\u002Fblog\u002Fbig-int-add",{"title":14194,"description":14619},"blog\u002Fbig-int-add",[14625,1449],"algorithm","AzJ9a1SGNrgKuH7mn3OfWWWrm1n9SCy5pVODYzyS9W4",{"id":14628,"title":14629,"body":14630,"category":2722,"date":15218,"description":15219,"draft":1440,"extension":1441,"meta":15220,"navigation":241,"path":15221,"seo":15222,"stem":15223,"tags":15224,"__hash__":15227},"blog\u002Fblog\u002Fhello-vue3.md","Vue 3 组合式 API 入门",{"type":8,"value":14631,"toc":15213},[14632,14635,14638,14641,14743,14746,14749,15191,15193,15210],[11,14633,14629],{"id":14634},"vue-3-组合式-api-入门",[15,14636,14637],{},"Vue 3 的组合式 API 让逻辑组织更灵活。下面是一个最小可运行的计数器示例。",[78,14639,14640],{"id":14640},"静态代码展示",[83,14642,14644],{"className":2720,"code":14643,"language":2722,"meta":88,"style":88},"\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,14645,14646,14656,14666,14670,14687,14695,14699,14707,14722,14727,14735],{"__ignoreMap":88},[92,14647,14648,14650,14652,14654],{"class":94,"line":95},[92,14649,99],{"class":98},[92,14651,3287],{"class":102},[92,14653,3290],{"class":118},[92,14655,106],{"class":98},[92,14657,14658,14660,14662,14664],{"class":94,"line":109},[92,14659,3298],{"class":200},[92,14661,6968],{"class":98},[92,14663,3304],{"class":200},[92,14665,3307],{"class":125},[92,14667,14668],{"class":94,"line":131},[92,14669,242],{"emptyLinePlaceholder":241},[92,14671,14672,14674,14677,14679,14681,14683,14685],{"class":94,"line":153},[92,14673,2497],{"class":200},[92,14675,14676],{"class":190}," count",[92,14678,2503],{"class":200},[92,14680,3081],{"class":118},[92,14682,866],{"class":98},[92,14684,869],{"class":190},[92,14686,2517],{"class":98},[92,14688,14689,14691,14693],{"class":94,"line":163},[92,14690,166],{"class":98},[92,14692,3287],{"class":102},[92,14694,106],{"class":98},[92,14696,14697],{"class":94,"line":238},[92,14698,242],{"emptyLinePlaceholder":241},[92,14700,14701,14703,14705],{"class":94,"line":245},[92,14702,99],{"class":98},[92,14704,2731],{"class":102},[92,14706,106],{"class":98},[92,14708,14709,14711,14713,14715,14717,14720],{"class":94,"line":253},[92,14710,112],{"class":98},[92,14712,3179],{"class":102},[92,14714,3197],{"class":118},[92,14716,122],{"class":98},[92,14718,14719],{"class":125},"\"count++\"",[92,14721,106],{"class":98},[92,14723,14724],{"class":94,"line":268},[92,14725,14726],{"class":98},"    点击次数：{{ count }}\n",[92,14728,14729,14731,14733],{"class":94,"line":281},[92,14730,156],{"class":98},[92,14732,3179],{"class":102},[92,14734,106],{"class":98},[92,14736,14737,14739,14741],{"class":94,"line":293},[92,14738,166],{"class":98},[92,14740,2731],{"class":102},[92,14742,106],{"class":98},[78,14744,14745],{"id":14745},"实时预览",[15,14747,14748],{},"试着修改下面的代码，右侧会即时渲染效果：",[2715,14750,14752],{"title":14751},"计数器示例",[83,14753,14755],{"className":2720,"code":14754,"language":2722,"meta":88,"style":88},"\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,14756,14757,14765,14779,14799,14824,14851,14859,14867,14871,14881,14891,14895,14911,14919,14923,14933,14939,14949,14959,14969,14981,14993,15003,15007,15011,15018,15030,15040,15050,15054,15058,15064,15074,15084,15096,15113,15123,15134,15144,15148,15152,15159,15169,15179,15183],{"__ignoreMap":88},[92,14758,14759,14761,14763],{"class":94,"line":95},[92,14760,99],{"class":98},[92,14762,2731],{"class":102},[92,14764,106],{"class":98},[92,14766,14767,14769,14771,14773,14775,14777],{"class":94,"line":109},[92,14768,112],{"class":98},[92,14770,115],{"class":102},[92,14772,119],{"class":118},[92,14774,122],{"class":98},[92,14776,6871],{"class":125},[92,14778,106],{"class":98},[92,14780,14781,14783,14785,14787,14789,14792,14795,14797],{"class":94,"line":131},[92,14782,134],{"class":98},[92,14784,15],{"class":102},[92,14786,119],{"class":118},[92,14788,122],{"class":98},[92,14790,14791],{"class":125},"\"count\"",[92,14793,14794],{"class":98},">点击次数：{{ count }}\u003C\u002F",[92,14796,15],{"class":102},[92,14798,106],{"class":98},[92,14800,14801,14803,14805,14807,14809,14811,14813,14815,14817,14820,14822],{"class":94,"line":153},[92,14802,134],{"class":98},[92,14804,3179],{"class":102},[92,14806,119],{"class":118},[92,14808,122],{"class":98},[92,14810,3186],{"class":125},[92,14812,3197],{"class":118},[92,14814,122],{"class":98},[92,14816,14719],{"class":125},[92,14818,14819],{"class":98},">点我 +1\u003C\u002F",[92,14821,3179],{"class":102},[92,14823,106],{"class":98},[92,14825,14826,14828,14830,14832,14834,14837,14839,14841,14844,14847,14849],{"class":94,"line":163},[92,14827,134],{"class":98},[92,14829,3179],{"class":102},[92,14831,119],{"class":118},[92,14833,122],{"class":98},[92,14835,14836],{"class":125},"\"btn secondary\"",[92,14838,3197],{"class":118},[92,14840,122],{"class":98},[92,14842,14843],{"class":125},"\"count = 0\"",[92,14845,14846],{"class":98},">重置\u003C\u002F",[92,14848,3179],{"class":102},[92,14850,106],{"class":98},[92,14852,14853,14855,14857],{"class":94,"line":238},[92,14854,156],{"class":98},[92,14856,115],{"class":102},[92,14858,106],{"class":98},[92,14860,14861,14863,14865],{"class":94,"line":245},[92,14862,166],{"class":98},[92,14864,2731],{"class":102},[92,14866,106],{"class":98},[92,14868,14869],{"class":94,"line":253},[92,14870,242],{"emptyLinePlaceholder":241},[92,14872,14873,14875,14877,14879],{"class":94,"line":268},[92,14874,99],{"class":98},[92,14876,3287],{"class":102},[92,14878,3290],{"class":118},[92,14880,106],{"class":98},[92,14882,14883,14885,14887,14889],{"class":94,"line":281},[92,14884,3298],{"class":200},[92,14886,6968],{"class":98},[92,14888,3304],{"class":200},[92,14890,3307],{"class":125},[92,14892,14893],{"class":94,"line":293},[92,14894,242],{"emptyLinePlaceholder":241},[92,14896,14897,14899,14901,14903,14905,14907,14909],{"class":94,"line":642},[92,14898,2497],{"class":200},[92,14900,14676],{"class":190},[92,14902,2503],{"class":200},[92,14904,3081],{"class":118},[92,14906,866],{"class":98},[92,14908,869],{"class":190},[92,14910,2517],{"class":98},[92,14912,14913,14915,14917],{"class":94,"line":657},[92,14914,166],{"class":98},[92,14916,3287],{"class":102},[92,14918,106],{"class":98},[92,14920,14921],{"class":94,"line":662},[92,14922,242],{"emptyLinePlaceholder":241},[92,14924,14925,14927,14929,14931],{"class":94,"line":667},[92,14926,99],{"class":98},[92,14928,1425],{"class":102},[92,14930,4225],{"class":118},[92,14932,106],{"class":98},[92,14934,14935,14937],{"class":94,"line":675},[92,14936,7111],{"class":118},[92,14938,185],{"class":98},[92,14940,14941,14943,14945,14947],{"class":94,"line":688},[92,14942,1742],{"class":190},[92,14944,194],{"class":98},[92,14946,4636],{"class":190},[92,14948,204],{"class":98},[92,14950,14951,14953,14955,14957],{"class":94,"line":701},[92,14952,13000],{"class":190},[92,14954,194],{"class":98},[92,14956,13005],{"class":190},[92,14958,204],{"class":98},[92,14960,14961,14963,14965,14967],{"class":94,"line":712},[92,14962,4644],{"class":190},[92,14964,194],{"class":98},[92,14966,4649],{"class":190},[92,14968,204],{"class":98},[92,14970,14971,14973,14975,14977,14979],{"class":94,"line":723},[92,14972,4462],{"class":190},[92,14974,194],{"class":98},[92,14976,4467],{"class":190},[92,14978,201],{"class":200},[92,14980,204],{"class":98},[92,14982,14983,14985,14987,14989,14991],{"class":94,"line":738},[92,14984,4241],{"class":190},[92,14986,194],{"class":98},[92,14988,5094],{"class":190},[92,14990,201],{"class":200},[92,14992,204],{"class":98},[92,14994,14995,14997,14999,15001],{"class":94,"line":752},[92,14996,4255],{"class":190},[92,14998,194],{"class":98},[92,15000,4265],{"class":190},[92,15002,204],{"class":98},[92,15004,15005],{"class":94,"line":3029},[92,15006,235],{"class":98},[92,15008,15009],{"class":94,"line":3050},[92,15010,242],{"emptyLinePlaceholder":241},[92,15012,15013,15016],{"class":94,"line":3059},[92,15014,15015],{"class":118},".count",[92,15017,185],{"class":98},[92,15019,15020,15022,15024,15026,15028],{"class":94,"line":3074},[92,15021,1837],{"class":190},[92,15023,194],{"class":98},[92,15025,1868],{"class":190},[92,15027,201],{"class":200},[92,15029,204],{"class":98},[92,15031,15032,15034,15036,15038],{"class":94,"line":3106},[92,15033,4731],{"class":190},[92,15035,194],{"class":98},[92,15037,4736],{"class":190},[92,15039,204],{"class":98},[92,15041,15042,15044,15046,15048],{"class":94,"line":3115},[92,15043,1477],{"class":190},[92,15045,194],{"class":98},[92,15047,13318],{"class":190},[92,15049,204],{"class":98},[92,15051,15052],{"class":94,"line":3135},[92,15053,235],{"class":98},[92,15055,15056],{"class":94,"line":3144},[92,15057,242],{"emptyLinePlaceholder":241},[92,15059,15060,15062],{"class":94,"line":3153},[92,15061,5282],{"class":118},[92,15063,185],{"class":98},[92,15065,15066,15068,15070,15072],{"class":94,"line":3158},[92,15067,5366],{"class":190},[92,15069,194],{"class":98},[92,15071,5371],{"class":190},[92,15073,204],{"class":98},[92,15075,15076,15078,15080,15082],{"class":94,"line":3174},[92,15077,627],{"class":190},[92,15079,194],{"class":98},[92,15081,805],{"class":190},[92,15083,204],{"class":98},[92,15085,15086,15088,15090,15092,15094],{"class":94,"line":3207},[92,15087,4404],{"class":190},[92,15089,194],{"class":98},[92,15091,4767],{"class":190},[92,15093,201],{"class":200},[92,15095,204],{"class":98},[92,15097,15098,15100,15102,15104,15106,15109,15111],{"class":94,"line":3213},[92,15099,4241],{"class":190},[92,15101,194],{"class":98},[92,15103,731],{"class":190},[92,15105,201],{"class":200},[92,15107,15108],{"class":190}," 18",[92,15110,201],{"class":200},[92,15112,204],{"class":98},[92,15114,15115,15117,15119,15121],{"class":94,"line":3222},[92,15116,4419],{"class":190},[92,15118,194],{"class":98},[92,15120,13814],{"class":190},[92,15122,204],{"class":98},[92,15124,15125,15127,15129,15132],{"class":94,"line":3250},[92,15126,1477],{"class":190},[92,15128,194],{"class":98},[92,15130,15131],{"class":190},"#0f1419",[92,15133,204],{"class":98},[92,15135,15136,15138,15140,15142],{"class":94,"line":3259},[92,15137,4731],{"class":190},[92,15139,194],{"class":98},[92,15141,4736],{"class":190},[92,15143,204],{"class":98},[92,15145,15146],{"class":94,"line":3268},[92,15147,235],{"class":98},[92,15149,15150],{"class":94,"line":3277},[92,15151,242],{"emptyLinePlaceholder":241},[92,15153,15154,15157],{"class":94,"line":3282},[92,15155,15156],{"class":118},".btn.secondary",[92,15158,185],{"class":98},[92,15160,15161,15163,15165,15167],{"class":94,"line":3295},[92,15162,4419],{"class":190},[92,15164,194],{"class":98},[92,15166,4424],{"class":190},[92,15168,204],{"class":98},[92,15170,15171,15173,15175,15177],{"class":94,"line":3310},[92,15172,1477],{"class":190},[92,15174,194],{"class":98},[92,15176,5456],{"class":190},[92,15178,204],{"class":98},[92,15180,15181],{"class":94,"line":3315},[92,15182,235],{"class":98},[92,15184,15185,15187,15189],{"class":94,"line":3334},[92,15186,166],{"class":98},[92,15188,1425],{"class":102},[92,15190,106],{"class":98},[78,15192,1381],{"id":1381},[342,15194,15195,15201,15207],{},[345,15196,15197,15200],{},[19,15198,15199],{},"ref"," 创建响应式基本类型",[345,15202,15203,15206],{},[19,15204,15205],{},"\u003Cscript setup>"," 减少样板代码",[345,15208,15209],{},"模板中可直接使用响应式变量",[1425,15211,15212],{},"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":88,"searchDepth":131,"depth":131,"links":15214},[15215,15216,15217],{"id":14640,"depth":109,"text":14640},{"id":14745,"depth":109,"text":14745},{"id":1381,"depth":109,"text":1381},"2026-05-05","通过一个简单的计数器示例，了解 ref、响应式与事件处理，并可在下方实时编辑预览。",{},"\u002Fblog\u002Fhello-vue3",{"title":14629,"description":15219},"blog\u002Fhello-vue3",[15225,15226],"vue3","composition-api","oJ481NqFU2a5mD3yV0ikqu37vdc4cHiK-jdLf7hi-94",{"id":15229,"title":15230,"body":15231,"category":175,"date":16480,"description":16481,"draft":1440,"extension":1441,"meta":16482,"navigation":241,"path":16483,"seo":16484,"stem":16485,"tags":16486,"__hash__":16488},"blog\u002Fblog\u002Fcss-flex-demo.md","Flexbox 布局实战",{"type":8,"value":15232,"toc":16475},[15233,15236,15243,15246,15271,15344,15346,15354,16466,16469,16472],[11,15234,15230],{"id":15235},"flexbox-布局实战",[15,15237,15238,15239,15242],{},"Flexbox 是前端布局的基础能力之一。下面演示如何用 ",[19,15240,15241],{},"display: flex"," 让内容在容器中居中。",[78,15244,15245],{"id":15245},"核心属性",[342,15247,15248,15253,15259,15265],{},[345,15249,15250,15252],{},[19,15251,15241],{}," 启用弹性布局",[345,15254,15255,15258],{},[19,15256,15257],{},"justify-content"," 控制主轴对齐",[345,15260,15261,15264],{},[19,15262,15263],{},"align-items"," 控制交叉轴对齐",[345,15266,15267,15270],{},[19,15268,15269],{},"gap"," 设置子项间距",[2483,15272,15274],{"lang":175,"title":15273},"基础 Flex 居中",[83,15275,15277],{"className":173,"code":15276,"language":175,"meta":88,"style":88},".container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 200px;\n  gap: 12px;\n}\n",[19,15278,15279,15285,15295,15305,15315,15328,15340],{"__ignoreMap":88},[92,15280,15281,15283],{"class":94,"line":95},[92,15282,182],{"class":118},[92,15284,185],{"class":98},[92,15286,15287,15289,15291,15293],{"class":94,"line":109},[92,15288,1742],{"class":190},[92,15290,194],{"class":98},[92,15292,4636],{"class":190},[92,15294,204],{"class":98},[92,15296,15297,15299,15301,15303],{"class":94,"line":131},[92,15298,4657],{"class":190},[92,15300,194],{"class":98},[92,15302,4649],{"class":190},[92,15304,204],{"class":98},[92,15306,15307,15309,15311,15313],{"class":94,"line":153},[92,15308,4644],{"class":190},[92,15310,194],{"class":98},[92,15312,4649],{"class":190},[92,15314,204],{"class":98},[92,15316,15317,15319,15321,15324,15326],{"class":94,"line":163},[92,15318,9610],{"class":190},[92,15320,194],{"class":98},[92,15322,15323],{"class":190},"200",[92,15325,201],{"class":200},[92,15327,204],{"class":98},[92,15329,15330,15332,15334,15336,15338],{"class":94,"line":238},[92,15331,4462],{"class":190},[92,15333,194],{"class":98},[92,15335,4467],{"class":190},[92,15337,201],{"class":200},[92,15339,204],{"class":98},[92,15341,15342],{"class":94,"line":245},[92,15343,235],{"class":98},[78,15345,12148],{"id":12148},[15,15347,15348,15349,814,15351,15353],{},"修改 ",[19,15350,15257],{},[19,15352,15263],{},"，观察卡片排列变化：",[2715,15355,15357],{"title":15356},"Flex 卡片布局",[83,15358,15360],{"className":2720,"code":15359,"language":2722,"meta":88,"style":88},"\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,15361,15362,15370,15385,15399,15407,15412,15427,15447,15467,15487,15507,15527,15547,15555,15563,15571,15576,15591,15609,15627,15645,15663,15683,15691,15699,15707,15713,15722,15731,15735,15764,15769,15777,15785,15793,15801,15805,15815,15825,15829,15847,15864,15889,15897,15901,15911,15918,15930,15942,15952,15962,15966,15970,15976,15986,15998,16010,16022,16026,16030,16036,16046,16056,16068,16080,16091,16095,16099,16105,16122,16134,16150,16160,16172,16176,16180,16186,16196,16207,16219,16229,16241,16254,16266,16278,16288,16305,16309,16313,16319,16334,16347,16360,16376,16388,16412,16422,16432,16444,16454,16458],{"__ignoreMap":88},[92,15363,15364,15366,15368],{"class":94,"line":95},[92,15365,99],{"class":98},[92,15367,2731],{"class":102},[92,15369,106],{"class":98},[92,15371,15372,15374,15376,15378,15380,15383],{"class":94,"line":109},[92,15373,112],{"class":98},[92,15375,115],{"class":102},[92,15377,119],{"class":118},[92,15379,122],{"class":98},[92,15381,15382],{"class":125},"\"wrapper\"",[92,15384,106],{"class":98},[92,15386,15387,15389,15391,15393,15395,15397],{"class":94,"line":131},[92,15388,134],{"class":98},[92,15390,115],{"class":102},[92,15392,119],{"class":118},[92,15394,122],{"class":98},[92,15396,10667],{"class":125},[92,15398,106],{"class":98},[92,15400,15401,15403,15405],{"class":94,"line":153},[92,15402,487],{"class":98},[92,15404,10660],{"class":102},[92,15406,106],{"class":98},[92,15408,15409],{"class":94,"line":163},[92,15410,15411],{"class":98},"        justify-content\n",[92,15413,15414,15416,15418,15420,15422,15425],{"class":94,"line":238},[92,15415,1031],{"class":98},[92,15417,10681],{"class":102},[92,15419,10684],{"class":118},[92,15421,122],{"class":98},[92,15423,15424],{"class":125},"\"justify\"",[92,15426,106],{"class":98},[92,15428,15429,15431,15433,15435,15437,15440,15443,15445],{"class":94,"line":245},[92,15430,1053],{"class":98},[92,15432,10698],{"class":102},[92,15434,3536],{"class":118},[92,15436,122],{"class":98},[92,15438,15439],{"class":125},"\"flex-start\"",[92,15441,15442],{"class":98},">flex-start\u003C\u002F",[92,15444,10698],{"class":102},[92,15446,106],{"class":98},[92,15448,15449,15451,15453,15455,15457,15460,15463,15465],{"class":94,"line":253},[92,15450,1053],{"class":98},[92,15452,10698],{"class":102},[92,15454,3536],{"class":118},[92,15456,122],{"class":98},[92,15458,15459],{"class":125},"\"center\"",[92,15461,15462],{"class":98},">center\u003C\u002F",[92,15464,10698],{"class":102},[92,15466,106],{"class":98},[92,15468,15469,15471,15473,15475,15477,15480,15483,15485],{"class":94,"line":268},[92,15470,1053],{"class":98},[92,15472,10698],{"class":102},[92,15474,3536],{"class":118},[92,15476,122],{"class":98},[92,15478,15479],{"class":125},"\"flex-end\"",[92,15481,15482],{"class":98},">flex-end\u003C\u002F",[92,15484,10698],{"class":102},[92,15486,106],{"class":98},[92,15488,15489,15491,15493,15495,15497,15500,15503,15505],{"class":94,"line":281},[92,15490,1053],{"class":98},[92,15492,10698],{"class":102},[92,15494,3536],{"class":118},[92,15496,122],{"class":98},[92,15498,15499],{"class":125},"\"space-between\"",[92,15501,15502],{"class":98},">space-between\u003C\u002F",[92,15504,10698],{"class":102},[92,15506,106],{"class":98},[92,15508,15509,15511,15513,15515,15517,15520,15523,15525],{"class":94,"line":293},[92,15510,1053],{"class":98},[92,15512,10698],{"class":102},[92,15514,3536],{"class":118},[92,15516,122],{"class":98},[92,15518,15519],{"class":125},"\"space-around\"",[92,15521,15522],{"class":98},">space-around\u003C\u002F",[92,15524,10698],{"class":102},[92,15526,106],{"class":98},[92,15528,15529,15531,15533,15535,15537,15540,15543,15545],{"class":94,"line":642},[92,15530,1053],{"class":98},[92,15532,10698],{"class":102},[92,15534,3536],{"class":118},[92,15536,122],{"class":98},[92,15538,15539],{"class":125},"\"space-evenly\"",[92,15541,15542],{"class":98},">space-evenly\u003C\u002F",[92,15544,10698],{"class":102},[92,15546,106],{"class":98},[92,15548,15549,15551,15553],{"class":94,"line":657},[92,15550,1079],{"class":98},[92,15552,10681],{"class":102},[92,15554,106],{"class":98},[92,15556,15557,15559,15561],{"class":94,"line":662},[92,15558,1088],{"class":98},[92,15560,10660],{"class":102},[92,15562,106],{"class":98},[92,15564,15565,15567,15569],{"class":94,"line":667},[92,15566,487],{"class":98},[92,15568,10660],{"class":102},[92,15570,106],{"class":98},[92,15572,15573],{"class":94,"line":675},[92,15574,15575],{"class":98},"        align-items\n",[92,15577,15578,15580,15582,15584,15586,15589],{"class":94,"line":688},[92,15579,1031],{"class":98},[92,15581,10681],{"class":102},[92,15583,10684],{"class":118},[92,15585,122],{"class":98},[92,15587,15588],{"class":125},"\"align\"",[92,15590,106],{"class":98},[92,15592,15593,15595,15597,15599,15601,15603,15605,15607],{"class":94,"line":701},[92,15594,1053],{"class":98},[92,15596,10698],{"class":102},[92,15598,3536],{"class":118},[92,15600,122],{"class":98},[92,15602,10744],{"class":125},[92,15604,10747],{"class":98},[92,15606,10698],{"class":102},[92,15608,106],{"class":98},[92,15610,15611,15613,15615,15617,15619,15621,15623,15625],{"class":94,"line":712},[92,15612,1053],{"class":98},[92,15614,10698],{"class":102},[92,15616,3536],{"class":118},[92,15618,122],{"class":98},[92,15620,15439],{"class":125},[92,15622,15442],{"class":98},[92,15624,10698],{"class":102},[92,15626,106],{"class":98},[92,15628,15629,15631,15633,15635,15637,15639,15641,15643],{"class":94,"line":723},[92,15630,1053],{"class":98},[92,15632,10698],{"class":102},[92,15634,3536],{"class":118},[92,15636,122],{"class":98},[92,15638,15459],{"class":125},[92,15640,15462],{"class":98},[92,15642,10698],{"class":102},[92,15644,106],{"class":98},[92,15646,15647,15649,15651,15653,15655,15657,15659,15661],{"class":94,"line":738},[92,15648,1053],{"class":98},[92,15650,10698],{"class":102},[92,15652,3536],{"class":118},[92,15654,122],{"class":98},[92,15656,15479],{"class":125},[92,15658,15482],{"class":98},[92,15660,10698],{"class":102},[92,15662,106],{"class":98},[92,15664,15665,15667,15669,15671,15673,15676,15679,15681],{"class":94,"line":752},[92,15666,1053],{"class":98},[92,15668,10698],{"class":102},[92,15670,3536],{"class":118},[92,15672,122],{"class":98},[92,15674,15675],{"class":125},"\"baseline\"",[92,15677,15678],{"class":98},">baseline\u003C\u002F",[92,15680,10698],{"class":102},[92,15682,106],{"class":98},[92,15684,15685,15687,15689],{"class":94,"line":3029},[92,15686,1079],{"class":98},[92,15688,10681],{"class":102},[92,15690,106],{"class":98},[92,15692,15693,15695,15697],{"class":94,"line":3050},[92,15694,1088],{"class":98},[92,15696,10660],{"class":102},[92,15698,106],{"class":98},[92,15700,15701,15703,15705],{"class":94,"line":3059},[92,15702,507],{"class":98},[92,15704,115],{"class":102},[92,15706,106],{"class":98},[92,15708,15709,15711],{"class":94,"line":3074},[92,15710,134],{"class":98},[92,15712,12540],{"class":102},[92,15714,15715,15717,15719],{"class":94,"line":3106},[92,15716,12545],{"class":118},[92,15718,122],{"class":98},[92,15720,15721],{"class":125},"\"container\"\n",[92,15723,15724,15726,15728],{"class":94,"line":3115},[92,15725,12565],{"class":118},[92,15727,122],{"class":98},[92,15729,15730],{"class":125},"\"{ justifyContent: justify, alignItems: align }\"\n",[92,15732,15733],{"class":94,"line":3135},[92,15734,12575],{"class":98},[92,15736,15737,15739,15741,15744,15746,15749,15752,15754,15756,15758,15760,15762],{"class":94,"line":3144},[92,15738,487],{"class":98},[92,15740,115],{"class":102},[92,15742,15743],{"class":118}," v-for",[92,15745,122],{"class":98},[92,15747,15748],{"class":125},"\"item in cards\"",[92,15750,15751],{"class":118}," :key",[92,15753,122],{"class":98},[92,15755,143],{"class":125},[92,15757,119],{"class":118},[92,15759,122],{"class":98},[92,15761,9509],{"class":125},[92,15763,106],{"class":98},[92,15765,15766],{"class":94,"line":3153},[92,15767,15768],{"class":98},"        Card {{ item }}\n",[92,15770,15771,15773,15775],{"class":94,"line":3158},[92,15772,1088],{"class":98},[92,15774,115],{"class":102},[92,15776,106],{"class":98},[92,15778,15779,15781,15783],{"class":94,"line":3174},[92,15780,507],{"class":98},[92,15782,115],{"class":102},[92,15784,106],{"class":98},[92,15786,15787,15789,15791],{"class":94,"line":3207},[92,15788,156],{"class":98},[92,15790,115],{"class":102},[92,15792,106],{"class":98},[92,15794,15795,15797,15799],{"class":94,"line":3213},[92,15796,166],{"class":98},[92,15798,2731],{"class":102},[92,15800,106],{"class":98},[92,15802,15803],{"class":94,"line":3222},[92,15804,242],{"emptyLinePlaceholder":241},[92,15806,15807,15809,15811,15813],{"class":94,"line":3250},[92,15808,99],{"class":98},[92,15810,3287],{"class":102},[92,15812,3290],{"class":118},[92,15814,106],{"class":98},[92,15816,15817,15819,15821,15823],{"class":94,"line":3259},[92,15818,3298],{"class":200},[92,15820,6968],{"class":98},[92,15822,3304],{"class":200},[92,15824,3307],{"class":125},[92,15826,15827],{"class":94,"line":3268},[92,15828,242],{"emptyLinePlaceholder":241},[92,15830,15831,15833,15836,15838,15840,15842,15845],{"class":94,"line":3277},[92,15832,2497],{"class":200},[92,15834,15835],{"class":190}," justify",[92,15837,2503],{"class":200},[92,15839,3081],{"class":118},[92,15841,866],{"class":98},[92,15843,15844],{"class":125},"'center'",[92,15846,2517],{"class":98},[92,15848,15849,15851,15854,15856,15858,15860,15862],{"class":94,"line":3282},[92,15850,2497],{"class":200},[92,15852,15853],{"class":190}," align",[92,15855,2503],{"class":200},[92,15857,3081],{"class":118},[92,15859,866],{"class":98},[92,15861,15844],{"class":125},[92,15863,2517],{"class":98},[92,15865,15866,15868,15871,15873,15876,15878,15880,15882,15884,15886],{"class":94,"line":3295},[92,15867,2497],{"class":200},[92,15869,15870],{"class":190}," cards",[92,15872,2503],{"class":200},[92,15874,15875],{"class":98}," [",[92,15877,4389],{"class":190},[92,15879,3679],{"class":98},[92,15881,4748],{"class":190},[92,15883,3679],{"class":98},[92,15885,13077],{"class":190},[92,15887,15888],{"class":98},"]\n",[92,15890,15891,15893,15895],{"class":94,"line":3310},[92,15892,166],{"class":98},[92,15894,3287],{"class":102},[92,15896,106],{"class":98},[92,15898,15899],{"class":94,"line":3315},[92,15900,242],{"emptyLinePlaceholder":241},[92,15902,15903,15905,15907,15909],{"class":94,"line":3334},[92,15904,99],{"class":98},[92,15906,1425],{"class":102},[92,15908,4225],{"class":118},[92,15910,106],{"class":98},[92,15912,15913,15916],{"class":94,"line":3352},[92,15914,15915],{"class":118},".wrapper",[92,15917,185],{"class":98},[92,15919,15920,15922,15924,15926,15928],{"class":94,"line":3370},[92,15921,191],{"class":190},[92,15923,194],{"class":98},[92,15925,650],{"class":190},[92,15927,263],{"class":200},[92,15929,204],{"class":98},[92,15931,15932,15934,15936,15938,15940],{"class":94,"line":3388},[92,15933,4241],{"class":190},[92,15935,194],{"class":98},[92,15937,4467],{"class":190},[92,15939,201],{"class":200},[92,15941,204],{"class":98},[92,15943,15944,15946,15948,15950],{"class":94,"line":3407},[92,15945,4255],{"class":190},[92,15947,194],{"class":98},[92,15949,4265],{"class":190},[92,15951,204],{"class":98},[92,15953,15954,15956,15958,15960],{"class":94,"line":3412},[92,15955,11140],{"class":190},[92,15957,194],{"class":98},[92,15959,21],{"class":190},[92,15961,204],{"class":98},[92,15963,15964],{"class":94,"line":3426},[92,15965,235],{"class":98},[92,15967,15968],{"class":94,"line":3438},[92,15969,242],{"emptyLinePlaceholder":241},[92,15971,15972,15974],{"class":94,"line":3451},[92,15973,10989],{"class":118},[92,15975,185],{"class":98},[92,15977,15978,15980,15982,15984],{"class":94,"line":3463},[92,15979,1742],{"class":190},[92,15981,194],{"class":98},[92,15983,4636],{"class":190},[92,15985,204],{"class":98},[92,15987,15988,15991,15993,15996],{"class":94,"line":3468},[92,15989,15990],{"class":190},"  flex-wrap",[92,15992,194],{"class":98},[92,15994,15995],{"class":190},"wrap",[92,15997,204],{"class":98},[92,15999,16000,16002,16004,16006,16008],{"class":94,"line":3486},[92,16001,4462],{"class":190},[92,16003,194],{"class":98},[92,16005,4675],{"class":190},[92,16007,201],{"class":200},[92,16009,204],{"class":98},[92,16011,16012,16014,16016,16018,16020],{"class":94,"line":3506},[92,16013,4670],{"class":190},[92,16015,194],{"class":98},[92,16017,4467],{"class":190},[92,16019,201],{"class":200},[92,16021,204],{"class":98},[92,16023,16024],{"class":94,"line":3531},[92,16025,235],{"class":98},[92,16027,16028],{"class":94,"line":3562},[92,16029,242],{"emptyLinePlaceholder":241},[92,16031,16032,16034],{"class":94,"line":3567},[92,16033,10660],{"class":102},[92,16035,185],{"class":98},[92,16037,16038,16040,16042,16044],{"class":94,"line":3585},[92,16039,1742],{"class":190},[92,16041,194],{"class":98},[92,16043,4636],{"class":190},[92,16045,204],{"class":98},[92,16047,16048,16050,16052,16054],{"class":94,"line":3596},[92,16049,13000],{"class":190},[92,16051,194],{"class":98},[92,16053,13005],{"class":190},[92,16055,204],{"class":98},[92,16057,16058,16060,16062,16064,16066],{"class":94,"line":3618},[92,16059,4462],{"class":190},[92,16061,194],{"class":98},[92,16063,4409],{"class":190},[92,16065,201],{"class":200},[92,16067,204],{"class":98},[92,16069,16070,16072,16074,16076,16078],{"class":94,"line":3630},[92,16071,1837],{"class":190},[92,16073,194],{"class":98},[92,16075,4721],{"class":190},[92,16077,201],{"class":200},[92,16079,204],{"class":98},[92,16081,16082,16084,16086,16089],{"class":94,"line":3655},[92,16083,1477],{"class":190},[92,16085,194],{"class":98},[92,16087,16088],{"class":190},"#475569",[92,16090,204],{"class":98},[92,16092,16093],{"class":94,"line":3723},[92,16094,235],{"class":98},[92,16096,16097],{"class":94,"line":3728},[92,16098,242],{"emptyLinePlaceholder":241},[92,16100,16101,16103],{"class":94,"line":3741},[92,16102,10681],{"class":102},[92,16104,185],{"class":98},[92,16106,16107,16109,16111,16113,16115,16117,16120],{"class":94,"line":3758},[92,16108,627],{"class":190},[92,16110,194],{"class":98},[92,16112,4389],{"class":190},[92,16114,201],{"class":200},[92,16116,637],{"class":190},[92,16118,16119],{"class":190}," #cbd5e1",[92,16121,204],{"class":98},[92,16123,16124,16126,16128,16130,16132],{"class":94,"line":3770},[92,16125,4404],{"class":190},[92,16127,194],{"class":98},[92,16129,4689],{"class":190},[92,16131,201],{"class":200},[92,16133,204],{"class":98},[92,16135,16136,16138,16140,16142,16144,16146,16148],{"class":94,"line":3779},[92,16137,4241],{"class":190},[92,16139,194],{"class":98},[92,16141,4689],{"class":190},[92,16143,201],{"class":200},[92,16145,4753],{"class":190},[92,16147,201],{"class":200},[92,16149,204],{"class":98},[92,16151,16152,16154,16156,16158],{"class":94,"line":3788},[92,16153,4419],{"class":190},[92,16155,194],{"class":98},[92,16157,5347],{"class":190},[92,16159,204],{"class":98},[92,16161,16162,16164,16166,16168,16170],{"class":94,"line":3796},[92,16163,1837],{"class":190},[92,16165,194],{"class":98},[92,16167,4721],{"class":190},[92,16169,201],{"class":200},[92,16171,204],{"class":98},[92,16173,16174],{"class":94,"line":3809},[92,16175,235],{"class":98},[92,16177,16178],{"class":94,"line":3815},[92,16179,242],{"emptyLinePlaceholder":241},[92,16181,16182,16184],{"class":94,"line":3836},[92,16183,182],{"class":118},[92,16185,185],{"class":98},[92,16187,16188,16190,16192,16194],{"class":94,"line":3847},[92,16189,1742],{"class":190},[92,16191,194],{"class":98},[92,16193,4636],{"class":190},[92,16195,204],{"class":98},[92,16197,16198,16200,16202,16205],{"class":94,"line":3868},[92,16199,15990],{"class":190},[92,16201,194],{"class":98},[92,16203,16204],{"class":190},"nowrap",[92,16206,204],{"class":98},[92,16208,16209,16211,16213,16215,16217],{"class":94,"line":3928},[92,16210,191],{"class":190},[92,16212,194],{"class":98},[92,16214,650],{"class":190},[92,16216,263],{"class":200},[92,16218,204],{"class":98},[92,16220,16221,16223,16225,16227],{"class":94,"line":3933},[92,16222,11140],{"class":190},[92,16224,194],{"class":98},[92,16226,21],{"class":190},[92,16228,204],{"class":98},[92,16230,16231,16233,16235,16237,16239],{"class":94,"line":3941},[92,16232,4462],{"class":190},[92,16234,194],{"class":98},[92,16236,4675],{"class":190},[92,16238,201],{"class":200},[92,16240,204],{"class":98},[92,16242,16243,16245,16247,16250,16252],{"class":94,"line":3955},[92,16244,9610],{"class":190},[92,16246,194],{"class":98},[92,16248,16249],{"class":190},"160",[92,16251,201],{"class":200},[92,16253,204],{"class":98},[92,16255,16256,16258,16260,16262,16264],{"class":94,"line":3960},[92,16257,4241],{"class":190},[92,16259,194],{"class":98},[92,16261,4467],{"class":190},[92,16263,201],{"class":200},[92,16265,204],{"class":98},[92,16267,16268,16270,16272,16274,16276],{"class":94,"line":3966},[92,16269,4404],{"class":190},[92,16271,194],{"class":98},[92,16273,4467],{"class":190},[92,16275,201],{"class":200},[92,16277,204],{"class":98},[92,16279,16280,16282,16284,16286],{"class":94,"line":3971},[92,16281,4419],{"class":190},[92,16283,194],{"class":98},[92,16285,4588],{"class":190},[92,16287,204],{"class":98},[92,16289,16290,16292,16294,16296,16298,16301,16303],{"class":94,"line":3976},[92,16291,627],{"class":190},[92,16293,194],{"class":98},[92,16295,4389],{"class":190},[92,16297,201],{"class":200},[92,16299,16300],{"class":190}," dashed",[92,16302,16119],{"class":190},[92,16304,204],{"class":98},[92,16306,16307],{"class":94,"line":3987},[92,16308,235],{"class":98},[92,16310,16311],{"class":94,"line":3997},[92,16312,242],{"emptyLinePlaceholder":241},[92,16314,16315,16317],{"class":94,"line":4006},[92,16316,8973],{"class":118},[92,16318,185],{"class":98},[92,16320,16321,16323,16325,16327,16329,16332],{"class":94,"line":4016},[92,16322,13125],{"class":190},[92,16324,194],{"class":98},[92,16326,869],{"class":190},[92,16328,4298],{"class":190},[92,16330,16331],{"class":190}," auto",[92,16333,204],{"class":98},[92,16335,16336,16338,16340,16343,16345],{"class":94,"line":4026},[92,16337,13483],{"class":190},[92,16339,194],{"class":98},[92,16341,16342],{"class":190},"56",[92,16344,201],{"class":200},[92,16346,204],{"class":98},[92,16348,16349,16351,16353,16356,16358],{"class":94,"line":4035},[92,16350,9610],{"class":190},[92,16352,194],{"class":98},[92,16354,16355],{"class":190},"48",[92,16357,201],{"class":200},[92,16359,204],{"class":98},[92,16361,16362,16364,16366,16368,16370,16372,16374],{"class":94,"line":4045},[92,16363,4241],{"class":190},[92,16365,194],{"class":98},[92,16367,4467],{"class":190},[92,16369,201],{"class":200},[92,16371,3918],{"class":190},[92,16373,201],{"class":200},[92,16375,204],{"class":98},[92,16377,16378,16380,16382,16384,16386],{"class":94,"line":4050},[92,16379,4404],{"class":190},[92,16381,194],{"class":98},[92,16383,731],{"class":190},[92,16385,201],{"class":200},[92,16387,204],{"class":98},[92,16389,16390,16392,16394,16396,16398,16400,16402,16404,16406,16408,16410],{"class":94,"line":4055},[92,16391,4419],{"class":190},[92,16393,194],{"class":98},[92,16395,9640],{"class":190},[92,16397,866],{"class":98},[92,16399,9645],{"class":190},[92,16401,872],{"class":200},[92,16403,3679],{"class":98},[92,16405,13814],{"class":190},[92,16407,3679],{"class":98},[92,16409,5134],{"class":190},[92,16411,875],{"class":98},[92,16413,16414,16416,16418,16420],{"class":94,"line":4065},[92,16415,1477],{"class":190},[92,16417,194],{"class":98},[92,16419,5347],{"class":190},[92,16421,204],{"class":98},[92,16423,16424,16426,16428,16430],{"class":94,"line":4079},[92,16425,4731],{"class":190},[92,16427,194],{"class":98},[92,16429,4736],{"class":190},[92,16431,204],{"class":98},[92,16433,16434,16436,16438,16440,16442],{"class":94,"line":4086},[92,16435,1837],{"class":190},[92,16437,194],{"class":98},[92,16439,4467],{"class":190},[92,16441,201],{"class":200},[92,16443,204],{"class":98},[92,16445,16446,16448,16450,16452],{"class":94,"line":4094},[92,16447,7144],{"class":190},[92,16449,194],{"class":98},[92,16451,4649],{"class":190},[92,16453,204],{"class":98},[92,16455,16456],{"class":94,"line":4106},[92,16457,235],{"class":98},[92,16459,16460,16462,16464],{"class":94,"line":4117},[92,16461,166],{"class":98},[92,16463,1425],{"class":102},[92,16465,106],{"class":98},[78,16467,16468],{"id":16468},"实践建议",[15,16470,16471],{},"优先用 Flex 处理一维布局（行或列），二维复杂布局再考虑 Grid。",[1425,16473,16474],{},"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":88,"searchDepth":131,"depth":131,"links":16476},[16477,16478,16479],{"id":15245,"depth":109,"text":15245},{"id":12148,"depth":109,"text":12148},{"id":16468,"depth":109,"text":16468},"2026-05-01","用 Flex 实现常见的卡片居中布局，并通过代码 playground 直观感受对齐方式的变化。",{},"\u002Fblog\u002Fcss-flex-demo",{"title":15230,"description":16481},"blog\u002Fcss-flex-demo",[16487,1447],"flexbox","FnnXjd4YEFKibrBnFfTHzIEl4dfl0sklSB-hk3DMocU",1782309644790]