[{"data":1,"prerenderedAt":9243},["ShallowReactive",2],{"category-css":3},[4,1451,2397,4898,7977],{"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":175,"date":4889,"description":4890,"draft":1440,"extension":1441,"meta":4891,"navigation":241,"path":4892,"seo":4893,"stem":4894,"tags":4895,"__hash__":4897},"blog\u002Fblog\u002Fcss-border-tricks.md","CSS 边框两式：动画渐变条纹与 border-image",{"type":8,"value":2401,"toc":4884},[2402,2405,2422,2426,2437,2459,2469,2987,3001,3004,4033,4037,4043,4061,4064,4108,4122,4214,4220,4845,4847,4878,4881],[11,2403,2399],{"id":2404},"css-边框两式动画渐变条纹与-border-image",[15,2406,2407,2408,2411,2412,2415,2416,2421],{},"给卡片加边框，不一定只靠 ",[19,2409,2410],{},"border: 1px solid","。纯 CSS 可以用",[24,2413,2414],{},"双层背景","画出会流动的渐变条纹；有切图素材时，用 ",[24,2417,2418],{},[19,2419,2420],{},"border-image"," 让装饰边框随容器伸缩。两种方案都不依赖 JavaScript，下面分别拆解。",[78,2423,2425],{"id":2424},"方案一动画渐变条纹边框","方案一：动画渐变条纹边框",[15,2427,2428,2429,2432,2433,2436],{},"思路是把 ",[19,2430,2431],{},"border"," 设为透明，再用两层 ",[19,2434,2435],{},"background"," 分别填充内容区和边框区：",[342,2438,2439,2448],{},[345,2440,2441,1254,2444,2447],{},[24,2442,2443],{},"内层",[19,2445,2446],{},"padding-box","）：纯白底，盖住中间",[345,2449,2450,1254,2453,2175,2455,2458],{},[24,2451,2452],{},"外层",[19,2454,21],{},[19,2456,2457],{},"repeating-linear-gradient"," 画斜向色块条纹",[15,2460,2461,2464,2465,2468],{},[19,2462,2463],{},"@keyframes"," 只移动外层背景的 ",[19,2466,2467],{},"background-position","，hover 时条纹就会沿对角线流动。",[2470,2471,2473],"code-block",{"lang":175,"title":2472},"条纹边框核心 CSS",[83,2474,2476],{"className":173,"code":2475,"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,2477,2478,2485,2500,2530,2543,2582,2586,2599,2622,2636,2644,2666,2674,2683,2700,2736,2765,2797,2838,2843,2850,2854,2858,2866,2889,2894,2899,2909,2917,2925,2935,2976,2982],{"__ignoreMap":88},[92,2479,2480,2483],{"class":94,"line":95},[92,2481,2482],{"class":118},".card",[92,2484,185],{"class":98},[92,2486,2487,2491,2493,2496,2498],{"class":94,"line":109},[92,2488,2490],{"class":2489},"s4XuR"," --stripe-length",[92,2492,194],{"class":98},[92,2494,2495],{"class":190},"24",[92,2497,201],{"class":200},[92,2499,204],{"class":98},[92,2501,2502,2505,2507,2510,2512,2515,2517,2520,2523,2525,2528],{"class":94,"line":131},[92,2503,2504],{"class":2489}," --stripe-width",[92,2506,194],{"class":98},[92,2508,2509],{"class":190},"calc",[92,2511,866],{"class":98},[92,2513,2514],{"class":190},"var",[92,2516,866],{"class":98},[92,2518,2519],{"class":2489},"--stripe-length",[92,2521,2522],{"class":98},") ",[92,2524,1393],{"class":200},[92,2526,2527],{"class":190}," 3",[92,2529,875],{"class":98},[92,2531,2532,2535,2537,2539,2541],{"class":94,"line":153},[92,2533,2534],{"class":2489}," --stripe-gap",[92,2536,194],{"class":98},[92,2538,731],{"class":190},[92,2540,201],{"class":200},[92,2542,204],{"class":98},[92,2544,2545,2548,2550,2552,2555,2557,2559,2561,2563,2566,2569,2571,2574,2577,2580],{"class":94,"line":163},[92,2546,2547],{"class":2489}," --stripe-period",[92,2549,194],{"class":98},[92,2551,2509],{"class":190},[92,2553,2554],{"class":98},"((",[92,2556,2514],{"class":190},[92,2558,866],{"class":98},[92,2560,2519],{"class":2489},[92,2562,2522],{"class":98},[92,2564,2565],{"class":200},"+",[92,2567,2568],{"class":190}," var",[92,2570,866],{"class":98},[92,2572,2573],{"class":2489},"--stripe-gap",[92,2575,2576],{"class":98},")) * ",[92,2578,2579],{"class":190},"2",[92,2581,875],{"class":98},[92,2583,2584],{"class":94,"line":238},[92,2585,242],{"emptyLinePlaceholder":241},[92,2587,2588,2591,2593,2595,2597],{"class":94,"line":245},[92,2589,2590],{"class":190}," padding",[92,2592,194],{"class":98},[92,2594,731],{"class":190},[92,2596,201],{"class":200},[92,2598,204],{"class":98},[92,2600,2601,2603,2605,2607,2609,2612,2614,2617,2620],{"class":94,"line":253},[92,2602,627],{"class":190},[92,2604,194],{"class":98},[92,2606,2514],{"class":190},[92,2608,866],{"class":98},[92,2610,2611],{"class":2489},"--stripe-width",[92,2613,2522],{"class":98},[92,2615,2616],{"class":190},"solid",[92,2618,2619],{"class":190}," transparent",[92,2621,204],{"class":98},[92,2623,2624,2627,2629,2632,2634],{"class":94,"line":268},[92,2625,2626],{"class":190}," border-radius",[92,2628,194],{"class":98},[92,2630,2631],{"class":190},"14",[92,2633,201],{"class":200},[92,2635,204],{"class":98},[92,2637,2638,2641],{"class":94,"line":281},[92,2639,2640],{"class":190}," background",[92,2642,2643],{"class":98},":\n",[92,2645,2646,2649,2651,2654,2657,2659,2661,2663],{"class":94,"line":293},[92,2647,2648],{"class":190}," linear-gradient",[92,2650,866],{"class":98},[92,2652,2653],{"class":190},"#fff",[92,2655,2656],{"class":98},", ",[92,2658,2653],{"class":190},[92,2660,2522],{"class":98},[92,2662,2446],{"class":190},[92,2664,2665],{"class":98},",\n",[92,2667,2668,2671],{"class":94,"line":642},[92,2669,2670],{"class":190}," repeating-linear-gradient",[92,2672,2673],{"class":98},"(\n",[92,2675,2676,2679,2681],{"class":94,"line":657},[92,2677,2678],{"class":190}," -45",[92,2680,872],{"class":200},[92,2682,2665],{"class":98},[92,2684,2685,2688,2691,2693,2695,2697],{"class":94,"line":662},[92,2686,2687],{"class":190}," #2dd4bf",[92,2689,2690],{"class":190}," 0",[92,2692,2568],{"class":190},[92,2694,866],{"class":98},[92,2696,2519],{"class":2489},[92,2698,2699],{"class":98},"),\n",[92,2701,2702,2705,2707,2709,2711,2713,2715,2717,2719,2721,2723,2725,2727,2729,2731,2733],{"class":94,"line":667},[92,2703,2704],{"class":190}," #fff",[92,2706,2568],{"class":190},[92,2708,866],{"class":98},[92,2710,2519],{"class":2489},[92,2712,2522],{"class":98},[92,2714,2509],{"class":190},[92,2716,866],{"class":98},[92,2718,2514],{"class":190},[92,2720,866],{"class":98},[92,2722,2519],{"class":2489},[92,2724,2522],{"class":98},[92,2726,2565],{"class":200},[92,2728,2568],{"class":190},[92,2730,866],{"class":98},[92,2732,2573],{"class":2489},[92,2734,2735],{"class":98},")),\n",[92,2737,2738,2741,2744,2746,2748,2750,2752,2754,2756,2758,2760,2762],{"class":94,"line":675},[92,2739,2740],{"class":190}," #fb7185",[92,2742,2743],{"class":190}," calc",[92,2745,866],{"class":98},[92,2747,2514],{"class":190},[92,2749,866],{"class":98},[92,2751,2519],{"class":2489},[92,2753,2522],{"class":98},[92,2755,2565],{"class":200},[92,2757,2568],{"class":190},[92,2759,866],{"class":98},[92,2761,2573],{"class":2489},[92,2763,2764],{"class":98},"))\n",[92,2766,2767,2770,2772,2774,2776,2778,2780,2783,2786,2789,2791,2793,2795],{"class":94,"line":688},[92,2768,2769],{"class":190}," calc",[92,2771,866],{"class":98},[92,2773,2514],{"class":190},[92,2775,866],{"class":98},[92,2777,2519],{"class":2489},[92,2779,2522],{"class":98},[92,2781,2782],{"class":200},"*",[92,2784,2785],{"class":190}," 2",[92,2787,2788],{"class":200}," +",[92,2790,2568],{"class":190},[92,2792,866],{"class":98},[92,2794,2573],{"class":2489},[92,2796,2735],{"class":98},[92,2798,2799,2801,2803,2805,2807,2809,2811,2813,2815,2817,2819,2821,2823,2825,2828,2830,2832,2835],{"class":94,"line":701},[92,2800,2704],{"class":190},[92,2802,2743],{"class":190},[92,2804,866],{"class":98},[92,2806,2514],{"class":190},[92,2808,866],{"class":98},[92,2810,2519],{"class":2489},[92,2812,2522],{"class":98},[92,2814,2782],{"class":200},[92,2816,2785],{"class":190},[92,2818,2788],{"class":200},[92,2820,2568],{"class":190},[92,2822,866],{"class":98},[92,2824,2573],{"class":2489},[92,2826,2827],{"class":98},")) ",[92,2829,2514],{"class":190},[92,2831,866],{"class":98},[92,2833,2834],{"class":2489},"--stripe-period",[92,2836,2837],{"class":98},")\n",[92,2839,2840],{"class":94,"line":712},[92,2841,2842],{"class":98}," )\n",[92,2844,2845,2848],{"class":94,"line":723},[92,2846,2847],{"class":190}," border-box",[92,2849,204],{"class":98},[92,2851,2852],{"class":94,"line":738},[92,2853,235],{"class":98},[92,2855,2856],{"class":94,"line":752},[92,2857,242],{"emptyLinePlaceholder":241},[92,2859,2861,2864],{"class":94,"line":2860},23,[92,2862,2863],{"class":118},".card:hover",[92,2865,185],{"class":98},[92,2867,2869,2872,2875,2878,2881,2884,2887],{"class":94,"line":2868},24,[92,2870,2871],{"class":190}," animation",[92,2873,2874],{"class":98},": stripe-flow ",[92,2876,2877],{"class":190},"1",[92,2879,2880],{"class":200},"s",[92,2882,2883],{"class":190}," linear",[92,2885,2886],{"class":190}," infinite",[92,2888,204],{"class":98},[92,2890,2892],{"class":94,"line":2891},25,[92,2893,235],{"class":98},[92,2895,2897],{"class":94,"line":2896},26,[92,2898,242],{"emptyLinePlaceholder":241},[92,2900,2902,2904,2907],{"class":94,"line":2901},27,[92,2903,2463],{"class":200},[92,2905,2906],{"class":2489}," stripe-flow",[92,2908,185],{"class":98},[92,2910,2912,2915],{"class":94,"line":2911},28,[92,2913,2914],{"class":118}," to",[92,2916,185],{"class":98},[92,2918,2920,2923],{"class":94,"line":2919},29,[92,2921,2922],{"class":190}," background-position",[92,2924,2643],{"class":98},[92,2926,2928,2931,2933],{"class":94,"line":2927},30,[92,2929,2930],{"class":190}," 0",[92,2932,2690],{"class":190},[92,2934,2665],{"class":98},[92,2936,2938,2941,2943,2945,2947,2949,2951,2953,2956,2958,2960,2962,2964,2966,2968,2970,2972,2974],{"class":94,"line":2937},31,[92,2939,2940],{"class":190}," calc",[92,2942,866],{"class":98},[92,2944,2514],{"class":190},[92,2946,866],{"class":98},[92,2948,2834],{"class":2489},[92,2950,2522],{"class":98},[92,2952,2782],{"class":200},[92,2954,2955],{"class":190}," 1",[92,2957,2522],{"class":98},[92,2959,2509],{"class":190},[92,2961,866],{"class":98},[92,2963,2514],{"class":190},[92,2965,866],{"class":98},[92,2967,2834],{"class":2489},[92,2969,2522],{"class":98},[92,2971,2782],{"class":200},[92,2973,2955],{"class":190},[92,2975,875],{"class":98},[92,2977,2979],{"class":94,"line":2978},32,[92,2980,2981],{"class":98}," }\n",[92,2983,2985],{"class":94,"line":2984},33,[92,2986,235],{"class":98},[15,2988,2989,340,2992,2994,2995,2997,2998,3000],{},[24,2990,2991],{},"可调参数",[19,2993,2519],{}," 控制色块长度，",[19,2996,2573],{}," 控制白色细缝宽度，改 ",[19,2999,2611],{}," 等价于改边框粗细。",[15,3002,3003],{},"悬停卡片，观察条纹流动：",[3005,3006,3008],"code-playground",{"title":3007},"动画条纹边框",[83,3009,3013],{"className":3010,"code":3011,"language":3012,"meta":88,"style":88},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n \u003Cdiv class=\"stage\">\n \u003Cdiv class=\"card\">\n \u003Cp class=\"ct\">\n 悬停此卡片，斜向条纹会沿对角线流动。纯 CSS 实现，无需图片。\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.stage {\n display: grid;\n place-items: center;\n min-height: 220px;\n padding: 24px;\n background: linear-gradient(135deg, #f0fdfa 0%, #fff5f7 100%);\n border-radius: 12px;\n}\n\n.card {\n --stripe-length: 24px;\n --stripe-width: calc(var(--stripe-length) \u002F 3);\n --stripe-gap: 10px;\n --stripe-period: calc((var(--stripe-length) + var(--stripe-gap)) * 2);\n width: min(100%, 320px);\n padding: 10px;\n border-radius: 14px;\n border: var(--stripe-width) solid transparent;\n cursor: pointer;\n background:\n linear-gradient(#fff, #fff) padding-box,\n repeating-linear-gradient(\n -45deg,\n #2dd4bf 0 var(--stripe-length),\n #fff var(--stripe-length) calc(var(--stripe-length) + var(--stripe-gap)),\n #fb7185 calc(var(--stripe-length) + var(--stripe-gap))\n calc(var(--stripe-length) * 2 + var(--stripe-gap)),\n #fff calc(var(--stripe-length) * 2 + var(--stripe-gap)) var(--stripe-period)\n )\n border-box;\n background-position: 0 0, 0 0;\n box-shadow:\n 0 10px 40px rgba(45, 212, 191, 0.12),\n 0 4px 12px rgba(251, 113, 133, 0.08);\n transition: transform 0.35s ease, box-shadow 0.35s ease;\n}\n\n.card:hover {\n transform: translateY(-4px);\n box-shadow:\n 0 16px 48px rgba(45, 212, 191, 0.2),\n 0 8px 20px rgba(251, 113, 133, 0.12);\n animation: stripe-flow 1s linear infinite;\n}\n\n@keyframes stripe-flow {\n to {\n background-position:\n 0 0,\n calc(var(--stripe-period) * 1) calc(var(--stripe-period) * 1);\n }\n}\n\n.ct {\n margin: 0;\n font-size: 15px;\n line-height: 1.7;\n color: #4a5568;\n}\n\u003C\u002Fstyle>\n","vue",[19,3014,3015,3024,3039,3054,3069,3074,3082,3090,3098,3106,3110,3121,3128,3139,3151,3165,3177,3214,3227,3231,3235,3241,3253,3277,3289,3321,3345,3357,3369,3389,3401,3407,3425,3431,3440,3455,3490,3517,3546,3585,3590,3597,3617,3625,3666,3705,3733,3738,3743,3750,3769,3776,3812,3847,3864,3869,3874,3883,3890,3897,3906,3945,3950,3955,3960,3968,3980,3994,4007,4019,4024],{"__ignoreMap":88},[92,3016,3017,3019,3022],{"class":94,"line":95},[92,3018,99],{"class":98},[92,3020,3021],{"class":102},"template",[92,3023,106],{"class":98},[92,3025,3026,3028,3030,3032,3034,3037],{"class":94,"line":109},[92,3027,112],{"class":98},[92,3029,115],{"class":102},[92,3031,119],{"class":118},[92,3033,122],{"class":98},[92,3035,3036],{"class":125},"\"stage\"",[92,3038,106],{"class":98},[92,3040,3041,3043,3045,3047,3049,3052],{"class":94,"line":131},[92,3042,134],{"class":98},[92,3044,115],{"class":102},[92,3046,119],{"class":118},[92,3048,122],{"class":98},[92,3050,3051],{"class":125},"\"card\"",[92,3053,106],{"class":98},[92,3055,3056,3058,3060,3062,3064,3067],{"class":94,"line":153},[92,3057,487],{"class":98},[92,3059,15],{"class":102},[92,3061,119],{"class":118},[92,3063,122],{"class":98},[92,3065,3066],{"class":125},"\"ct\"",[92,3068,106],{"class":98},[92,3070,3071],{"class":94,"line":163},[92,3072,3073],{"class":98}," 悬停此卡片，斜向条纹会沿对角线流动。纯 CSS 实现，无需图片。\n",[92,3075,3076,3078,3080],{"class":94,"line":238},[92,3077,1088],{"class":98},[92,3079,15],{"class":102},[92,3081,106],{"class":98},[92,3083,3084,3086,3088],{"class":94,"line":245},[92,3085,507],{"class":98},[92,3087,115],{"class":102},[92,3089,106],{"class":98},[92,3091,3092,3094,3096],{"class":94,"line":253},[92,3093,156],{"class":98},[92,3095,115],{"class":102},[92,3097,106],{"class":98},[92,3099,3100,3102,3104],{"class":94,"line":268},[92,3101,166],{"class":98},[92,3103,3021],{"class":102},[92,3105,106],{"class":98},[92,3107,3108],{"class":94,"line":281},[92,3109,242],{"emptyLinePlaceholder":241},[92,3111,3112,3114,3116,3119],{"class":94,"line":293},[92,3113,99],{"class":98},[92,3115,1425],{"class":102},[92,3117,3118],{"class":118}," scoped",[92,3120,106],{"class":98},[92,3122,3123,3126],{"class":94,"line":642},[92,3124,3125],{"class":118},".stage",[92,3127,185],{"class":98},[92,3129,3130,3132,3134,3137],{"class":94,"line":657},[92,3131,1742],{"class":190},[92,3133,194],{"class":98},[92,3135,3136],{"class":190},"grid",[92,3138,204],{"class":98},[92,3140,3141,3144,3146,3149],{"class":94,"line":662},[92,3142,3143],{"class":190}," place-items",[92,3145,194],{"class":98},[92,3147,3148],{"class":190},"center",[92,3150,204],{"class":98},[92,3152,3153,3156,3158,3161,3163],{"class":94,"line":667},[92,3154,3155],{"class":190}," min-height",[92,3157,194],{"class":98},[92,3159,3160],{"class":190},"220",[92,3162,201],{"class":200},[92,3164,204],{"class":98},[92,3166,3167,3169,3171,3173,3175],{"class":94,"line":675},[92,3168,2590],{"class":190},[92,3170,194],{"class":98},[92,3172,2495],{"class":190},[92,3174,201],{"class":200},[92,3176,204],{"class":98},[92,3178,3179,3181,3183,3186,3188,3191,3193,3195,3198,3200,3202,3204,3207,3210,3212],{"class":94,"line":688},[92,3180,2640],{"class":190},[92,3182,194],{"class":98},[92,3184,3185],{"class":190},"linear-gradient",[92,3187,866],{"class":98},[92,3189,3190],{"class":190},"135",[92,3192,872],{"class":200},[92,3194,2656],{"class":98},[92,3196,3197],{"class":190},"#f0fdfa",[92,3199,2690],{"class":190},[92,3201,263],{"class":200},[92,3203,2656],{"class":98},[92,3205,3206],{"class":190},"#fff5f7",[92,3208,3209],{"class":190}," 100",[92,3211,263],{"class":200},[92,3213,875],{"class":98},[92,3215,3216,3218,3220,3223,3225],{"class":94,"line":701},[92,3217,2626],{"class":190},[92,3219,194],{"class":98},[92,3221,3222],{"class":190},"12",[92,3224,201],{"class":200},[92,3226,204],{"class":98},[92,3228,3229],{"class":94,"line":712},[92,3230,235],{"class":98},[92,3232,3233],{"class":94,"line":723},[92,3234,242],{"emptyLinePlaceholder":241},[92,3236,3237,3239],{"class":94,"line":738},[92,3238,2482],{"class":118},[92,3240,185],{"class":98},[92,3242,3243,3245,3247,3249,3251],{"class":94,"line":752},[92,3244,2490],{"class":2489},[92,3246,194],{"class":98},[92,3248,2495],{"class":190},[92,3250,201],{"class":200},[92,3252,204],{"class":98},[92,3254,3255,3257,3259,3261,3263,3265,3267,3269,3271,3273,3275],{"class":94,"line":2860},[92,3256,2504],{"class":2489},[92,3258,194],{"class":98},[92,3260,2509],{"class":190},[92,3262,866],{"class":98},[92,3264,2514],{"class":190},[92,3266,866],{"class":98},[92,3268,2519],{"class":2489},[92,3270,2522],{"class":98},[92,3272,1393],{"class":200},[92,3274,2527],{"class":190},[92,3276,875],{"class":98},[92,3278,3279,3281,3283,3285,3287],{"class":94,"line":2868},[92,3280,2534],{"class":2489},[92,3282,194],{"class":98},[92,3284,731],{"class":190},[92,3286,201],{"class":200},[92,3288,204],{"class":98},[92,3290,3291,3293,3295,3297,3299,3301,3303,3305,3307,3309,3311,3313,3315,3317,3319],{"class":94,"line":2891},[92,3292,2547],{"class":2489},[92,3294,194],{"class":98},[92,3296,2509],{"class":190},[92,3298,2554],{"class":98},[92,3300,2514],{"class":190},[92,3302,866],{"class":98},[92,3304,2519],{"class":2489},[92,3306,2522],{"class":98},[92,3308,2565],{"class":200},[92,3310,2568],{"class":190},[92,3312,866],{"class":98},[92,3314,2573],{"class":2489},[92,3316,2576],{"class":98},[92,3318,2579],{"class":190},[92,3320,875],{"class":98},[92,3322,3323,3325,3327,3330,3332,3334,3336,3338,3341,3343],{"class":94,"line":2896},[92,3324,191],{"class":190},[92,3326,194],{"class":98},[92,3328,3329],{"class":190},"min",[92,3331,866],{"class":98},[92,3333,650],{"class":190},[92,3335,263],{"class":200},[92,3337,2656],{"class":98},[92,3339,3340],{"class":190},"320",[92,3342,201],{"class":200},[92,3344,875],{"class":98},[92,3346,3347,3349,3351,3353,3355],{"class":94,"line":2901},[92,3348,2590],{"class":190},[92,3350,194],{"class":98},[92,3352,731],{"class":190},[92,3354,201],{"class":200},[92,3356,204],{"class":98},[92,3358,3359,3361,3363,3365,3367],{"class":94,"line":2911},[92,3360,2626],{"class":190},[92,3362,194],{"class":98},[92,3364,2631],{"class":190},[92,3366,201],{"class":200},[92,3368,204],{"class":98},[92,3370,3371,3373,3375,3377,3379,3381,3383,3385,3387],{"class":94,"line":2919},[92,3372,627],{"class":190},[92,3374,194],{"class":98},[92,3376,2514],{"class":190},[92,3378,866],{"class":98},[92,3380,2611],{"class":2489},[92,3382,2522],{"class":98},[92,3384,2616],{"class":190},[92,3386,2619],{"class":190},[92,3388,204],{"class":98},[92,3390,3391,3394,3396,3399],{"class":94,"line":2927},[92,3392,3393],{"class":190}," cursor",[92,3395,194],{"class":98},[92,3397,3398],{"class":190},"pointer",[92,3400,204],{"class":98},[92,3402,3403,3405],{"class":94,"line":2937},[92,3404,2640],{"class":190},[92,3406,2643],{"class":98},[92,3408,3409,3411,3413,3415,3417,3419,3421,3423],{"class":94,"line":2978},[92,3410,2648],{"class":190},[92,3412,866],{"class":98},[92,3414,2653],{"class":190},[92,3416,2656],{"class":98},[92,3418,2653],{"class":190},[92,3420,2522],{"class":98},[92,3422,2446],{"class":190},[92,3424,2665],{"class":98},[92,3426,3427,3429],{"class":94,"line":2984},[92,3428,2670],{"class":190},[92,3430,2673],{"class":98},[92,3432,3434,3436,3438],{"class":94,"line":3433},34,[92,3435,2678],{"class":190},[92,3437,872],{"class":200},[92,3439,2665],{"class":98},[92,3441,3443,3445,3447,3449,3451,3453],{"class":94,"line":3442},35,[92,3444,2687],{"class":190},[92,3446,2690],{"class":190},[92,3448,2568],{"class":190},[92,3450,866],{"class":98},[92,3452,2519],{"class":2489},[92,3454,2699],{"class":98},[92,3456,3458,3460,3462,3464,3466,3468,3470,3472,3474,3476,3478,3480,3482,3484,3486,3488],{"class":94,"line":3457},36,[92,3459,2704],{"class":190},[92,3461,2568],{"class":190},[92,3463,866],{"class":98},[92,3465,2519],{"class":2489},[92,3467,2522],{"class":98},[92,3469,2509],{"class":190},[92,3471,866],{"class":98},[92,3473,2514],{"class":190},[92,3475,866],{"class":98},[92,3477,2519],{"class":2489},[92,3479,2522],{"class":98},[92,3481,2565],{"class":200},[92,3483,2568],{"class":190},[92,3485,866],{"class":98},[92,3487,2573],{"class":2489},[92,3489,2735],{"class":98},[92,3491,3493,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513,3515],{"class":94,"line":3492},37,[92,3494,2740],{"class":190},[92,3496,2743],{"class":190},[92,3498,866],{"class":98},[92,3500,2514],{"class":190},[92,3502,866],{"class":98},[92,3504,2519],{"class":2489},[92,3506,2522],{"class":98},[92,3508,2565],{"class":200},[92,3510,2568],{"class":190},[92,3512,866],{"class":98},[92,3514,2573],{"class":2489},[92,3516,2764],{"class":98},[92,3518,3520,3522,3524,3526,3528,3530,3532,3534,3536,3538,3540,3542,3544],{"class":94,"line":3519},38,[92,3521,2769],{"class":190},[92,3523,866],{"class":98},[92,3525,2514],{"class":190},[92,3527,866],{"class":98},[92,3529,2519],{"class":2489},[92,3531,2522],{"class":98},[92,3533,2782],{"class":200},[92,3535,2785],{"class":190},[92,3537,2788],{"class":200},[92,3539,2568],{"class":190},[92,3541,866],{"class":98},[92,3543,2573],{"class":2489},[92,3545,2735],{"class":98},[92,3547,3549,3551,3553,3555,3557,3559,3561,3563,3565,3567,3569,3571,3573,3575,3577,3579,3581,3583],{"class":94,"line":3548},39,[92,3550,2704],{"class":190},[92,3552,2743],{"class":190},[92,3554,866],{"class":98},[92,3556,2514],{"class":190},[92,3558,866],{"class":98},[92,3560,2519],{"class":2489},[92,3562,2522],{"class":98},[92,3564,2782],{"class":200},[92,3566,2785],{"class":190},[92,3568,2788],{"class":200},[92,3570,2568],{"class":190},[92,3572,866],{"class":98},[92,3574,2573],{"class":2489},[92,3576,2827],{"class":98},[92,3578,2514],{"class":190},[92,3580,866],{"class":98},[92,3582,2834],{"class":2489},[92,3584,2837],{"class":98},[92,3586,3588],{"class":94,"line":3587},40,[92,3589,2842],{"class":98},[92,3591,3593,3595],{"class":94,"line":3592},41,[92,3594,2847],{"class":190},[92,3596,204],{"class":98},[92,3598,3600,3603,3605,3607,3609,3611,3613,3615],{"class":94,"line":3599},42,[92,3601,3602],{"class":190}," background-position",[92,3604,194],{"class":98},[92,3606,869],{"class":190},[92,3608,2690],{"class":190},[92,3610,2656],{"class":98},[92,3612,869],{"class":190},[92,3614,2690],{"class":190},[92,3616,204],{"class":98},[92,3618,3620,3623],{"class":94,"line":3619},43,[92,3621,3622],{"class":190}," box-shadow",[92,3624,2643],{"class":98},[92,3626,3628,3631,3634,3636,3639,3641,3644,3646,3649,3651,3654,3656,3659,3661,3664],{"class":94,"line":3627},44,[92,3629,3630],{"class":190}," 0",[92,3632,3633],{"class":190}," 10",[92,3635,201],{"class":200},[92,3637,3638],{"class":190}," 40",[92,3640,201],{"class":200},[92,3642,3643],{"class":190}," rgba",[92,3645,866],{"class":98},[92,3647,3648],{"class":190},"45",[92,3650,2656],{"class":98},[92,3652,3653],{"class":190},"212",[92,3655,2656],{"class":98},[92,3657,3658],{"class":190},"191",[92,3660,2656],{"class":98},[92,3662,3663],{"class":190},"0.12",[92,3665,2699],{"class":98},[92,3667,3669,3671,3674,3676,3679,3681,3683,3685,3688,3690,3693,3695,3698,3700,3703],{"class":94,"line":3668},45,[92,3670,3630],{"class":190},[92,3672,3673],{"class":190}," 4",[92,3675,201],{"class":200},[92,3677,3678],{"class":190}," 12",[92,3680,201],{"class":200},[92,3682,3643],{"class":190},[92,3684,866],{"class":98},[92,3686,3687],{"class":190},"251",[92,3689,2656],{"class":98},[92,3691,3692],{"class":190},"113",[92,3694,2656],{"class":98},[92,3696,3697],{"class":190},"133",[92,3699,2656],{"class":98},[92,3701,3702],{"class":190},"0.08",[92,3704,875],{"class":98},[92,3706,3708,3711,3714,3717,3719,3722,3725,3727,3729,3731],{"class":94,"line":3707},46,[92,3709,3710],{"class":190}," transition",[92,3712,3713],{"class":98},": transform ",[92,3715,3716],{"class":190},"0.35",[92,3718,2880],{"class":200},[92,3720,3721],{"class":190}," ease",[92,3723,3724],{"class":98},", box-shadow ",[92,3726,3716],{"class":190},[92,3728,2880],{"class":200},[92,3730,3721],{"class":190},[92,3732,204],{"class":98},[92,3734,3736],{"class":94,"line":3735},47,[92,3737,235],{"class":98},[92,3739,3741],{"class":94,"line":3740},48,[92,3742,242],{"emptyLinePlaceholder":241},[92,3744,3746,3748],{"class":94,"line":3745},49,[92,3747,2863],{"class":118},[92,3749,185],{"class":98},[92,3751,3753,3755,3757,3760,3762,3765,3767],{"class":94,"line":3752},50,[92,3754,858],{"class":190},[92,3756,194],{"class":98},[92,3758,3759],{"class":190},"translateY",[92,3761,866],{"class":98},[92,3763,3764],{"class":190},"-4",[92,3766,201],{"class":200},[92,3768,875],{"class":98},[92,3770,3772,3774],{"class":94,"line":3771},51,[92,3773,3622],{"class":190},[92,3775,2643],{"class":98},[92,3777,3779,3781,3784,3786,3789,3791,3793,3795,3797,3799,3801,3803,3805,3807,3810],{"class":94,"line":3778},52,[92,3780,3630],{"class":190},[92,3782,3783],{"class":190}," 16",[92,3785,201],{"class":200},[92,3787,3788],{"class":190}," 48",[92,3790,201],{"class":200},[92,3792,3643],{"class":190},[92,3794,866],{"class":98},[92,3796,3648],{"class":190},[92,3798,2656],{"class":98},[92,3800,3653],{"class":190},[92,3802,2656],{"class":98},[92,3804,3658],{"class":190},[92,3806,2656],{"class":98},[92,3808,3809],{"class":190},"0.2",[92,3811,2699],{"class":98},[92,3813,3815,3817,3820,3822,3825,3827,3829,3831,3833,3835,3837,3839,3841,3843,3845],{"class":94,"line":3814},53,[92,3816,3630],{"class":190},[92,3818,3819],{"class":190}," 8",[92,3821,201],{"class":200},[92,3823,3824],{"class":190}," 20",[92,3826,201],{"class":200},[92,3828,3643],{"class":190},[92,3830,866],{"class":98},[92,3832,3687],{"class":190},[92,3834,2656],{"class":98},[92,3836,3692],{"class":190},[92,3838,2656],{"class":98},[92,3840,3697],{"class":190},[92,3842,2656],{"class":98},[92,3844,3663],{"class":190},[92,3846,875],{"class":98},[92,3848,3850,3852,3854,3856,3858,3860,3862],{"class":94,"line":3849},54,[92,3851,2871],{"class":190},[92,3853,2874],{"class":98},[92,3855,2877],{"class":190},[92,3857,2880],{"class":200},[92,3859,2883],{"class":190},[92,3861,2886],{"class":190},[92,3863,204],{"class":98},[92,3865,3867],{"class":94,"line":3866},55,[92,3868,235],{"class":98},[92,3870,3872],{"class":94,"line":3871},56,[92,3873,242],{"emptyLinePlaceholder":241},[92,3875,3877,3879,3881],{"class":94,"line":3876},57,[92,3878,2463],{"class":200},[92,3880,2906],{"class":2489},[92,3882,185],{"class":98},[92,3884,3886,3888],{"class":94,"line":3885},58,[92,3887,2914],{"class":118},[92,3889,185],{"class":98},[92,3891,3893,3895],{"class":94,"line":3892},59,[92,3894,2922],{"class":190},[92,3896,2643],{"class":98},[92,3898,3900,3902,3904],{"class":94,"line":3899},60,[92,3901,2930],{"class":190},[92,3903,2690],{"class":190},[92,3905,2665],{"class":98},[92,3907,3909,3911,3913,3915,3917,3919,3921,3923,3925,3927,3929,3931,3933,3935,3937,3939,3941,3943],{"class":94,"line":3908},61,[92,3910,2940],{"class":190},[92,3912,866],{"class":98},[92,3914,2514],{"class":190},[92,3916,866],{"class":98},[92,3918,2834],{"class":2489},[92,3920,2522],{"class":98},[92,3922,2782],{"class":200},[92,3924,2955],{"class":190},[92,3926,2522],{"class":98},[92,3928,2509],{"class":190},[92,3930,866],{"class":98},[92,3932,2514],{"class":190},[92,3934,866],{"class":98},[92,3936,2834],{"class":2489},[92,3938,2522],{"class":98},[92,3940,2782],{"class":200},[92,3942,2955],{"class":190},[92,3944,875],{"class":98},[92,3946,3948],{"class":94,"line":3947},62,[92,3949,2981],{"class":98},[92,3951,3953],{"class":94,"line":3952},63,[92,3954,235],{"class":98},[92,3956,3958],{"class":94,"line":3957},64,[92,3959,242],{"emptyLinePlaceholder":241},[92,3961,3963,3966],{"class":94,"line":3962},65,[92,3964,3965],{"class":118},".ct",[92,3967,185],{"class":98},[92,3969,3971,3974,3976,3978],{"class":94,"line":3970},66,[92,3972,3973],{"class":190}," margin",[92,3975,194],{"class":98},[92,3977,869],{"class":190},[92,3979,204],{"class":98},[92,3981,3983,3985,3987,3990,3992],{"class":94,"line":3982},67,[92,3984,1837],{"class":190},[92,3986,194],{"class":98},[92,3988,3989],{"class":190},"15",[92,3991,201],{"class":200},[92,3993,204],{"class":98},[92,3995,3997,4000,4002,4005],{"class":94,"line":3996},68,[92,3998,3999],{"class":190}," line-height",[92,4001,194],{"class":98},[92,4003,4004],{"class":190},"1.7",[92,4006,204],{"class":98},[92,4008,4010,4012,4014,4017],{"class":94,"line":4009},69,[92,4011,1477],{"class":190},[92,4013,194],{"class":98},[92,4015,4016],{"class":190},"#4a5568",[92,4018,204],{"class":98},[92,4020,4022],{"class":94,"line":4021},70,[92,4023,235],{"class":98},[92,4025,4027,4029,4031],{"class":94,"line":4026},71,[92,4028,166],{"class":98},[92,4030,1425],{"class":102},[92,4032,106],{"class":98},[78,4034,4036],{"id":4035},"方案二border-image-图片切片边框","方案二：border-image 图片切片边框",[15,4038,4039,4040,4042],{},"有九宫格切图时，",[19,4041,2420],{}," 可以把四角固定、四边平铺或拉伸。简写语法：",[83,4044,4046],{"className":173,"code":4045,"language":175,"meta":88,"style":88},"border-image: url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 round;\n",[19,4047,4048],{"__ignoreMap":88},[92,4049,4050,4052,4055,4058],{"class":94,"line":95},[92,4051,2420],{"class":102},[92,4053,4054],{"class":98},": url('\u002Fdemos\u002F",[92,4056,4057],{"class":102},"css-borders",[92,4059,4060],{"class":98},"\u002Fborderimg.png') 320 round;\n",[15,4062,4063],{},"等价于：",[366,4065,4066,4076],{},[369,4067,4068],{},[372,4069,4070,4073],{},[375,4071,4072],{},"属性",[375,4074,4075],{},"含义",[384,4077,4078,4088,4098],{},[372,4079,4080,4085],{},[389,4081,4082],{},[19,4083,4084],{},"border-image-source",[389,4086,4087],{},"装饰图 URL",[372,4089,4090,4095],{},[389,4091,4092],{},[19,4093,4094],{},"border-image-slice: 320",[389,4096,4097],{},"从四边向内切 320px（数字无单位 = 像素）",[372,4099,4100,4105],{},[389,4101,4102],{},[19,4103,4104],{},"border-image-repeat: round",[389,4106,4107],{},"边段重复并缩放以填满，不留空隙",[15,4109,4110,4113,4114,4117,4118,4121],{},[19,4111,4112],{},"round"," 适合等宽花纹；",[19,4115,4116],{},"repeat"," 原尺寸重复可能裁切；",[19,4119,4120],{},"stretch"," 拉伸变形但一定铺满。",[2470,4123,4125],{"lang":175,"title":4124},"border-image 简写",[83,4126,4128],{"className":173,"code":4127,"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,4129,4130,4137,4153,4177,4188,4198,4210],{"__ignoreMap":88},[92,4131,4132,4135],{"class":94,"line":95},[92,4133,4134],{"class":118},".box",[92,4136,185],{"class":98},[92,4138,4139,4141,4143,4145,4147,4149,4151],{"class":94,"line":109},[92,4140,627],{"class":190},[92,4142,194],{"class":98},[92,4144,260],{"class":190},[92,4146,201],{"class":200},[92,4148,637],{"class":190},[92,4150,2619],{"class":190},[92,4152,204],{"class":98},[92,4154,4155,4158,4160,4163,4165,4168,4170,4172,4175],{"class":94,"line":131},[92,4156,4157],{"class":190}," border-image",[92,4159,194],{"class":98},[92,4161,4162],{"class":190},"url",[92,4164,866],{"class":98},[92,4166,4167],{"class":125},"'\u002Fdemos\u002Fcss-borders\u002Fborderimg.png'",[92,4169,2522],{"class":98},[92,4171,3340],{"class":190},[92,4173,4174],{"class":190}," round",[92,4176,204],{"class":98},[92,4178,4179,4181,4183,4186],{"class":94,"line":153},[92,4180,2640],{"class":190},[92,4182,194],{"class":98},[92,4184,4185],{"class":190},"#111",[92,4187,204],{"class":98},[92,4189,4190,4192,4194,4196],{"class":94,"line":163},[92,4191,1477],{"class":190},[92,4193,194],{"class":98},[92,4195,2653],{"class":190},[92,4197,204],{"class":98},[92,4199,4200,4202,4204,4206,4208],{"class":94,"line":238},[92,4201,2590],{"class":190},[92,4203,194],{"class":98},[92,4205,1868],{"class":190},[92,4207,201],{"class":200},[92,4209,204],{"class":98},[92,4211,4212],{"class":94,"line":245},[92,4213,235],{"class":98},[15,4215,4216,4217,4219],{},"切换 ",[19,4218,4116],{}," 模式，对比边框铺法差异：",[3005,4221,4223],{"title":4222},"border-image 切片边框",[83,4224,4226],{"className":3010,"code":4225,"language":3012,"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,4227,4228,4236,4250,4266,4271,4288,4310,4329,4349,4357,4365,4388,4393,4401,4409,4417,4421,4433,4447,4451,4472,4476,4497,4518,4523,4531,4535,4545,4551,4563,4574,4586,4590,4594,4601,4612,4623,4637,4651,4663,4674,4678,4682,4691,4708,4721,4738,4742,4746,4752,4763,4779,4789,4799,4811,4821,4833,4837],{"__ignoreMap":88},[92,4229,4230,4232,4234],{"class":94,"line":95},[92,4231,99],{"class":98},[92,4233,3021],{"class":102},[92,4235,106],{"class":98},[92,4237,4238,4240,4242,4244,4246,4248],{"class":94,"line":109},[92,4239,112],{"class":98},[92,4241,115],{"class":102},[92,4243,119],{"class":118},[92,4245,122],{"class":98},[92,4247,3036],{"class":125},[92,4249,106],{"class":98},[92,4251,4252,4254,4257,4259,4261,4264],{"class":94,"line":131},[92,4253,134],{"class":98},[92,4255,4256],{"class":102},"label",[92,4258,119],{"class":118},[92,4260,122],{"class":98},[92,4262,4263],{"class":125},"\"toolbar\"",[92,4265,106],{"class":98},[92,4267,4268],{"class":94,"line":153},[92,4269,4270],{"class":98}," border-image-repeat\n",[92,4272,4273,4275,4278,4281,4283,4286],{"class":94,"line":163},[92,4274,487],{"class":98},[92,4276,4277],{"class":102},"select",[92,4279,4280],{"class":118}," v-model",[92,4282,122],{"class":98},[92,4284,4285],{"class":125},"\"repeat\"",[92,4287,106],{"class":98},[92,4289,4290,4292,4295,4298,4300,4303,4306,4308],{"class":94,"line":238},[92,4291,1031],{"class":98},[92,4293,4294],{"class":102},"option",[92,4296,4297],{"class":118}," value",[92,4299,122],{"class":98},[92,4301,4302],{"class":125},"\"round\"",[92,4304,4305],{"class":98},">round\u003C\u002F",[92,4307,4294],{"class":102},[92,4309,106],{"class":98},[92,4311,4312,4314,4316,4318,4320,4322,4325,4327],{"class":94,"line":245},[92,4313,1031],{"class":98},[92,4315,4294],{"class":102},[92,4317,4297],{"class":118},[92,4319,122],{"class":98},[92,4321,4285],{"class":125},[92,4323,4324],{"class":98},">repeat\u003C\u002F",[92,4326,4294],{"class":102},[92,4328,106],{"class":98},[92,4330,4331,4333,4335,4337,4339,4342,4345,4347],{"class":94,"line":253},[92,4332,1031],{"class":98},[92,4334,4294],{"class":102},[92,4336,4297],{"class":118},[92,4338,122],{"class":98},[92,4340,4341],{"class":125},"\"stretch\"",[92,4343,4344],{"class":98},">stretch\u003C\u002F",[92,4346,4294],{"class":102},[92,4348,106],{"class":98},[92,4350,4351,4353,4355],{"class":94,"line":268},[92,4352,1088],{"class":98},[92,4354,4277],{"class":102},[92,4356,106],{"class":98},[92,4358,4359,4361,4363],{"class":94,"line":281},[92,4360,507],{"class":98},[92,4362,4256],{"class":102},[92,4364,106],{"class":98},[92,4366,4367,4369,4371,4373,4375,4378,4381,4383,4386],{"class":94,"line":293},[92,4368,134],{"class":98},[92,4370,115],{"class":102},[92,4372,119],{"class":118},[92,4374,122],{"class":98},[92,4376,4377],{"class":125},"\"box\"",[92,4379,4380],{"class":118}," :style",[92,4382,122],{"class":98},[92,4384,4385],{"class":125},"\"boxStyle\"",[92,4387,106],{"class":98},[92,4389,4390],{"class":94,"line":642},[92,4391,4392],{"class":98}," border-image 让装饰图随容器伸缩。切换上方 repeat 模式观察边段铺法。\n",[92,4394,4395,4397,4399],{"class":94,"line":657},[92,4396,507],{"class":98},[92,4398,115],{"class":102},[92,4400,106],{"class":98},[92,4402,4403,4405,4407],{"class":94,"line":662},[92,4404,156],{"class":98},[92,4406,115],{"class":102},[92,4408,106],{"class":98},[92,4410,4411,4413,4415],{"class":94,"line":667},[92,4412,166],{"class":98},[92,4414,3021],{"class":102},[92,4416,106],{"class":98},[92,4418,4419],{"class":94,"line":675},[92,4420,242],{"emptyLinePlaceholder":241},[92,4422,4423,4425,4428,4431],{"class":94,"line":688},[92,4424,99],{"class":98},[92,4426,4427],{"class":102},"script",[92,4429,4430],{"class":118}," setup",[92,4432,106],{"class":98},[92,4434,4435,4438,4441,4444],{"class":94,"line":701},[92,4436,4437],{"class":200},"import",[92,4439,4440],{"class":98}," { computed, ref } ",[92,4442,4443],{"class":200},"from",[92,4445,4446],{"class":125}," 'vue'\n",[92,4448,4449],{"class":94,"line":712},[92,4450,242],{"emptyLinePlaceholder":241},[92,4452,4453,4456,4459,4462,4465,4467,4470],{"class":94,"line":723},[92,4454,4455],{"class":200},"const",[92,4457,4458],{"class":190}," repeat",[92,4460,4461],{"class":200}," =",[92,4463,4464],{"class":118}," ref",[92,4466,866],{"class":98},[92,4468,4469],{"class":125},"'round'",[92,4471,2837],{"class":98},[92,4473,4474],{"class":94,"line":738},[92,4475,242],{"emptyLinePlaceholder":241},[92,4477,4478,4480,4483,4485,4488,4491,4494],{"class":94,"line":752},[92,4479,4455],{"class":200},[92,4481,4482],{"class":190}," boxStyle",[92,4484,4461],{"class":200},[92,4486,4487],{"class":118}," computed",[92,4489,4490],{"class":98},"(() ",[92,4492,4493],{"class":200},"=>",[92,4495,4496],{"class":98}," ({\n",[92,4498,4499,4502,4505,4507,4510,4513,4516],{"class":94,"line":2860},[92,4500,4501],{"class":98}," borderImage: ",[92,4503,4504],{"class":125},"`url('\u002Fdemos\u002Fcss-borders\u002Fborderimg.png') 320 ${",[92,4506,4116],{"class":98},[92,4508,4509],{"class":125},".",[92,4511,4512],{"class":98},"value",[92,4514,4515],{"class":125},"}`",[92,4517,2665],{"class":98},[92,4519,4520],{"class":94,"line":2868},[92,4521,4522],{"class":98},"}))\n",[92,4524,4525,4527,4529],{"class":94,"line":2891},[92,4526,166],{"class":98},[92,4528,4427],{"class":102},[92,4530,106],{"class":98},[92,4532,4533],{"class":94,"line":2896},[92,4534,242],{"emptyLinePlaceholder":241},[92,4536,4537,4539,4541,4543],{"class":94,"line":2901},[92,4538,99],{"class":98},[92,4540,1425],{"class":102},[92,4542,3118],{"class":118},[92,4544,106],{"class":98},[92,4546,4547,4549],{"class":94,"line":2911},[92,4548,3125],{"class":118},[92,4550,185],{"class":98},[92,4552,4553,4555,4557,4559,4561],{"class":94,"line":2919},[92,4554,2590],{"class":190},[92,4556,194],{"class":98},[92,4558,2495],{"class":190},[92,4560,201],{"class":200},[92,4562,204],{"class":98},[92,4564,4565,4567,4569,4572],{"class":94,"line":2927},[92,4566,2640],{"class":190},[92,4568,194],{"class":98},[92,4570,4571],{"class":190},"#f0f0f0",[92,4573,204],{"class":98},[92,4575,4576,4578,4580,4582,4584],{"class":94,"line":2937},[92,4577,2626],{"class":190},[92,4579,194],{"class":98},[92,4581,3222],{"class":190},[92,4583,201],{"class":200},[92,4585,204],{"class":98},[92,4587,4588],{"class":94,"line":2978},[92,4589,235],{"class":98},[92,4591,4592],{"class":94,"line":2984},[92,4593,242],{"emptyLinePlaceholder":241},[92,4595,4596,4599],{"class":94,"line":3433},[92,4597,4598],{"class":118},".toolbar",[92,4600,185],{"class":98},[92,4602,4603,4605,4607,4610],{"class":94,"line":3442},[92,4604,1742],{"class":190},[92,4606,194],{"class":98},[92,4608,4609],{"class":190},"flex",[92,4611,204],{"class":98},[92,4613,4614,4617,4619,4621],{"class":94,"line":3457},[92,4615,4616],{"class":190}," align-items",[92,4618,194],{"class":98},[92,4620,3148],{"class":190},[92,4622,204],{"class":98},[92,4624,4625,4628,4630,4633,4635],{"class":94,"line":3492},[92,4626,4627],{"class":190}," gap",[92,4629,194],{"class":98},[92,4631,4632],{"class":190},"8",[92,4634,201],{"class":200},[92,4636,204],{"class":98},[92,4638,4639,4642,4644,4647,4649],{"class":94,"line":3519},[92,4640,4641],{"class":190}," margin-bottom",[92,4643,194],{"class":98},[92,4645,4646],{"class":190},"16",[92,4648,201],{"class":200},[92,4650,204],{"class":98},[92,4652,4653,4655,4657,4659,4661],{"class":94,"line":3548},[92,4654,1837],{"class":190},[92,4656,194],{"class":98},[92,4658,2631],{"class":190},[92,4660,201],{"class":200},[92,4662,204],{"class":98},[92,4664,4665,4667,4669,4672],{"class":94,"line":3587},[92,4666,1477],{"class":190},[92,4668,194],{"class":98},[92,4670,4671],{"class":190},"#374151",[92,4673,204],{"class":98},[92,4675,4676],{"class":94,"line":3592},[92,4677,235],{"class":98},[92,4679,4680],{"class":94,"line":3599},[92,4681,242],{"emptyLinePlaceholder":241},[92,4683,4684,4686,4689],{"class":94,"line":3619},[92,4685,4598],{"class":118},[92,4687,4688],{"class":102}," select",[92,4690,185],{"class":98},[92,4692,4693,4695,4697,4700,4702,4704,4706],{"class":94,"line":3627},[92,4694,2590],{"class":190},[92,4696,194],{"class":98},[92,4698,4699],{"class":190},"4",[92,4701,201],{"class":200},[92,4703,3819],{"class":190},[92,4705,201],{"class":200},[92,4707,204],{"class":98},[92,4709,4710,4712,4714,4717,4719],{"class":94,"line":3668},[92,4711,2626],{"class":190},[92,4713,194],{"class":98},[92,4715,4716],{"class":190},"6",[92,4718,201],{"class":200},[92,4720,204],{"class":98},[92,4722,4723,4725,4727,4729,4731,4733,4736],{"class":94,"line":3707},[92,4724,627],{"class":190},[92,4726,194],{"class":98},[92,4728,2877],{"class":190},[92,4730,201],{"class":200},[92,4732,637],{"class":190},[92,4734,4735],{"class":190}," #d1d5db",[92,4737,204],{"class":98},[92,4739,4740],{"class":94,"line":3735},[92,4741,235],{"class":98},[92,4743,4744],{"class":94,"line":3740},[92,4745,242],{"emptyLinePlaceholder":241},[92,4747,4748,4750],{"class":94,"line":3745},[92,4749,4134],{"class":118},[92,4751,185],{"class":98},[92,4753,4754,4757,4759,4761],{"class":94,"line":3752},[92,4755,4756],{"class":190}," box-sizing",[92,4758,194],{"class":98},[92,4760,21],{"class":190},[92,4762,204],{"class":98},[92,4764,4765,4767,4769,4771,4773,4775,4777],{"class":94,"line":3771},[92,4766,627],{"class":190},[92,4768,194],{"class":98},[92,4770,260],{"class":190},[92,4772,201],{"class":200},[92,4774,637],{"class":190},[92,4776,2619],{"class":190},[92,4778,204],{"class":98},[92,4780,4781,4783,4785,4787],{"class":94,"line":3778},[92,4782,2640],{"class":190},[92,4784,194],{"class":98},[92,4786,4185],{"class":190},[92,4788,204],{"class":98},[92,4790,4791,4793,4795,4797],{"class":94,"line":3814},[92,4792,1477],{"class":190},[92,4794,194],{"class":98},[92,4796,2653],{"class":190},[92,4798,204],{"class":98},[92,4800,4801,4803,4805,4807,4809],{"class":94,"line":3849},[92,4802,2590],{"class":190},[92,4804,194],{"class":98},[92,4806,1868],{"class":190},[92,4808,201],{"class":200},[92,4810,204],{"class":98},[92,4812,4813,4815,4817,4819],{"class":94,"line":3866},[92,4814,3999],{"class":190},[92,4816,194],{"class":98},[92,4818,4004],{"class":190},[92,4820,204],{"class":98},[92,4822,4823,4825,4827,4829,4831],{"class":94,"line":3871},[92,4824,1837],{"class":190},[92,4826,194],{"class":98},[92,4828,3989],{"class":190},[92,4830,201],{"class":200},[92,4832,204],{"class":98},[92,4834,4835],{"class":94,"line":3876},[92,4836,235],{"class":98},[92,4838,4839,4841,4843],{"class":94,"line":3885},[92,4840,166],{"class":98},[92,4842,1425],{"class":102},[92,4844,106],{"class":98},[78,4846,1381],{"id":1381},[342,4848,4849,4862],{},[345,4850,4851,4854,4855,4857,4858,4857,4860],{},[24,4852,4853],{},"无素材、要动效"," → 双层 ",[19,4856,2435],{}," + ",[19,4859,2457],{},[19,4861,2463],{},[345,4863,4864,4867,4868,4870,4871,4874,4875,4877],{},[24,4865,4866],{},"有切图、要质感"," → ",[19,4869,2420],{}," + 合适的 ",[19,4872,4873],{},"slice"," 与 ",[19,4876,4116],{}," 模式",[15,4879,4880],{},"两者可以组合：内容区用纯色或渐变，边框区分别用 CSS 条纹或图片切片。选哪种取决于设计稿有没有现成九宫格素材。",[1425,4882,4883],{},"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":4885},[4886,4887,4888],{"id":2424,"depth":109,"text":2425},{"id":4035,"depth":109,"text":4036},{"id":1381,"depth":109,"text":1381},"2026-05-15","用双层 background 实现会动的条纹边框，或用 border-image 切片装饰图做自适应边框。",{},"\u002Fblog\u002Fcss-border-tricks",{"title":2399,"description":4890},"blog\u002Fcss-border-tricks",[2431,4896,2420],"animation","8YZziFPovjlIbtJigRJMhVdL1HGrqD3ngLg-jPkvETc",{"id":4899,"title":4900,"body":4901,"category":175,"date":7966,"description":7967,"draft":1440,"extension":1441,"meta":7968,"navigation":241,"path":7969,"seo":7970,"stem":7971,"tags":7972,"__hash__":7976},"blog\u002Fblog\u002Fcss-responsive-text.md","纯 CSS 响应式文字切换",{"type":8,"value":4902,"toc":7959},[4903,4906,4917,4920,4931,4935,4942,4974,4984,4987,5255,5258,5381,5397,5401,5407,5529,5706,5715,5718,5764,5771,5774,5788,5791,7919,7925,7927,7956],[11,4904,4900],{"id":4905},"纯-css-响应式文字切换",[15,4907,4908,4909,4912,4913,4916],{},"响应式页面里，同一位置有时需要展示不同文案：窄屏写「手机端」，宽屏写「桌面端」。第一反应往往是 ",[19,4910,4911],{},"window.resize"," 监听加 JS 改 DOM——其实用 ",[24,4914,4915],{},"CSS 媒体查询"," 就能做到，无需脚本、不阻塞渲染，对 SEO 和首屏也更友好。",[15,4918,4919],{},"本文对比两种纯 CSS 写法，并说明各自适用场景。示例断点统一为：",[342,4921,4922,4925,4928],{},[345,4923,4924],{},"手机：\u003C 640px",[345,4926,4927],{},"平板：640px ~ 1023px",[345,4929,4930],{},"桌面：≥ 1024px",[78,4932,4934],{"id":4933},"方案一伪元素-content","方案一：伪元素 + content",[15,4936,4937,4938,4941],{},"HTML 里放一个空元素（或只有装饰性内容），真正显示的文案写在 CSS ",[19,4939,4940],{},"content"," 里，按断点覆盖：",[83,4943,4945],{"className":85,"code":4944,"language":87,"meta":88,"style":88},"\u003Cp class=\"responsive-text\" aria-label=\"随视口变化的提示文字\">\u003C\u002Fp>\n",[19,4946,4947],{"__ignoreMap":88},[92,4948,4949,4951,4953,4955,4957,4960,4963,4965,4968,4970,4972],{"class":94,"line":95},[92,4950,99],{"class":98},[92,4952,15],{"class":102},[92,4954,119],{"class":118},[92,4956,122],{"class":98},[92,4958,4959],{"class":125},"\"responsive-text\"",[92,4961,4962],{"class":118}," aria-label",[92,4964,122],{"class":98},[92,4966,4967],{"class":125},"\"随视口变化的提示文字\"",[92,4969,146],{"class":98},[92,4971,15],{"class":102},[92,4973,106],{"class":98},[15,4975,4976,4979,4980,4983],{},[19,4977,4978],{},"aria-label"," 给读屏软件提供可访问的固定描述；视觉文案由 ",[19,4981,4982],{},"::before"," 承担。",[15,4985,4986],{},"用 SCSS mixin 可以避免重复写媒体查询：",[2470,4988,4991],{"lang":4989,"title":4990},"scss","responsive-text mixin",[83,4992,4995],{"className":4993,"code":4994,"language":4989,"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,4996,4997,5011,5025,5029,5056,5065,5076,5080,5084,5094,5112,5121,5132,5137,5142,5146,5150,5159,5173,5181,5191,5195,5199,5203,5207,5211,5218,5227,5234,5241,5246,5251],{"__ignoreMap":88},[92,4998,4999,5002,5004,5007,5009],{"class":94,"line":95},[92,5000,5001],{"class":2489},"$bp-tablet",[92,5003,194],{"class":98},[92,5005,5006],{"class":190},"640",[92,5008,201],{"class":200},[92,5010,204],{"class":98},[92,5012,5013,5016,5018,5021,5023],{"class":94,"line":109},[92,5014,5015],{"class":2489},"$bp-desktop",[92,5017,194],{"class":98},[92,5019,5020],{"class":190},"1024",[92,5022,201],{"class":200},[92,5024,204],{"class":98},[92,5026,5027],{"class":94,"line":131},[92,5028,242],{"emptyLinePlaceholder":241},[92,5030,5031,5034,5037,5039,5042,5044,5047,5050,5053],{"class":94,"line":153},[92,5032,5033],{"class":200},"@mixin",[92,5035,5036],{"class":118}," responsive-text",[92,5038,866],{"class":98},[92,5040,5041],{"class":2489},"$mobile",[92,5043,2656],{"class":98},[92,5045,5046],{"class":2489},"$tablet",[92,5048,5049],{"class":98},": null, ",[92,5051,5052],{"class":2489},"$desktop",[92,5054,5055],{"class":98},": null) {\n",[92,5057,5058,5061,5063],{"class":94,"line":163},[92,5059,5060],{"class":102}," &",[92,5062,4982],{"class":118},[92,5064,185],{"class":98},[92,5066,5067,5070,5072,5074],{"class":94,"line":238},[92,5068,5069],{"class":102}," content",[92,5071,194],{"class":98},[92,5073,5041],{"class":2489},[92,5075,204],{"class":98},[92,5077,5078],{"class":94,"line":245},[92,5079,2981],{"class":98},[92,5081,5082],{"class":94,"line":253},[92,5083,242],{"emptyLinePlaceholder":241},[92,5085,5086,5089,5092],{"class":94,"line":268},[92,5087,5088],{"class":200}," @if",[92,5090,5091],{"class":2489}," $tablet",[92,5093,185],{"class":98},[92,5095,5096,5099,5102,5105,5107,5109],{"class":94,"line":281},[92,5097,5098],{"class":200}," @media",[92,5100,5101],{"class":98}," (",[92,5103,5104],{"class":190},"min-width",[92,5106,194],{"class":98},[92,5108,5001],{"class":2489},[92,5110,5111],{"class":98},") {\n",[92,5113,5114,5117,5119],{"class":94,"line":293},[92,5115,5116],{"class":102}," &",[92,5118,4982],{"class":118},[92,5120,185],{"class":98},[92,5122,5123,5126,5128,5130],{"class":94,"line":642},[92,5124,5125],{"class":102}," content",[92,5127,194],{"class":98},[92,5129,5046],{"class":2489},[92,5131,204],{"class":98},[92,5133,5134],{"class":94,"line":657},[92,5135,5136],{"class":98}," }\n",[92,5138,5139],{"class":94,"line":662},[92,5140,5141],{"class":98}," }\n",[92,5143,5144],{"class":94,"line":667},[92,5145,2981],{"class":98},[92,5147,5148],{"class":94,"line":675},[92,5149,242],{"emptyLinePlaceholder":241},[92,5151,5152,5154,5157],{"class":94,"line":688},[92,5153,5088],{"class":200},[92,5155,5156],{"class":2489}," $desktop",[92,5158,185],{"class":98},[92,5160,5161,5163,5165,5167,5169,5171],{"class":94,"line":701},[92,5162,5098],{"class":200},[92,5164,5101],{"class":98},[92,5166,5104],{"class":190},[92,5168,194],{"class":98},[92,5170,5015],{"class":2489},[92,5172,5111],{"class":98},[92,5174,5175,5177,5179],{"class":94,"line":712},[92,5176,5116],{"class":102},[92,5178,4982],{"class":118},[92,5180,185],{"class":98},[92,5182,5183,5185,5187,5189],{"class":94,"line":723},[92,5184,5125],{"class":102},[92,5186,194],{"class":98},[92,5188,5052],{"class":2489},[92,5190,204],{"class":98},[92,5192,5193],{"class":94,"line":738},[92,5194,5136],{"class":98},[92,5196,5197],{"class":94,"line":752},[92,5198,5141],{"class":98},[92,5200,5201],{"class":94,"line":2860},[92,5202,2981],{"class":98},[92,5204,5205],{"class":94,"line":2868},[92,5206,235],{"class":98},[92,5208,5209],{"class":94,"line":2891},[92,5210,242],{"emptyLinePlaceholder":241},[92,5212,5213,5216],{"class":94,"line":2896},[92,5214,5215],{"class":118},".responsive-text",[92,5217,185],{"class":98},[92,5219,5220,5223,5225],{"class":94,"line":2901},[92,5221,5222],{"class":200}," @include",[92,5224,5036],{"class":118},[92,5226,2673],{"class":98},[92,5228,5229,5232],{"class":94,"line":2911},[92,5230,5231],{"class":125}," \"📱 手机端：窄屏阅读体验\"",[92,5233,2665],{"class":98},[92,5235,5236,5239],{"class":94,"line":2919},[92,5237,5238],{"class":125}," \"📟 平板端：中等宽度布局\"",[92,5240,2665],{"class":98},[92,5242,5243],{"class":94,"line":2927},[92,5244,5245],{"class":125}," \"🖥️ 桌面端：宽屏完整展示\"\n",[92,5247,5248],{"class":94,"line":2937},[92,5249,5250],{"class":98}," );\n",[92,5252,5253],{"class":94,"line":2978},[92,5254,235],{"class":98},[15,5256,5257],{},"编译后的核心 CSS 等价于：",[2470,5259,5261],{"lang":175,"title":5260},"编译结果（纯 CSS）",[83,5262,5264],{"className":173,"code":5263,"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,5265,5266,5273,5285,5289,5293,5310,5317,5328,5332,5336,5340,5356,5362,5373,5377],{"__ignoreMap":88},[92,5267,5268,5271],{"class":94,"line":95},[92,5269,5270],{"class":118},".responsive-text::before",[92,5272,185],{"class":98},[92,5274,5275,5278,5280,5283],{"class":94,"line":109},[92,5276,5277],{"class":190}," content",[92,5279,194],{"class":98},[92,5281,5282],{"class":125},"\"📱 手机端：窄屏阅读体验\"",[92,5284,204],{"class":98},[92,5286,5287],{"class":94,"line":131},[92,5288,235],{"class":98},[92,5290,5291],{"class":94,"line":153},[92,5292,242],{"emptyLinePlaceholder":241},[92,5294,5295,5298,5300,5302,5304,5306,5308],{"class":94,"line":163},[92,5296,5297],{"class":200},"@media",[92,5299,5101],{"class":98},[92,5301,5104],{"class":190},[92,5303,194],{"class":98},[92,5305,5006],{"class":190},[92,5307,201],{"class":200},[92,5309,5111],{"class":98},[92,5311,5312,5315],{"class":94,"line":238},[92,5313,5314],{"class":118}," .responsive-text::before",[92,5316,185],{"class":98},[92,5318,5319,5321,5323,5326],{"class":94,"line":245},[92,5320,5069],{"class":190},[92,5322,194],{"class":98},[92,5324,5325],{"class":125},"\"📟 平板端：中等宽度布局\"",[92,5327,204],{"class":98},[92,5329,5330],{"class":94,"line":253},[92,5331,2981],{"class":98},[92,5333,5334],{"class":94,"line":268},[92,5335,235],{"class":98},[92,5337,5338],{"class":94,"line":281},[92,5339,242],{"emptyLinePlaceholder":241},[92,5341,5342,5344,5346,5348,5350,5352,5354],{"class":94,"line":293},[92,5343,5297],{"class":200},[92,5345,5101],{"class":98},[92,5347,5104],{"class":190},[92,5349,194],{"class":98},[92,5351,5020],{"class":190},[92,5353,201],{"class":200},[92,5355,5111],{"class":98},[92,5357,5358,5360],{"class":94,"line":642},[92,5359,5314],{"class":118},[92,5361,185],{"class":98},[92,5363,5364,5366,5368,5371],{"class":94,"line":657},[92,5365,5069],{"class":190},[92,5367,194],{"class":98},[92,5369,5370],{"class":125},"\"🖥️ 桌面端：宽屏完整展示\"",[92,5372,204],{"class":98},[92,5374,5375],{"class":94,"line":662},[92,5376,2981],{"class":98},[92,5378,5379],{"class":94,"line":667},[92,5380,235],{"class":98},[15,5382,5383,5386,5387,340,5390,5392,5393,5396],{},[24,5384,5385],{},"优点","：HTML 极简，改文案只动样式。",[24,5388,5389],{},"局限",[19,5391,4940],{}," 只能是字符串，无法嵌入 ",[19,5394,5395],{},"\u003Cem>"," 等富文本标签。",[78,5398,5400],{"id":5399},"方案二多段-span-display-切换","方案二：多段 span + display 切换",[15,5402,5403,5404,5406],{},"需要高亮关键词、换行或内联标签时，把各断点文案写成真实 DOM，用 ",[19,5405,1638],{}," 控制显隐：",[83,5408,5410],{"className":85,"code":5409,"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,5411,5412,5427,5463,5492,5521],{"__ignoreMap":88},[92,5413,5414,5416,5418,5420,5422,5425],{"class":94,"line":95},[92,5415,99],{"class":98},[92,5417,15],{"class":102},[92,5419,119],{"class":118},[92,5421,122],{"class":98},[92,5423,5424],{"class":125},"\"responsive-spans\"",[92,5426,106],{"class":98},[92,5428,5429,5431,5433,5435,5437,5440,5443,5446,5449,5451,5454,5456,5459,5461],{"class":94,"line":109},[92,5430,112],{"class":98},[92,5432,92],{"class":102},[92,5434,119],{"class":118},[92,5436,122],{"class":98},[92,5438,5439],{"class":125},"\"is-mobile\"",[92,5441,5442],{"class":98},">当前宽度 ",[92,5444,99],{"class":5445},"s7hpK",[92,5447,5448],{"class":98}," 640px，显示\u003C",[92,5450,1034],{"class":102},[92,5452,5453],{"class":98},">手机\u003C\u002F",[92,5455,1034],{"class":102},[92,5457,5458],{"class":98},">文案。\u003C\u002F",[92,5460,92],{"class":102},[92,5462,106],{"class":98},[92,5464,5465,5467,5469,5471,5473,5476,5479,5481,5484,5486,5488,5490],{"class":94,"line":131},[92,5466,112],{"class":98},[92,5468,92],{"class":102},[92,5470,119],{"class":118},[92,5472,122],{"class":98},[92,5474,5475],{"class":125},"\"is-tablet\"",[92,5477,5478],{"class":98},">当前宽度 640px ~ 1023px，显示\u003C",[92,5480,1034],{"class":102},[92,5482,5483],{"class":98},">平板\u003C\u002F",[92,5485,1034],{"class":102},[92,5487,5458],{"class":98},[92,5489,92],{"class":102},[92,5491,106],{"class":98},[92,5493,5494,5496,5498,5500,5502,5505,5508,5510,5513,5515,5517,5519],{"class":94,"line":153},[92,5495,112],{"class":98},[92,5497,92],{"class":102},[92,5499,119],{"class":118},[92,5501,122],{"class":98},[92,5503,5504],{"class":125},"\"is-desktop\"",[92,5506,5507],{"class":98},">当前宽度 ≥ 1024px，显示\u003C",[92,5509,1034],{"class":102},[92,5511,5512],{"class":98},">桌面\u003C\u002F",[92,5514,1034],{"class":102},[92,5516,5458],{"class":98},[92,5518,92],{"class":102},[92,5520,106],{"class":98},[92,5522,5523,5525,5527],{"class":94,"line":163},[92,5524,166],{"class":98},[92,5526,15],{"class":102},[92,5528,106],{"class":98},[2470,5530,5532],{"lang":4989,"title":5531},"按断点显示\u002F隐藏",[83,5533,5535],{"className":4993,"code":5534,"language":4989,"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,5536,5537,5544,5551,5562,5566,5570,5577,5588,5592,5596,5613,5630,5645,5649,5653,5669,5683,5698,5702],{"__ignoreMap":88},[92,5538,5539,5542],{"class":94,"line":95},[92,5540,5541],{"class":118},".responsive-spans",[92,5543,185],{"class":98},[92,5545,5546,5549],{"class":94,"line":109},[92,5547,5548],{"class":102}," span",[92,5550,185],{"class":98},[92,5552,5553,5556,5558,5560],{"class":94,"line":131},[92,5554,5555],{"class":190}," display",[92,5557,194],{"class":98},[92,5559,805],{"class":190},[92,5561,204],{"class":98},[92,5563,5564],{"class":94,"line":153},[92,5565,2981],{"class":98},[92,5567,5568],{"class":94,"line":163},[92,5569,242],{"emptyLinePlaceholder":241},[92,5571,5572,5575],{"class":94,"line":238},[92,5573,5574],{"class":118}," .is-mobile",[92,5576,185],{"class":98},[92,5578,5579,5581,5583,5586],{"class":94,"line":245},[92,5580,5555],{"class":190},[92,5582,194],{"class":98},[92,5584,5585],{"class":190},"inline",[92,5587,204],{"class":98},[92,5589,5590],{"class":94,"line":253},[92,5591,2981],{"class":98},[92,5593,5594],{"class":94,"line":268},[92,5595,242],{"emptyLinePlaceholder":241},[92,5597,5598,5601,5603,5605,5607,5609,5611],{"class":94,"line":281},[92,5599,5600],{"class":200}," @media",[92,5602,5101],{"class":98},[92,5604,5104],{"class":190},[92,5606,194],{"class":98},[92,5608,5006],{"class":190},[92,5610,201],{"class":200},[92,5612,5111],{"class":98},[92,5614,5615,5618,5621,5623,5625,5627],{"class":94,"line":293},[92,5616,5617],{"class":118}," .is-mobile",[92,5619,5620],{"class":98}," { ",[92,5622,1638],{"class":190},[92,5624,194],{"class":98},[92,5626,805],{"class":190},[92,5628,5629],{"class":98},"; }\n",[92,5631,5632,5635,5637,5639,5641,5643],{"class":94,"line":642},[92,5633,5634],{"class":118}," .is-tablet",[92,5636,5620],{"class":98},[92,5638,1638],{"class":190},[92,5640,194],{"class":98},[92,5642,5585],{"class":190},[92,5644,5629],{"class":98},[92,5646,5647],{"class":94,"line":657},[92,5648,2981],{"class":98},[92,5650,5651],{"class":94,"line":662},[92,5652,242],{"emptyLinePlaceholder":241},[92,5654,5655,5657,5659,5661,5663,5665,5667],{"class":94,"line":667},[92,5656,5600],{"class":200},[92,5658,5101],{"class":98},[92,5660,5104],{"class":190},[92,5662,194],{"class":98},[92,5664,5020],{"class":190},[92,5666,201],{"class":200},[92,5668,5111],{"class":98},[92,5670,5671,5673,5675,5677,5679,5681],{"class":94,"line":675},[92,5672,5634],{"class":118},[92,5674,5620],{"class":98},[92,5676,1638],{"class":190},[92,5678,194],{"class":98},[92,5680,805],{"class":190},[92,5682,5629],{"class":98},[92,5684,5685,5688,5690,5692,5694,5696],{"class":94,"line":688},[92,5686,5687],{"class":118}," .is-desktop",[92,5689,5620],{"class":98},[92,5691,1638],{"class":190},[92,5693,194],{"class":98},[92,5695,5585],{"class":190},[92,5697,5629],{"class":98},[92,5699,5700],{"class":94,"line":701},[92,5701,2981],{"class":98},[92,5703,5704],{"class":94,"line":712},[92,5705,235],{"class":98},[15,5707,5708,5710,5711,5714],{},[24,5709,5385],{},"：支持富文本、SEO 友好的真实文本（爬虫能索引到当前可见段）。",[24,5712,5713],{},"代价","：HTML 略冗长，三份文案都要维护。",[78,5716,5717],{"id":5717},"如何选择",[366,5719,5720,5730],{},[369,5721,5722],{},[372,5723,5724,5727],{},[375,5725,5726],{},"场景",[375,5728,5729],{},"推荐方案",[384,5731,5732,5742,5752],{},[372,5733,5734,5737],{},[389,5735,5736],{},"纯装饰性标语、emoji 提示",[389,5738,5739,5740],{},"伪元素 ",[19,5741,4940],{},[372,5743,5744,5747],{},[389,5745,5746],{},"带强调、链接、多行排版",[389,5748,5749,5750],{},"多段 ",[19,5751,92],{},[372,5753,5754,5757],{},[389,5755,5756],{},"强 SEO \u002F 无障碍",[389,5758,5759,5761,5762],{},[19,5760,92],{}," + 语义标签；伪元素方案记得加 ",[19,5763,4978],{},[15,5765,5766,5767,5770],{},"两种方案都",[24,5768,5769],{},"不触发回流中的脚本","，性能友好，也适合 SSR 静态页。",[78,5772,5773],{"id":5773},"交互演示",[15,5775,5776,5777,5787],{},"博客内的 REPL 预览区只有约 300px 宽，",[24,5778,5779,5780,5782,5783,5786],{},"视口 ",[19,5781,5297],{}," 与容器 ",[19,5784,5785],{},"@container"," 的 640 \u002F 1024 断点都凑不齐","。下方用滑块设定「逻辑宽度」，由 CSS 按档位切换文案（断点已缩小为 180px \u002F 260px 以适配预览区；正文方案仍为 640 \u002F 1024）。",[15,5789,5790],{},"拖动滑块或点预设按钮，观察文字与「当前档位」变化：",[3005,5792,5794],{"title":5793},"响应式文字切换",[83,5795,5797],{"className":3010,"code":5796,"language":3012,"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,5798,5799,5807,5822,5836,5866,5873,5883,5893,5903,5908,5913,5922,5928,5936,5945,5954,5958,5963,5971,5977,5985,5994,6003,6007,6012,6020,6028,6032,6047,6060,6067,6077,6086,6096,6106,6116,6120,6140,6148,6156,6160,6167,6177,6187,6197,6202,6218,6238,6262,6276,6303,6330,6357,6365,6373,6381,6389,6397,6401,6411,6421,6425,6442,6446,6463,6485,6503,6511,6516,6524,6528,6538,6546,6557,6570,6583,6611,6616,6621,6628,6639,6652,6665,6678,6683,6688,6696,6707,6720,6734,6747,6759,6764,6769,6779,6791,6802,6815,6831,6844,6856,6868,6880,6891,6922,6927,6932,6944,6956,6961,6966,6978,6989,7001,7037,7042,7047,7055,7066,7077,7090,7104,7115,7120,7125,7135,7146,7159,7164,7169,7177,7192,7205,7218,7229,7234,7239,7247,7261,7279,7292,7308,7321,7326,7331,7339,7352,7364,7375,7380,7385,7393,7410,7423,7434,7449,7462,7473,7478,7483,7490,7507,7521,7533,7545,7557,7562,7567,7578,7589,7594,7599,7609,7620,7625,7630,7640,7651,7656,7661,7668,7679,7693,7705,7717,7722,7727,7737,7748,7753,7758,7771,7782,7787,7792,7804,7815,7820,7825,7837,7848,7853,7858,7868,7881,7893,7905,7910],{"__ignoreMap":88},[92,5800,5801,5803,5805],{"class":94,"line":95},[92,5802,99],{"class":98},[92,5804,3021],{"class":102},[92,5806,106],{"class":98},[92,5808,5809,5811,5813,5815,5817,5820],{"class":94,"line":109},[92,5810,112],{"class":98},[92,5812,115],{"class":102},[92,5814,119],{"class":118},[92,5816,122],{"class":98},[92,5818,5819],{"class":125},"\"playground\"",[92,5821,106],{"class":98},[92,5823,5824,5826,5828,5830,5832,5834],{"class":94,"line":131},[92,5825,134],{"class":98},[92,5827,115],{"class":102},[92,5829,119],{"class":118},[92,5831,122],{"class":98},[92,5833,4263],{"class":125},[92,5835,106],{"class":98},[92,5837,5838,5840,5842,5844,5846,5849,5852,5854,5857,5859,5861,5864],{"class":94,"line":153},[92,5839,487],{"class":98},[92,5841,115],{"class":102},[92,5843,119],{"class":118},[92,5845,122],{"class":98},[92,5847,5848],{"class":125},"\"segmented\"",[92,5850,5851],{"class":118}," role",[92,5853,122],{"class":98},[92,5855,5856],{"class":125},"\"group\"",[92,5858,4962],{"class":118},[92,5860,122],{"class":98},[92,5862,5863],{"class":125},"\"选择档位\"",[92,5865,106],{"class":98},[92,5867,5868,5870],{"class":94,"line":163},[92,5869,1031],{"class":98},[92,5871,5872],{"class":102},"button\n",[92,5874,5875,5878,5880],{"class":94,"line":238},[92,5876,5877],{"class":118}," type",[92,5879,122],{"class":98},[92,5881,5882],{"class":125},"\"button\"\n",[92,5884,5885,5888,5890],{"class":94,"line":245},[92,5886,5887],{"class":118}," :class",[92,5889,122],{"class":98},[92,5891,5892],{"class":125},"\"{ active: tier === 'mobile' }\"\n",[92,5894,5895,5898,5900],{"class":94,"line":253},[92,5896,5897],{"class":118}," @click",[92,5899,122],{"class":98},[92,5901,5902],{"class":125},"\"width = 150\"\n",[92,5904,5905],{"class":94,"line":268},[92,5906,5907],{"class":98}," >\n",[92,5909,5910],{"class":94,"line":281},[92,5911,5912],{"class":98}," 手机\n",[92,5914,5915,5917,5920],{"class":94,"line":293},[92,5916,1079],{"class":98},[92,5918,5919],{"class":102},"button",[92,5921,106],{"class":98},[92,5923,5924,5926],{"class":94,"line":642},[92,5925,1031],{"class":98},[92,5927,5872],{"class":102},[92,5929,5930,5932,5934],{"class":94,"line":657},[92,5931,5877],{"class":118},[92,5933,122],{"class":98},[92,5935,5882],{"class":125},[92,5937,5938,5940,5942],{"class":94,"line":662},[92,5939,5887],{"class":118},[92,5941,122],{"class":98},[92,5943,5944],{"class":125},"\"{ active: tier === 'tablet' }\"\n",[92,5946,5947,5949,5951],{"class":94,"line":667},[92,5948,5897],{"class":118},[92,5950,122],{"class":98},[92,5952,5953],{"class":125},"\"width = 220\"\n",[92,5955,5956],{"class":94,"line":675},[92,5957,5907],{"class":98},[92,5959,5960],{"class":94,"line":688},[92,5961,5962],{"class":98}," 平板\n",[92,5964,5965,5967,5969],{"class":94,"line":701},[92,5966,1079],{"class":98},[92,5968,5919],{"class":102},[92,5970,106],{"class":98},[92,5972,5973,5975],{"class":94,"line":712},[92,5974,1031],{"class":98},[92,5976,5872],{"class":102},[92,5978,5979,5981,5983],{"class":94,"line":723},[92,5980,5877],{"class":118},[92,5982,122],{"class":98},[92,5984,5882],{"class":125},[92,5986,5987,5989,5991],{"class":94,"line":738},[92,5988,5887],{"class":118},[92,5990,122],{"class":98},[92,5992,5993],{"class":125},"\"{ active: tier === 'desktop' }\"\n",[92,5995,5996,5998,6000],{"class":94,"line":752},[92,5997,5897],{"class":118},[92,5999,122],{"class":98},[92,6001,6002],{"class":125},"\"width = 320\"\n",[92,6004,6005],{"class":94,"line":2860},[92,6006,5907],{"class":98},[92,6008,6009],{"class":94,"line":2868},[92,6010,6011],{"class":98}," 桌面\n",[92,6013,6014,6016,6018],{"class":94,"line":2891},[92,6015,1079],{"class":98},[92,6017,5919],{"class":102},[92,6019,106],{"class":98},[92,6021,6022,6024,6026],{"class":94,"line":2896},[92,6023,1088],{"class":98},[92,6025,115],{"class":102},[92,6027,106],{"class":98},[92,6029,6030],{"class":94,"line":2901},[92,6031,242],{"emptyLinePlaceholder":241},[92,6033,6034,6036,6038,6040,6042,6045],{"class":94,"line":2911},[92,6035,487],{"class":98},[92,6037,115],{"class":102},[92,6039,119],{"class":118},[92,6041,122],{"class":98},[92,6043,6044],{"class":125},"\"slider-row\"",[92,6046,106],{"class":98},[92,6048,6049,6051,6053,6056,6058],{"class":94,"line":2919},[92,6050,1031],{"class":98},[92,6052,92],{"class":102},[92,6054,6055],{"class":98},">宽度\u003C\u002F",[92,6057,92],{"class":102},[92,6059,106],{"class":98},[92,6061,6062,6064],{"class":94,"line":2927},[92,6063,1031],{"class":98},[92,6065,6066],{"class":102},"input\n",[92,6068,6069,6072,6074],{"class":94,"line":2937},[92,6070,6071],{"class":118}," v-model.number",[92,6073,122],{"class":98},[92,6075,6076],{"class":125},"\"width\"\n",[92,6078,6079,6081,6083],{"class":94,"line":2978},[92,6080,5877],{"class":118},[92,6082,122],{"class":98},[92,6084,6085],{"class":125},"\"range\"\n",[92,6087,6088,6091,6093],{"class":94,"line":2984},[92,6089,6090],{"class":118}," min",[92,6092,122],{"class":98},[92,6094,6095],{"class":125},"\"120\"\n",[92,6097,6098,6101,6103],{"class":94,"line":3433},[92,6099,6100],{"class":118}," max",[92,6102,122],{"class":98},[92,6104,6105],{"class":125},"\"400\"\n",[92,6107,6108,6111,6113],{"class":94,"line":3442},[92,6109,6110],{"class":118}," step",[92,6112,122],{"class":98},[92,6114,6115],{"class":125},"\"10\"\n",[92,6117,6118],{"class":94,"line":3457},[92,6119,5907],{"class":98},[92,6121,6122,6124,6126,6128,6130,6133,6136,6138],{"class":94,"line":3492},[92,6123,1031],{"class":98},[92,6125,92],{"class":102},[92,6127,119],{"class":118},[92,6129,122],{"class":98},[92,6131,6132],{"class":125},"\"width-readout\"",[92,6134,6135],{"class":98},">{{ width }}px\u003C\u002F",[92,6137,92],{"class":102},[92,6139,106],{"class":98},[92,6141,6142,6144,6146],{"class":94,"line":3519},[92,6143,1088],{"class":98},[92,6145,115],{"class":102},[92,6147,106],{"class":98},[92,6149,6150,6152,6154],{"class":94,"line":3548},[92,6151,507],{"class":98},[92,6153,115],{"class":102},[92,6155,106],{"class":98},[92,6157,6158],{"class":94,"line":3587},[92,6159,242],{"emptyLinePlaceholder":241},[92,6161,6162,6164],{"class":94,"line":3592},[92,6163,134],{"class":98},[92,6165,6166],{"class":102},"div\n",[92,6168,6169,6172,6174],{"class":94,"line":3599},[92,6170,6171],{"class":118}," class",[92,6173,122],{"class":98},[92,6175,6176],{"class":125},"\"viewport\"\n",[92,6178,6179,6182,6184],{"class":94,"line":3619},[92,6180,6181],{"class":118}," :class",[92,6183,122],{"class":98},[92,6185,6186],{"class":125},"\"`tier-${tier}`\"\n",[92,6188,6189,6192,6194],{"class":94,"line":3627},[92,6190,6191],{"class":118}," :style",[92,6193,122],{"class":98},[92,6195,6196],{"class":125},"\"{ width: `${width}px` }\"\n",[92,6198,6199],{"class":94,"line":3668},[92,6200,6201],{"class":98}," >\n",[92,6203,6204,6206,6209,6211,6213,6216],{"class":94,"line":3707},[92,6205,487],{"class":98},[92,6207,6208],{"class":102},"main",[92,6210,119],{"class":118},[92,6212,122],{"class":98},[92,6214,6215],{"class":125},"\"demo\"",[92,6217,106],{"class":98},[92,6219,6220,6222,6224,6226,6228,6231,6234,6236],{"class":94,"line":3735},[92,6221,1031],{"class":98},[92,6223,15],{"class":102},[92,6225,119],{"class":118},[92,6227,122],{"class":98},[92,6229,6230],{"class":125},"\"demo-label\"",[92,6232,6233],{"class":98},">预览\u003C\u002F",[92,6235,15],{"class":102},[92,6237,106],{"class":98},[92,6239,6240,6242,6244,6246,6248,6250,6252,6254,6257,6260],{"class":94,"line":3740},[92,6241,1031],{"class":98},[92,6243,15],{"class":102},[92,6245,119],{"class":118},[92,6247,122],{"class":98},[92,6249,4959],{"class":125},[92,6251,4962],{"class":118},[92,6253,122],{"class":98},[92,6255,6256],{"class":125},"\"随容器宽度变化的提示文字\"",[92,6258,6259],{"class":5445}," \u002F",[92,6261,106],{"class":98},[92,6263,6264,6266,6268,6270,6272,6274],{"class":94,"line":3745},[92,6265,1031],{"class":98},[92,6267,15],{"class":102},[92,6269,119],{"class":118},[92,6271,122],{"class":98},[92,6273,5424],{"class":125},[92,6275,106],{"class":98},[92,6277,6278,6280,6282,6284,6286,6288,6291,6293,6295,6297,6299,6301],{"class":94,"line":3752},[92,6279,1053],{"class":98},[92,6281,92],{"class":102},[92,6283,119],{"class":118},[92,6285,122],{"class":98},[92,6287,5439],{"class":125},[92,6289,6290],{"class":98},">窄容器，显示\u003C",[92,6292,1034],{"class":102},[92,6294,5453],{"class":98},[92,6296,1034],{"class":102},[92,6298,5458],{"class":98},[92,6300,92],{"class":102},[92,6302,106],{"class":98},[92,6304,6305,6307,6309,6311,6313,6315,6318,6320,6322,6324,6326,6328],{"class":94,"line":3771},[92,6306,1053],{"class":98},[92,6308,92],{"class":102},[92,6310,119],{"class":118},[92,6312,122],{"class":98},[92,6314,5475],{"class":125},[92,6316,6317],{"class":98},">中等容器，显示\u003C",[92,6319,1034],{"class":102},[92,6321,5483],{"class":98},[92,6323,1034],{"class":102},[92,6325,5458],{"class":98},[92,6327,92],{"class":102},[92,6329,106],{"class":98},[92,6331,6332,6334,6336,6338,6340,6342,6345,6347,6349,6351,6353,6355],{"class":94,"line":3778},[92,6333,1053],{"class":98},[92,6335,92],{"class":102},[92,6337,119],{"class":118},[92,6339,122],{"class":98},[92,6341,5504],{"class":125},[92,6343,6344],{"class":98},">宽容器，显示\u003C",[92,6346,1034],{"class":102},[92,6348,5512],{"class":98},[92,6350,1034],{"class":102},[92,6352,5458],{"class":98},[92,6354,92],{"class":102},[92,6356,106],{"class":98},[92,6358,6359,6361,6363],{"class":94,"line":3814},[92,6360,1079],{"class":98},[92,6362,15],{"class":102},[92,6364,106],{"class":98},[92,6366,6367,6369,6371],{"class":94,"line":3849},[92,6368,1088],{"class":98},[92,6370,6208],{"class":102},[92,6372,106],{"class":98},[92,6374,6375,6377,6379],{"class":94,"line":3866},[92,6376,507],{"class":98},[92,6378,115],{"class":102},[92,6380,106],{"class":98},[92,6382,6383,6385,6387],{"class":94,"line":3871},[92,6384,156],{"class":98},[92,6386,115],{"class":102},[92,6388,106],{"class":98},[92,6390,6391,6393,6395],{"class":94,"line":3876},[92,6392,166],{"class":98},[92,6394,3021],{"class":102},[92,6396,106],{"class":98},[92,6398,6399],{"class":94,"line":3885},[92,6400,242],{"emptyLinePlaceholder":241},[92,6402,6403,6405,6407,6409],{"class":94,"line":3892},[92,6404,99],{"class":98},[92,6406,4427],{"class":102},[92,6408,4430],{"class":118},[92,6410,106],{"class":98},[92,6412,6413,6415,6417,6419],{"class":94,"line":3899},[92,6414,4437],{"class":200},[92,6416,4440],{"class":98},[92,6418,4443],{"class":200},[92,6420,4446],{"class":125},[92,6422,6423],{"class":94,"line":3908},[92,6424,242],{"emptyLinePlaceholder":241},[92,6426,6427,6429,6432,6434,6436,6438,6440],{"class":94,"line":3947},[92,6428,4455],{"class":200},[92,6430,6431],{"class":190}," width",[92,6433,4461],{"class":200},[92,6435,4464],{"class":118},[92,6437,866],{"class":98},[92,6439,618],{"class":190},[92,6441,2837],{"class":98},[92,6443,6444],{"class":94,"line":3952},[92,6445,242],{"emptyLinePlaceholder":241},[92,6447,6448,6450,6453,6455,6457,6459,6461],{"class":94,"line":3957},[92,6449,4455],{"class":200},[92,6451,6452],{"class":190}," tier",[92,6454,4461],{"class":200},[92,6456,4487],{"class":118},[92,6458,4490],{"class":98},[92,6460,4493],{"class":200},[92,6462,185],{"class":98},[92,6464,6465,6468,6471,6474,6477,6479,6482],{"class":94,"line":3962},[92,6466,6467],{"class":200}," if",[92,6469,6470],{"class":98}," (width.value ",[92,6472,6473],{"class":200},">=",[92,6475,6476],{"class":190}," 260",[92,6478,2522],{"class":98},[92,6480,6481],{"class":200},"return",[92,6483,6484],{"class":125}," 'desktop'\n",[92,6486,6487,6489,6491,6493,6496,6498,6500],{"class":94,"line":3970},[92,6488,6467],{"class":200},[92,6490,6470],{"class":98},[92,6492,6473],{"class":200},[92,6494,6495],{"class":190}," 180",[92,6497,2522],{"class":98},[92,6499,6481],{"class":200},[92,6501,6502],{"class":125}," 'tablet'\n",[92,6504,6505,6508],{"class":94,"line":3982},[92,6506,6507],{"class":200}," return",[92,6509,6510],{"class":125}," 'mobile'\n",[92,6512,6513],{"class":94,"line":3996},[92,6514,6515],{"class":98},"})\n",[92,6517,6518,6520,6522],{"class":94,"line":4009},[92,6519,166],{"class":98},[92,6521,4427],{"class":102},[92,6523,106],{"class":98},[92,6525,6526],{"class":94,"line":4021},[92,6527,242],{"emptyLinePlaceholder":241},[92,6529,6530,6532,6534,6536],{"class":94,"line":4026},[92,6531,99],{"class":98},[92,6533,1425],{"class":102},[92,6535,3118],{"class":118},[92,6537,106],{"class":98},[92,6539,6541,6544],{"class":94,"line":6540},72,[92,6542,6543],{"class":118},".playground",[92,6545,185],{"class":98},[92,6547,6549,6551,6553,6555],{"class":94,"line":6548},73,[92,6550,4756],{"class":190},[92,6552,194],{"class":98},[92,6554,21],{"class":190},[92,6556,204],{"class":98},[92,6558,6560,6562,6564,6566,6568],{"class":94,"line":6559},74,[92,6561,191],{"class":190},[92,6563,194],{"class":98},[92,6565,650],{"class":190},[92,6567,263],{"class":200},[92,6569,204],{"class":98},[92,6571,6573,6575,6577,6579,6581],{"class":94,"line":6572},75,[92,6574,2590],{"class":190},[92,6576,194],{"class":98},[92,6578,3222],{"class":190},[92,6580,201],{"class":200},[92,6582,204],{"class":98},[92,6584,6586,6589,6591,6594,6596,6599,6601,6604,6606,6609],{"class":94,"line":6585},76,[92,6587,6588],{"class":190}," font-family",[92,6590,194],{"class":98},[92,6592,6593],{"class":190},"system-ui",[92,6595,2656],{"class":98},[92,6597,6598],{"class":190},"-apple-system",[92,6600,2656],{"class":98},[92,6602,6603],{"class":125},"\"Segoe UI\"",[92,6605,2656],{"class":98},[92,6607,6608],{"class":190},"sans-serif",[92,6610,204],{"class":98},[92,6612,6614],{"class":94,"line":6613},77,[92,6615,235],{"class":98},[92,6617,6619],{"class":94,"line":6618},78,[92,6620,242],{"emptyLinePlaceholder":241},[92,6622,6624,6626],{"class":94,"line":6623},79,[92,6625,4598],{"class":118},[92,6627,185],{"class":98},[92,6629,6631,6633,6635,6637],{"class":94,"line":6630},80,[92,6632,1742],{"class":190},[92,6634,194],{"class":98},[92,6636,4609],{"class":190},[92,6638,204],{"class":98},[92,6640,6642,6645,6647,6650],{"class":94,"line":6641},81,[92,6643,6644],{"class":190}," flex-direction",[92,6646,194],{"class":98},[92,6648,6649],{"class":190},"column",[92,6651,204],{"class":98},[92,6653,6655,6657,6659,6661,6663],{"class":94,"line":6654},82,[92,6656,4627],{"class":190},[92,6658,194],{"class":98},[92,6660,731],{"class":190},[92,6662,201],{"class":200},[92,6664,204],{"class":98},[92,6666,6668,6670,6672,6674,6676],{"class":94,"line":6667},83,[92,6669,4641],{"class":190},[92,6671,194],{"class":98},[92,6673,3222],{"class":190},[92,6675,201],{"class":200},[92,6677,204],{"class":98},[92,6679,6681],{"class":94,"line":6680},84,[92,6682,235],{"class":98},[92,6684,6686],{"class":94,"line":6685},85,[92,6687,242],{"emptyLinePlaceholder":241},[92,6689,6691,6694],{"class":94,"line":6690},86,[92,6692,6693],{"class":118},".segmented",[92,6695,185],{"class":98},[92,6697,6699,6701,6703,6705],{"class":94,"line":6698},87,[92,6700,1742],{"class":190},[92,6702,194],{"class":98},[92,6704,4609],{"class":190},[92,6706,204],{"class":98},[92,6708,6710,6712,6714,6716,6718],{"class":94,"line":6709},88,[92,6711,4627],{"class":190},[92,6713,194],{"class":98},[92,6715,2579],{"class":190},[92,6717,201],{"class":200},[92,6719,204],{"class":98},[92,6721,6723,6725,6727,6730,6732],{"class":94,"line":6722},89,[92,6724,2590],{"class":190},[92,6726,194],{"class":98},[92,6728,6729],{"class":190},"3",[92,6731,201],{"class":200},[92,6733,204],{"class":98},[92,6735,6737,6739,6741,6743,6745],{"class":94,"line":6736},90,[92,6738,2626],{"class":190},[92,6740,194],{"class":98},[92,6742,4632],{"class":190},[92,6744,201],{"class":200},[92,6746,204],{"class":98},[92,6748,6750,6752,6754,6757],{"class":94,"line":6749},91,[92,6751,2640],{"class":190},[92,6753,194],{"class":98},[92,6755,6756],{"class":190},"#e2e8f0",[92,6758,204],{"class":98},[92,6760,6762],{"class":94,"line":6761},92,[92,6763,235],{"class":98},[92,6765,6767],{"class":94,"line":6766},93,[92,6768,242],{"emptyLinePlaceholder":241},[92,6770,6772,6774,6777],{"class":94,"line":6771},94,[92,6773,6693],{"class":118},[92,6775,6776],{"class":102}," button",[92,6778,185],{"class":98},[92,6780,6782,6785,6787,6789],{"class":94,"line":6781},95,[92,6783,6784],{"class":190}," flex",[92,6786,194],{"class":98},[92,6788,2877],{"class":190},[92,6790,204],{"class":98},[92,6792,6794,6796,6798,6800],{"class":94,"line":6793},96,[92,6795,627],{"class":190},[92,6797,194],{"class":98},[92,6799,805],{"class":190},[92,6801,204],{"class":98},[92,6803,6805,6807,6809,6811,6813],{"class":94,"line":6804},97,[92,6806,2626],{"class":190},[92,6808,194],{"class":98},[92,6810,4716],{"class":190},[92,6812,201],{"class":200},[92,6814,204],{"class":98},[92,6816,6818,6820,6822,6825,6827,6829],{"class":94,"line":6817},98,[92,6819,2590],{"class":190},[92,6821,194],{"class":98},[92,6823,6824],{"class":190},"7",[92,6826,201],{"class":200},[92,6828,2690],{"class":190},[92,6830,204],{"class":98},[92,6832,6834,6836,6838,6840,6842],{"class":94,"line":6833},99,[92,6835,1837],{"class":190},[92,6837,194],{"class":98},[92,6839,3222],{"class":190},[92,6841,201],{"class":200},[92,6843,204],{"class":98},[92,6845,6847,6850,6852,6854],{"class":94,"line":6846},100,[92,6848,6849],{"class":190}," font-weight",[92,6851,194],{"class":98},[92,6853,197],{"class":190},[92,6855,204],{"class":98},[92,6857,6859,6861,6863,6866],{"class":94,"line":6858},101,[92,6860,1477],{"class":190},[92,6862,194],{"class":98},[92,6864,6865],{"class":190},"#64748b",[92,6867,204],{"class":98},[92,6869,6871,6873,6875,6878],{"class":94,"line":6870},102,[92,6872,2640],{"class":190},[92,6874,194],{"class":98},[92,6876,6877],{"class":190},"transparent",[92,6879,204],{"class":98},[92,6881,6883,6885,6887,6889],{"class":94,"line":6882},103,[92,6884,3393],{"class":190},[92,6886,194],{"class":98},[92,6888,3398],{"class":190},[92,6890,204],{"class":98},[92,6892,6894,6896,6898,6900,6903,6905,6907,6909,6911,6913,6915,6918,6920],{"class":94,"line":6893},104,[92,6895,3710],{"class":190},[92,6897,194],{"class":98},[92,6899,2435],{"class":5445},[92,6901,6902],{"class":190}," 0.15",[92,6904,2880],{"class":200},[92,6906,2656],{"class":98},[92,6908,2043],{"class":190},[92,6910,6902],{"class":190},[92,6912,2880],{"class":200},[92,6914,3724],{"class":98},[92,6916,6917],{"class":190},"0.15",[92,6919,2880],{"class":200},[92,6921,204],{"class":98},[92,6923,6925],{"class":94,"line":6924},105,[92,6926,235],{"class":98},[92,6928,6930],{"class":94,"line":6929},106,[92,6931,242],{"emptyLinePlaceholder":241},[92,6933,6935,6937,6939,6942],{"class":94,"line":6934},107,[92,6936,6693],{"class":118},[92,6938,6776],{"class":102},[92,6940,6941],{"class":118},":hover",[92,6943,185],{"class":98},[92,6945,6947,6949,6951,6954],{"class":94,"line":6946},108,[92,6948,1477],{"class":190},[92,6950,194],{"class":98},[92,6952,6953],{"class":190},"#334155",[92,6955,204],{"class":98},[92,6957,6959],{"class":94,"line":6958},109,[92,6960,235],{"class":98},[92,6962,6964],{"class":94,"line":6963},110,[92,6965,242],{"emptyLinePlaceholder":241},[92,6967,6969,6971,6973,6976],{"class":94,"line":6968},111,[92,6970,6693],{"class":118},[92,6972,6776],{"class":102},[92,6974,6975],{"class":118},".active",[92,6977,185],{"class":98},[92,6979,6981,6983,6985,6987],{"class":94,"line":6980},112,[92,6982,2640],{"class":190},[92,6984,194],{"class":98},[92,6986,2653],{"class":190},[92,6988,204],{"class":98},[92,6990,6992,6994,6996,6999],{"class":94,"line":6991},113,[92,6993,1477],{"class":190},[92,6995,194],{"class":98},[92,6997,6998],{"class":190},"#0f172a",[92,7000,204],{"class":98},[92,7002,7004,7006,7008,7010,7012,7014,7016,7018,7021,7023,7025,7028,7031,7033,7035],{"class":94,"line":7003},114,[92,7005,3622],{"class":190},[92,7007,194],{"class":98},[92,7009,869],{"class":190},[92,7011,2955],{"class":190},[92,7013,201],{"class":200},[92,7015,2785],{"class":190},[92,7017,201],{"class":200},[92,7019,7020],{"class":190}," rgb",[92,7022,866],{"class":98},[92,7024,3989],{"class":190},[92,7026,7027],{"class":190}," 23",[92,7029,7030],{"class":190}," 42",[92,7032,394],{"class":98},[92,7034,3702],{"class":190},[92,7036,875],{"class":98},[92,7038,7040],{"class":94,"line":7039},115,[92,7041,235],{"class":98},[92,7043,7045],{"class":94,"line":7044},116,[92,7046,242],{"emptyLinePlaceholder":241},[92,7048,7050,7053],{"class":94,"line":7049},117,[92,7051,7052],{"class":118},".slider-row",[92,7054,185],{"class":98},[92,7056,7058,7060,7062,7064],{"class":94,"line":7057},118,[92,7059,1742],{"class":190},[92,7061,194],{"class":98},[92,7063,4609],{"class":190},[92,7065,204],{"class":98},[92,7067,7069,7071,7073,7075],{"class":94,"line":7068},119,[92,7070,4616],{"class":190},[92,7072,194],{"class":98},[92,7074,3148],{"class":190},[92,7076,204],{"class":98},[92,7078,7080,7082,7084,7086,7088],{"class":94,"line":7079},120,[92,7081,4627],{"class":190},[92,7083,194],{"class":98},[92,7085,4632],{"class":190},[92,7087,201],{"class":200},[92,7089,204],{"class":98},[92,7091,7093,7095,7097,7100,7102],{"class":94,"line":7092},121,[92,7094,1837],{"class":190},[92,7096,194],{"class":98},[92,7098,7099],{"class":190},"11",[92,7101,201],{"class":200},[92,7103,204],{"class":98},[92,7105,7107,7109,7111,7113],{"class":94,"line":7106},122,[92,7108,1477],{"class":190},[92,7110,194],{"class":98},[92,7112,6865],{"class":190},[92,7114,204],{"class":98},[92,7116,7118],{"class":94,"line":7117},123,[92,7119,235],{"class":98},[92,7121,7123],{"class":94,"line":7122},124,[92,7124,242],{"emptyLinePlaceholder":241},[92,7126,7128,7130,7133],{"class":94,"line":7127},125,[92,7129,7052],{"class":118},[92,7131,7132],{"class":102}," input",[92,7134,185],{"class":98},[92,7136,7138,7140,7142,7144],{"class":94,"line":7137},126,[92,7139,6784],{"class":190},[92,7141,194],{"class":98},[92,7143,2877],{"class":190},[92,7145,204],{"class":98},[92,7147,7149,7152,7154,7157],{"class":94,"line":7148},127,[92,7150,7151],{"class":190}," accent-color",[92,7153,194],{"class":98},[92,7155,7156],{"class":190},"#0ea5e9",[92,7158,204],{"class":98},[92,7160,7162],{"class":94,"line":7161},128,[92,7163,235],{"class":98},[92,7165,7167],{"class":94,"line":7166},129,[92,7168,242],{"emptyLinePlaceholder":241},[92,7170,7172,7175],{"class":94,"line":7171},130,[92,7173,7174],{"class":118},".width-readout",[92,7176,185],{"class":98},[92,7178,7180,7183,7185,7187,7190],{"class":94,"line":7179},131,[92,7181,7182],{"class":190}," min-width",[92,7184,194],{"class":98},[92,7186,6729],{"class":190},[92,7188,7189],{"class":200},"rem",[92,7191,204],{"class":98},[92,7193,7195,7198,7200,7203],{"class":94,"line":7194},132,[92,7196,7197],{"class":190}," font-variant-numeric",[92,7199,194],{"class":98},[92,7201,7202],{"class":190},"tabular-nums",[92,7204,204],{"class":98},[92,7206,7208,7211,7213,7216],{"class":94,"line":7207},133,[92,7209,7210],{"class":190}," text-align",[92,7212,194],{"class":98},[92,7214,7215],{"class":190},"right",[92,7217,204],{"class":98},[92,7219,7221,7223,7225,7227],{"class":94,"line":7220},134,[92,7222,1477],{"class":190},[92,7224,194],{"class":98},[92,7226,6953],{"class":190},[92,7228,204],{"class":98},[92,7230,7232],{"class":94,"line":7231},135,[92,7233,235],{"class":98},[92,7235,7237],{"class":94,"line":7236},136,[92,7238,242],{"emptyLinePlaceholder":241},[92,7240,7242,7245],{"class":94,"line":7241},137,[92,7243,7244],{"class":118},".viewport",[92,7246,185],{"class":98},[92,7248,7250,7253,7255,7257,7259],{"class":94,"line":7249},138,[92,7251,7252],{"class":190}," max-width",[92,7254,194],{"class":98},[92,7256,650],{"class":190},[92,7258,263],{"class":200},[92,7260,204],{"class":98},[92,7262,7264,7266,7268,7270,7272,7274,7277],{"class":94,"line":7263},139,[92,7265,627],{"class":190},[92,7267,194],{"class":98},[92,7269,2877],{"class":190},[92,7271,201],{"class":200},[92,7273,637],{"class":190},[92,7275,7276],{"class":190}," #334155",[92,7278,204],{"class":98},[92,7280,7282,7284,7286,7288,7290],{"class":94,"line":7281},140,[92,7283,2626],{"class":190},[92,7285,194],{"class":98},[92,7287,731],{"class":190},[92,7289,201],{"class":200},[92,7291,204],{"class":98},[92,7293,7295,7297,7300,7302,7304,7306],{"class":94,"line":7294},141,[92,7296,3710],{"class":190},[92,7298,7299],{"class":98},": width ",[92,7301,6917],{"class":190},[92,7303,2880],{"class":200},[92,7305,3721],{"class":190},[92,7307,204],{"class":98},[92,7309,7311,7314,7316,7319],{"class":94,"line":7310},142,[92,7312,7313],{"class":190}," overflow",[92,7315,194],{"class":98},[92,7317,7318],{"class":190},"hidden",[92,7320,204],{"class":98},[92,7322,7324],{"class":94,"line":7323},143,[92,7325,235],{"class":98},[92,7327,7329],{"class":94,"line":7328},144,[92,7330,242],{"emptyLinePlaceholder":241},[92,7332,7334,7337],{"class":94,"line":7333},145,[92,7335,7336],{"class":118},".demo",[92,7338,185],{"class":98},[92,7340,7342,7344,7346,7348,7350],{"class":94,"line":7341},146,[92,7343,2590],{"class":190},[92,7345,194],{"class":98},[92,7347,4646],{"class":190},[92,7349,201],{"class":200},[92,7351,204],{"class":98},[92,7353,7355,7357,7359,7362],{"class":94,"line":7354},147,[92,7356,2640],{"class":190},[92,7358,194],{"class":98},[92,7360,7361],{"class":190},"#1e293b",[92,7363,204],{"class":98},[92,7365,7367,7369,7371,7373],{"class":94,"line":7366},148,[92,7368,1477],{"class":190},[92,7370,194],{"class":98},[92,7372,6756],{"class":190},[92,7374,204],{"class":98},[92,7376,7378],{"class":94,"line":7377},149,[92,7379,235],{"class":98},[92,7381,7383],{"class":94,"line":7382},150,[92,7384,242],{"emptyLinePlaceholder":241},[92,7386,7388,7391],{"class":94,"line":7387},151,[92,7389,7390],{"class":118},".demo-label",[92,7392,185],{"class":98},[92,7394,7396,7398,7400,7402,7404,7406,7408],{"class":94,"line":7395},152,[92,7397,3973],{"class":190},[92,7399,194],{"class":98},[92,7401,869],{"class":190},[92,7403,2690],{"class":190},[92,7405,3678],{"class":190},[92,7407,201],{"class":200},[92,7409,204],{"class":98},[92,7411,7413,7415,7417,7419,7421],{"class":94,"line":7412},153,[92,7414,1837],{"class":190},[92,7416,194],{"class":98},[92,7418,7099],{"class":190},[92,7420,201],{"class":200},[92,7422,204],{"class":98},[92,7424,7426,7428,7430,7432],{"class":94,"line":7425},154,[92,7427,6849],{"class":190},[92,7429,194],{"class":98},[92,7431,197],{"class":190},[92,7433,204],{"class":98},[92,7435,7437,7440,7442,7445,7447],{"class":94,"line":7436},155,[92,7438,7439],{"class":190}," letter-spacing",[92,7441,194],{"class":98},[92,7443,7444],{"class":190},"0.04",[92,7446,1034],{"class":200},[92,7448,204],{"class":98},[92,7450,7452,7455,7457,7460],{"class":94,"line":7451},156,[92,7453,7454],{"class":190}," text-transform",[92,7456,194],{"class":98},[92,7458,7459],{"class":190},"uppercase",[92,7461,204],{"class":98},[92,7463,7465,7467,7469,7471],{"class":94,"line":7464},157,[92,7466,1477],{"class":190},[92,7468,194],{"class":98},[92,7470,6865],{"class":190},[92,7472,204],{"class":98},[92,7474,7476],{"class":94,"line":7475},158,[92,7477,235],{"class":98},[92,7479,7481],{"class":94,"line":7480},159,[92,7482,242],{"emptyLinePlaceholder":241},[92,7484,7486,7488],{"class":94,"line":7485},160,[92,7487,5215],{"class":118},[92,7489,185],{"class":98},[92,7491,7493,7495,7497,7499,7501,7503,7505],{"class":94,"line":7492},161,[92,7494,3973],{"class":190},[92,7496,194],{"class":98},[92,7498,869],{"class":190},[92,7500,2690],{"class":190},[92,7502,3678],{"class":190},[92,7504,201],{"class":200},[92,7506,204],{"class":98},[92,7508,7510,7512,7514,7517,7519],{"class":94,"line":7509},162,[92,7511,1837],{"class":190},[92,7513,194],{"class":98},[92,7515,7516],{"class":190},"18",[92,7518,201],{"class":200},[92,7520,204],{"class":98},[92,7522,7524,7526,7528,7531],{"class":94,"line":7523},163,[92,7525,6849],{"class":190},[92,7527,194],{"class":98},[92,7529,7530],{"class":190},"700",[92,7532,204],{"class":98},[92,7534,7536,7538,7540,7543],{"class":94,"line":7535},164,[92,7537,3999],{"class":190},[92,7539,194],{"class":98},[92,7541,7542],{"class":190},"1.4",[92,7544,204],{"class":98},[92,7546,7548,7550,7552,7555],{"class":94,"line":7547},165,[92,7549,1477],{"class":190},[92,7551,194],{"class":98},[92,7553,7554],{"class":190},"#38bdf8",[92,7556,204],{"class":98},[92,7558,7560],{"class":94,"line":7559},166,[92,7561,235],{"class":98},[92,7563,7565],{"class":94,"line":7564},167,[92,7566,242],{"emptyLinePlaceholder":241},[92,7568,7570,7573,7576],{"class":94,"line":7569},168,[92,7571,7572],{"class":118},".tier-mobile",[92,7574,7575],{"class":118}," .responsive-text::before",[92,7577,185],{"class":98},[92,7579,7581,7583,7585,7587],{"class":94,"line":7580},169,[92,7582,5277],{"class":190},[92,7584,194],{"class":98},[92,7586,5282],{"class":125},[92,7588,204],{"class":98},[92,7590,7592],{"class":94,"line":7591},170,[92,7593,235],{"class":98},[92,7595,7597],{"class":94,"line":7596},171,[92,7598,242],{"emptyLinePlaceholder":241},[92,7600,7602,7605,7607],{"class":94,"line":7601},172,[92,7603,7604],{"class":118},".tier-tablet",[92,7606,7575],{"class":118},[92,7608,185],{"class":98},[92,7610,7612,7614,7616,7618],{"class":94,"line":7611},173,[92,7613,5277],{"class":190},[92,7615,194],{"class":98},[92,7617,5325],{"class":125},[92,7619,204],{"class":98},[92,7621,7623],{"class":94,"line":7622},174,[92,7624,235],{"class":98},[92,7626,7628],{"class":94,"line":7627},175,[92,7629,242],{"emptyLinePlaceholder":241},[92,7631,7633,7636,7638],{"class":94,"line":7632},176,[92,7634,7635],{"class":118},".tier-desktop",[92,7637,7575],{"class":118},[92,7639,185],{"class":98},[92,7641,7643,7645,7647,7649],{"class":94,"line":7642},177,[92,7644,5277],{"class":190},[92,7646,194],{"class":98},[92,7648,5370],{"class":125},[92,7650,204],{"class":98},[92,7652,7654],{"class":94,"line":7653},178,[92,7655,235],{"class":98},[92,7657,7659],{"class":94,"line":7658},179,[92,7660,242],{"emptyLinePlaceholder":241},[92,7662,7664,7666],{"class":94,"line":7663},180,[92,7665,5541],{"class":118},[92,7667,185],{"class":98},[92,7669,7671,7673,7675,7677],{"class":94,"line":7670},181,[92,7672,3973],{"class":190},[92,7674,194],{"class":98},[92,7676,869],{"class":190},[92,7678,204],{"class":98},[92,7680,7682,7684,7686,7689,7691],{"class":94,"line":7681},182,[92,7683,1837],{"class":190},[92,7685,194],{"class":98},[92,7687,7688],{"class":190},"13",[92,7690,201],{"class":200},[92,7692,204],{"class":98},[92,7694,7696,7698,7700,7703],{"class":94,"line":7695},183,[92,7697,3999],{"class":190},[92,7699,194],{"class":98},[92,7701,7702],{"class":190},"1.6",[92,7704,204],{"class":98},[92,7706,7708,7710,7712,7715],{"class":94,"line":7707},184,[92,7709,1477],{"class":190},[92,7711,194],{"class":98},[92,7713,7714],{"class":190},"#cbd5e1",[92,7716,204],{"class":98},[92,7718,7720],{"class":94,"line":7719},185,[92,7721,235],{"class":98},[92,7723,7725],{"class":94,"line":7724},186,[92,7726,242],{"emptyLinePlaceholder":241},[92,7728,7730,7732,7735],{"class":94,"line":7729},187,[92,7731,5541],{"class":118},[92,7733,7734],{"class":102}," span",[92,7736,185],{"class":98},[92,7738,7740,7742,7744,7746],{"class":94,"line":7739},188,[92,7741,1742],{"class":190},[92,7743,194],{"class":98},[92,7745,805],{"class":190},[92,7747,204],{"class":98},[92,7749,7751],{"class":94,"line":7750},189,[92,7752,235],{"class":98},[92,7754,7756],{"class":94,"line":7755},190,[92,7757,242],{"emptyLinePlaceholder":241},[92,7759,7761,7763,7766,7769],{"class":94,"line":7760},191,[92,7762,7572],{"class":118},[92,7764,7765],{"class":118}," .responsive-spans",[92,7767,7768],{"class":118}," .is-mobile",[92,7770,185],{"class":98},[92,7772,7774,7776,7778,7780],{"class":94,"line":7773},192,[92,7775,1742],{"class":190},[92,7777,194],{"class":98},[92,7779,5585],{"class":190},[92,7781,204],{"class":98},[92,7783,7785],{"class":94,"line":7784},193,[92,7786,235],{"class":98},[92,7788,7790],{"class":94,"line":7789},194,[92,7791,242],{"emptyLinePlaceholder":241},[92,7793,7795,7797,7799,7802],{"class":94,"line":7794},195,[92,7796,7604],{"class":118},[92,7798,7765],{"class":118},[92,7800,7801],{"class":118}," .is-tablet",[92,7803,185],{"class":98},[92,7805,7807,7809,7811,7813],{"class":94,"line":7806},196,[92,7808,1742],{"class":190},[92,7810,194],{"class":98},[92,7812,5585],{"class":190},[92,7814,204],{"class":98},[92,7816,7818],{"class":94,"line":7817},197,[92,7819,235],{"class":98},[92,7821,7823],{"class":94,"line":7822},198,[92,7824,242],{"emptyLinePlaceholder":241},[92,7826,7828,7830,7832,7835],{"class":94,"line":7827},199,[92,7829,7635],{"class":118},[92,7831,7765],{"class":118},[92,7833,7834],{"class":118}," .is-desktop",[92,7836,185],{"class":98},[92,7838,7840,7842,7844,7846],{"class":94,"line":7839},200,[92,7841,1742],{"class":190},[92,7843,194],{"class":98},[92,7845,5585],{"class":190},[92,7847,204],{"class":98},[92,7849,7851],{"class":94,"line":7850},201,[92,7852,235],{"class":98},[92,7854,7856],{"class":94,"line":7855},202,[92,7857,242],{"emptyLinePlaceholder":241},[92,7859,7861,7863,7866],{"class":94,"line":7860},203,[92,7862,5541],{"class":118},[92,7864,7865],{"class":102}," em",[92,7867,185],{"class":98},[92,7869,7871,7874,7876,7879],{"class":94,"line":7870},204,[92,7872,7873],{"class":190}," font-style",[92,7875,194],{"class":98},[92,7877,7878],{"class":190},"normal",[92,7880,204],{"class":98},[92,7882,7884,7886,7888,7891],{"class":94,"line":7883},205,[92,7885,1477],{"class":190},[92,7887,194],{"class":98},[92,7889,7890],{"class":190},"#f472b6",[92,7892,204],{"class":98},[92,7894,7896,7898,7900,7903],{"class":94,"line":7895},206,[92,7897,6849],{"class":190},[92,7899,194],{"class":98},[92,7901,7902],{"class":190},"600",[92,7904,204],{"class":98},[92,7906,7908],{"class":94,"line":7907},207,[92,7909,235],{"class":98},[92,7911,7913,7915,7917],{"class":94,"line":7912},208,[92,7914,166],{"class":98},[92,7916,1425],{"class":102},[92,7918,106],{"class":98},[15,7920,7921,7922,7924],{},"将上文代码接入你的页面并部署后，拖窄浏览器窗口，或使用开发者工具的设备模拟，即可验证真实视口的 ",[19,7923,5297],{}," 断点效果。",[78,7926,1381],{"id":1381},[342,7928,7929,7942,7950],{},[345,7930,7931,7932,7935,7936,7938,7939,7941],{},"用 ",[19,7933,7934],{},"@media (min-width)"," 按断点覆盖 ",[19,7937,4940],{}," 或切换 ",[19,7940,1638],{},"，即可实现无 JS 的响应式文案",[345,7943,7944,7945,7947,7948],{},"纯字符串标语用 ",[19,7946,4982],{}," + mixin 最省事；富文本用多段 ",[19,7949,92],{},[345,7951,7952,7953,7955],{},"伪元素内容对读屏不友好，务必补充 ",[19,7954,4978],{}," 或选用真实 DOM 方案",[1425,7957,7958],{},"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":7960},[7961,7962,7963,7964,7965],{"id":4933,"depth":109,"text":4934},{"id":5399,"depth":109,"text":5400},{"id":5717,"depth":109,"text":5717},{"id":5773,"depth":109,"text":5773},{"id":1381,"depth":109,"text":1381},"2026-05-12","不依赖 JavaScript，用媒体查询配合伪元素 content 或多段 span 显示\u002F隐藏，随视口宽度自动切换文案。",{},"\u002Fblog\u002Fcss-responsive-text",{"title":4900,"description":7967},"blog\u002Fcss-responsive-text",[7973,7974,7975],"responsive","media-queries","pseudo-element","DeEdWkyNdRu8JUinAkU4L1nVNQUpWqvb9ku3Q6Mc1CY",{"id":7978,"title":7979,"body":7980,"category":175,"date":9234,"description":9235,"draft":1440,"extension":1441,"meta":9236,"navigation":241,"path":9237,"seo":9238,"stem":9239,"tags":9240,"__hash__":9242},"blog\u002Fblog\u002Fcss-flex-demo.md","Flexbox 布局实战",{"type":8,"value":7981,"toc":9229},[7982,7985,7992,7995,8020,8094,8096,8104,9220,9223,9226],[11,7983,7979],{"id":7984},"flexbox-布局实战",[15,7986,7987,7988,7991],{},"Flexbox 是前端布局的基础能力之一。下面演示如何用 ",[19,7989,7990],{},"display: flex"," 让内容在容器中居中。",[78,7993,7994],{"id":7994},"核心属性",[342,7996,7997,8002,8008,8014],{},[345,7998,7999,8001],{},[19,8000,7990],{}," 启用弹性布局",[345,8003,8004,8007],{},[19,8005,8006],{},"justify-content"," 控制主轴对齐",[345,8009,8010,8013],{},[19,8011,8012],{},"align-items"," 控制交叉轴对齐",[345,8015,8016,8019],{},[19,8017,8018],{},"gap"," 设置子项间距",[2470,8021,8023],{"lang":175,"title":8022},"基础 Flex 居中",[83,8024,8026],{"className":173,"code":8025,"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,8027,8028,8034,8044,8055,8065,8078,8090],{"__ignoreMap":88},[92,8029,8030,8032],{"class":94,"line":95},[92,8031,182],{"class":118},[92,8033,185],{"class":98},[92,8035,8036,8038,8040,8042],{"class":94,"line":109},[92,8037,1742],{"class":190},[92,8039,194],{"class":98},[92,8041,4609],{"class":190},[92,8043,204],{"class":98},[92,8045,8046,8049,8051,8053],{"class":94,"line":131},[92,8047,8048],{"class":190}," justify-content",[92,8050,194],{"class":98},[92,8052,3148],{"class":190},[92,8054,204],{"class":98},[92,8056,8057,8059,8061,8063],{"class":94,"line":153},[92,8058,4616],{"class":190},[92,8060,194],{"class":98},[92,8062,3148],{"class":190},[92,8064,204],{"class":98},[92,8066,8067,8069,8071,8074,8076],{"class":94,"line":163},[92,8068,3155],{"class":190},[92,8070,194],{"class":98},[92,8072,8073],{"class":190},"200",[92,8075,201],{"class":200},[92,8077,204],{"class":98},[92,8079,8080,8082,8084,8086,8088],{"class":94,"line":238},[92,8081,4627],{"class":190},[92,8083,194],{"class":98},[92,8085,3222],{"class":190},[92,8087,201],{"class":200},[92,8089,204],{"class":98},[92,8091,8092],{"class":94,"line":245},[92,8093,235],{"class":98},[78,8095,5773],{"id":5773},[15,8097,8098,8099,814,8101,8103],{},"修改 ",[19,8100,8006],{},[19,8102,8012],{},"，观察卡片排列变化：",[3005,8105,8107],{"title":8106},"Flex 卡片布局",[83,8108,8110],{"className":3010,"code":8109,"language":3012,"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,8111,8112,8120,8135,8149,8157,8162,8177,8197,8217,8237,8257,8277,8297,8305,8313,8321,8326,8341,8359,8377,8395,8413,8433,8441,8449,8457,8463,8472,8481,8485,8514,8519,8527,8535,8543,8551,8555,8565,8576,8580,8598,8615,8640,8648,8652,8662,8669,8681,8693,8703,8713,8717,8721,8727,8737,8749,8761,8773,8777,8781,8787,8797,8807,8819,8831,8842,8846,8850,8856,8873,8885,8901,8912,8924,8928,8932,8938,8948,8959,8971,8981,8993,9006,9018,9030,9041,9058,9062,9066,9072,9087,9100,9113,9129,9141,9166,9176,9186,9198,9208,9212],{"__ignoreMap":88},[92,8113,8114,8116,8118],{"class":94,"line":95},[92,8115,99],{"class":98},[92,8117,3021],{"class":102},[92,8119,106],{"class":98},[92,8121,8122,8124,8126,8128,8130,8133],{"class":94,"line":109},[92,8123,112],{"class":98},[92,8125,115],{"class":102},[92,8127,119],{"class":118},[92,8129,122],{"class":98},[92,8131,8132],{"class":125},"\"wrapper\"",[92,8134,106],{"class":98},[92,8136,8137,8139,8141,8143,8145,8147],{"class":94,"line":131},[92,8138,134],{"class":98},[92,8140,115],{"class":102},[92,8142,119],{"class":118},[92,8144,122],{"class":98},[92,8146,4263],{"class":125},[92,8148,106],{"class":98},[92,8150,8151,8153,8155],{"class":94,"line":153},[92,8152,487],{"class":98},[92,8154,4256],{"class":102},[92,8156,106],{"class":98},[92,8158,8159],{"class":94,"line":163},[92,8160,8161],{"class":98}," justify-content\n",[92,8163,8164,8166,8168,8170,8172,8175],{"class":94,"line":238},[92,8165,1031],{"class":98},[92,8167,4277],{"class":102},[92,8169,4280],{"class":118},[92,8171,122],{"class":98},[92,8173,8174],{"class":125},"\"justify\"",[92,8176,106],{"class":98},[92,8178,8179,8181,8183,8185,8187,8190,8193,8195],{"class":94,"line":245},[92,8180,1053],{"class":98},[92,8182,4294],{"class":102},[92,8184,4297],{"class":118},[92,8186,122],{"class":98},[92,8188,8189],{"class":125},"\"flex-start\"",[92,8191,8192],{"class":98},">flex-start\u003C\u002F",[92,8194,4294],{"class":102},[92,8196,106],{"class":98},[92,8198,8199,8201,8203,8205,8207,8210,8213,8215],{"class":94,"line":253},[92,8200,1053],{"class":98},[92,8202,4294],{"class":102},[92,8204,4297],{"class":118},[92,8206,122],{"class":98},[92,8208,8209],{"class":125},"\"center\"",[92,8211,8212],{"class":98},">center\u003C\u002F",[92,8214,4294],{"class":102},[92,8216,106],{"class":98},[92,8218,8219,8221,8223,8225,8227,8230,8233,8235],{"class":94,"line":268},[92,8220,1053],{"class":98},[92,8222,4294],{"class":102},[92,8224,4297],{"class":118},[92,8226,122],{"class":98},[92,8228,8229],{"class":125},"\"flex-end\"",[92,8231,8232],{"class":98},">flex-end\u003C\u002F",[92,8234,4294],{"class":102},[92,8236,106],{"class":98},[92,8238,8239,8241,8243,8245,8247,8250,8253,8255],{"class":94,"line":281},[92,8240,1053],{"class":98},[92,8242,4294],{"class":102},[92,8244,4297],{"class":118},[92,8246,122],{"class":98},[92,8248,8249],{"class":125},"\"space-between\"",[92,8251,8252],{"class":98},">space-between\u003C\u002F",[92,8254,4294],{"class":102},[92,8256,106],{"class":98},[92,8258,8259,8261,8263,8265,8267,8270,8273,8275],{"class":94,"line":293},[92,8260,1053],{"class":98},[92,8262,4294],{"class":102},[92,8264,4297],{"class":118},[92,8266,122],{"class":98},[92,8268,8269],{"class":125},"\"space-around\"",[92,8271,8272],{"class":98},">space-around\u003C\u002F",[92,8274,4294],{"class":102},[92,8276,106],{"class":98},[92,8278,8279,8281,8283,8285,8287,8290,8293,8295],{"class":94,"line":642},[92,8280,1053],{"class":98},[92,8282,4294],{"class":102},[92,8284,4297],{"class":118},[92,8286,122],{"class":98},[92,8288,8289],{"class":125},"\"space-evenly\"",[92,8291,8292],{"class":98},">space-evenly\u003C\u002F",[92,8294,4294],{"class":102},[92,8296,106],{"class":98},[92,8298,8299,8301,8303],{"class":94,"line":657},[92,8300,1079],{"class":98},[92,8302,4277],{"class":102},[92,8304,106],{"class":98},[92,8306,8307,8309,8311],{"class":94,"line":662},[92,8308,1088],{"class":98},[92,8310,4256],{"class":102},[92,8312,106],{"class":98},[92,8314,8315,8317,8319],{"class":94,"line":667},[92,8316,487],{"class":98},[92,8318,4256],{"class":102},[92,8320,106],{"class":98},[92,8322,8323],{"class":94,"line":675},[92,8324,8325],{"class":98}," align-items\n",[92,8327,8328,8330,8332,8334,8336,8339],{"class":94,"line":688},[92,8329,1031],{"class":98},[92,8331,4277],{"class":102},[92,8333,4280],{"class":118},[92,8335,122],{"class":98},[92,8337,8338],{"class":125},"\"align\"",[92,8340,106],{"class":98},[92,8342,8343,8345,8347,8349,8351,8353,8355,8357],{"class":94,"line":701},[92,8344,1053],{"class":98},[92,8346,4294],{"class":102},[92,8348,4297],{"class":118},[92,8350,122],{"class":98},[92,8352,4341],{"class":125},[92,8354,4344],{"class":98},[92,8356,4294],{"class":102},[92,8358,106],{"class":98},[92,8360,8361,8363,8365,8367,8369,8371,8373,8375],{"class":94,"line":712},[92,8362,1053],{"class":98},[92,8364,4294],{"class":102},[92,8366,4297],{"class":118},[92,8368,122],{"class":98},[92,8370,8189],{"class":125},[92,8372,8192],{"class":98},[92,8374,4294],{"class":102},[92,8376,106],{"class":98},[92,8378,8379,8381,8383,8385,8387,8389,8391,8393],{"class":94,"line":723},[92,8380,1053],{"class":98},[92,8382,4294],{"class":102},[92,8384,4297],{"class":118},[92,8386,122],{"class":98},[92,8388,8209],{"class":125},[92,8390,8212],{"class":98},[92,8392,4294],{"class":102},[92,8394,106],{"class":98},[92,8396,8397,8399,8401,8403,8405,8407,8409,8411],{"class":94,"line":738},[92,8398,1053],{"class":98},[92,8400,4294],{"class":102},[92,8402,4297],{"class":118},[92,8404,122],{"class":98},[92,8406,8229],{"class":125},[92,8408,8232],{"class":98},[92,8410,4294],{"class":102},[92,8412,106],{"class":98},[92,8414,8415,8417,8419,8421,8423,8426,8429,8431],{"class":94,"line":752},[92,8416,1053],{"class":98},[92,8418,4294],{"class":102},[92,8420,4297],{"class":118},[92,8422,122],{"class":98},[92,8424,8425],{"class":125},"\"baseline\"",[92,8427,8428],{"class":98},">baseline\u003C\u002F",[92,8430,4294],{"class":102},[92,8432,106],{"class":98},[92,8434,8435,8437,8439],{"class":94,"line":2860},[92,8436,1079],{"class":98},[92,8438,4277],{"class":102},[92,8440,106],{"class":98},[92,8442,8443,8445,8447],{"class":94,"line":2868},[92,8444,1088],{"class":98},[92,8446,4256],{"class":102},[92,8448,106],{"class":98},[92,8450,8451,8453,8455],{"class":94,"line":2891},[92,8452,507],{"class":98},[92,8454,115],{"class":102},[92,8456,106],{"class":98},[92,8458,8459,8461],{"class":94,"line":2896},[92,8460,134],{"class":98},[92,8462,6166],{"class":102},[92,8464,8465,8467,8469],{"class":94,"line":2901},[92,8466,6171],{"class":118},[92,8468,122],{"class":98},[92,8470,8471],{"class":125},"\"container\"\n",[92,8473,8474,8476,8478],{"class":94,"line":2911},[92,8475,6191],{"class":118},[92,8477,122],{"class":98},[92,8479,8480],{"class":125},"\"{ justifyContent: justify, alignItems: align }\"\n",[92,8482,8483],{"class":94,"line":2919},[92,8484,6201],{"class":98},[92,8486,8487,8489,8491,8494,8496,8499,8502,8504,8506,8508,8510,8512],{"class":94,"line":2927},[92,8488,487],{"class":98},[92,8490,115],{"class":102},[92,8492,8493],{"class":118}," v-for",[92,8495,122],{"class":98},[92,8497,8498],{"class":125},"\"item in cards\"",[92,8500,8501],{"class":118}," :key",[92,8503,122],{"class":98},[92,8505,143],{"class":125},[92,8507,119],{"class":118},[92,8509,122],{"class":98},[92,8511,3051],{"class":125},[92,8513,106],{"class":98},[92,8515,8516],{"class":94,"line":2937},[92,8517,8518],{"class":98}," Card {{ item }}\n",[92,8520,8521,8523,8525],{"class":94,"line":2978},[92,8522,1088],{"class":98},[92,8524,115],{"class":102},[92,8526,106],{"class":98},[92,8528,8529,8531,8533],{"class":94,"line":2984},[92,8530,507],{"class":98},[92,8532,115],{"class":102},[92,8534,106],{"class":98},[92,8536,8537,8539,8541],{"class":94,"line":3433},[92,8538,156],{"class":98},[92,8540,115],{"class":102},[92,8542,106],{"class":98},[92,8544,8545,8547,8549],{"class":94,"line":3442},[92,8546,166],{"class":98},[92,8548,3021],{"class":102},[92,8550,106],{"class":98},[92,8552,8553],{"class":94,"line":3457},[92,8554,242],{"emptyLinePlaceholder":241},[92,8556,8557,8559,8561,8563],{"class":94,"line":3492},[92,8558,99],{"class":98},[92,8560,4427],{"class":102},[92,8562,4430],{"class":118},[92,8564,106],{"class":98},[92,8566,8567,8569,8572,8574],{"class":94,"line":3519},[92,8568,4437],{"class":200},[92,8570,8571],{"class":98}," { ref } ",[92,8573,4443],{"class":200},[92,8575,4446],{"class":125},[92,8577,8578],{"class":94,"line":3548},[92,8579,242],{"emptyLinePlaceholder":241},[92,8581,8582,8584,8587,8589,8591,8593,8596],{"class":94,"line":3587},[92,8583,4455],{"class":200},[92,8585,8586],{"class":190}," justify",[92,8588,4461],{"class":200},[92,8590,4464],{"class":118},[92,8592,866],{"class":98},[92,8594,8595],{"class":125},"'center'",[92,8597,2837],{"class":98},[92,8599,8600,8602,8605,8607,8609,8611,8613],{"class":94,"line":3592},[92,8601,4455],{"class":200},[92,8603,8604],{"class":190}," align",[92,8606,4461],{"class":200},[92,8608,4464],{"class":118},[92,8610,866],{"class":98},[92,8612,8595],{"class":125},[92,8614,2837],{"class":98},[92,8616,8617,8619,8622,8624,8627,8629,8631,8633,8635,8637],{"class":94,"line":3599},[92,8618,4455],{"class":200},[92,8620,8621],{"class":190}," cards",[92,8623,4461],{"class":200},[92,8625,8626],{"class":98}," [",[92,8628,2877],{"class":190},[92,8630,2656],{"class":98},[92,8632,2579],{"class":190},[92,8634,2656],{"class":98},[92,8636,6729],{"class":190},[92,8638,8639],{"class":98},"]\n",[92,8641,8642,8644,8646],{"class":94,"line":3619},[92,8643,166],{"class":98},[92,8645,4427],{"class":102},[92,8647,106],{"class":98},[92,8649,8650],{"class":94,"line":3627},[92,8651,242],{"emptyLinePlaceholder":241},[92,8653,8654,8656,8658,8660],{"class":94,"line":3668},[92,8655,99],{"class":98},[92,8657,1425],{"class":102},[92,8659,3118],{"class":118},[92,8661,106],{"class":98},[92,8663,8664,8667],{"class":94,"line":3707},[92,8665,8666],{"class":118},".wrapper",[92,8668,185],{"class":98},[92,8670,8671,8673,8675,8677,8679],{"class":94,"line":3735},[92,8672,191],{"class":190},[92,8674,194],{"class":98},[92,8676,650],{"class":190},[92,8678,263],{"class":200},[92,8680,204],{"class":98},[92,8682,8683,8685,8687,8689,8691],{"class":94,"line":3740},[92,8684,2590],{"class":190},[92,8686,194],{"class":98},[92,8688,3222],{"class":190},[92,8690,201],{"class":200},[92,8692,204],{"class":98},[92,8694,8695,8697,8699,8701],{"class":94,"line":3745},[92,8696,6588],{"class":190},[92,8698,194],{"class":98},[92,8700,6608],{"class":190},[92,8702,204],{"class":98},[92,8704,8705,8707,8709,8711],{"class":94,"line":3752},[92,8706,4756],{"class":190},[92,8708,194],{"class":98},[92,8710,21],{"class":190},[92,8712,204],{"class":98},[92,8714,8715],{"class":94,"line":3771},[92,8716,235],{"class":98},[92,8718,8719],{"class":94,"line":3778},[92,8720,242],{"emptyLinePlaceholder":241},[92,8722,8723,8725],{"class":94,"line":3814},[92,8724,4598],{"class":118},[92,8726,185],{"class":98},[92,8728,8729,8731,8733,8735],{"class":94,"line":3849},[92,8730,1742],{"class":190},[92,8732,194],{"class":98},[92,8734,4609],{"class":190},[92,8736,204],{"class":98},[92,8738,8739,8742,8744,8747],{"class":94,"line":3866},[92,8740,8741],{"class":190}," flex-wrap",[92,8743,194],{"class":98},[92,8745,8746],{"class":190},"wrap",[92,8748,204],{"class":98},[92,8750,8751,8753,8755,8757,8759],{"class":94,"line":3871},[92,8752,4627],{"class":190},[92,8754,194],{"class":98},[92,8756,4632],{"class":190},[92,8758,201],{"class":200},[92,8760,204],{"class":98},[92,8762,8763,8765,8767,8769,8771],{"class":94,"line":3876},[92,8764,4641],{"class":190},[92,8766,194],{"class":98},[92,8768,3222],{"class":190},[92,8770,201],{"class":200},[92,8772,204],{"class":98},[92,8774,8775],{"class":94,"line":3885},[92,8776,235],{"class":98},[92,8778,8779],{"class":94,"line":3892},[92,8780,242],{"emptyLinePlaceholder":241},[92,8782,8783,8785],{"class":94,"line":3899},[92,8784,4256],{"class":102},[92,8786,185],{"class":98},[92,8788,8789,8791,8793,8795],{"class":94,"line":3908},[92,8790,1742],{"class":190},[92,8792,194],{"class":98},[92,8794,4609],{"class":190},[92,8796,204],{"class":98},[92,8798,8799,8801,8803,8805],{"class":94,"line":3947},[92,8800,6644],{"class":190},[92,8802,194],{"class":98},[92,8804,6649],{"class":190},[92,8806,204],{"class":98},[92,8808,8809,8811,8813,8815,8817],{"class":94,"line":3952},[92,8810,4627],{"class":190},[92,8812,194],{"class":98},[92,8814,4699],{"class":190},[92,8816,201],{"class":200},[92,8818,204],{"class":98},[92,8820,8821,8823,8825,8827,8829],{"class":94,"line":3957},[92,8822,1837],{"class":190},[92,8824,194],{"class":98},[92,8826,7099],{"class":190},[92,8828,201],{"class":200},[92,8830,204],{"class":98},[92,8832,8833,8835,8837,8840],{"class":94,"line":3962},[92,8834,1477],{"class":190},[92,8836,194],{"class":98},[92,8838,8839],{"class":190},"#475569",[92,8841,204],{"class":98},[92,8843,8844],{"class":94,"line":3970},[92,8845,235],{"class":98},[92,8847,8848],{"class":94,"line":3982},[92,8849,242],{"emptyLinePlaceholder":241},[92,8851,8852,8854],{"class":94,"line":3996},[92,8853,4277],{"class":102},[92,8855,185],{"class":98},[92,8857,8858,8860,8862,8864,8866,8868,8871],{"class":94,"line":4009},[92,8859,627],{"class":190},[92,8861,194],{"class":98},[92,8863,2877],{"class":190},[92,8865,201],{"class":200},[92,8867,637],{"class":190},[92,8869,8870],{"class":190}," #cbd5e1",[92,8872,204],{"class":98},[92,8874,8875,8877,8879,8881,8883],{"class":94,"line":4021},[92,8876,2626],{"class":190},[92,8878,194],{"class":98},[92,8880,4716],{"class":190},[92,8882,201],{"class":200},[92,8884,204],{"class":98},[92,8886,8887,8889,8891,8893,8895,8897,8899],{"class":94,"line":4026},[92,8888,2590],{"class":190},[92,8890,194],{"class":98},[92,8892,4716],{"class":190},[92,8894,201],{"class":200},[92,8896,3819],{"class":190},[92,8898,201],{"class":200},[92,8900,204],{"class":98},[92,8902,8903,8905,8907,8910],{"class":94,"line":6540},[92,8904,2640],{"class":190},[92,8906,194],{"class":98},[92,8908,8909],{"class":190},"white",[92,8911,204],{"class":98},[92,8913,8914,8916,8918,8920,8922],{"class":94,"line":6548},[92,8915,1837],{"class":190},[92,8917,194],{"class":98},[92,8919,7099],{"class":190},[92,8921,201],{"class":200},[92,8923,204],{"class":98},[92,8925,8926],{"class":94,"line":6559},[92,8927,235],{"class":98},[92,8929,8930],{"class":94,"line":6572},[92,8931,242],{"emptyLinePlaceholder":241},[92,8933,8934,8936],{"class":94,"line":6585},[92,8935,182],{"class":118},[92,8937,185],{"class":98},[92,8939,8940,8942,8944,8946],{"class":94,"line":6613},[92,8941,1742],{"class":190},[92,8943,194],{"class":98},[92,8945,4609],{"class":190},[92,8947,204],{"class":98},[92,8949,8950,8952,8954,8957],{"class":94,"line":6618},[92,8951,8741],{"class":190},[92,8953,194],{"class":98},[92,8955,8956],{"class":190},"nowrap",[92,8958,204],{"class":98},[92,8960,8961,8963,8965,8967,8969],{"class":94,"line":6623},[92,8962,191],{"class":190},[92,8964,194],{"class":98},[92,8966,650],{"class":190},[92,8968,263],{"class":200},[92,8970,204],{"class":98},[92,8972,8973,8975,8977,8979],{"class":94,"line":6630},[92,8974,4756],{"class":190},[92,8976,194],{"class":98},[92,8978,21],{"class":190},[92,8980,204],{"class":98},[92,8982,8983,8985,8987,8989,8991],{"class":94,"line":6641},[92,8984,4627],{"class":190},[92,8986,194],{"class":98},[92,8988,4632],{"class":190},[92,8990,201],{"class":200},[92,8992,204],{"class":98},[92,8994,8995,8997,8999,9002,9004],{"class":94,"line":6654},[92,8996,3155],{"class":190},[92,8998,194],{"class":98},[92,9000,9001],{"class":190},"160",[92,9003,201],{"class":200},[92,9005,204],{"class":98},[92,9007,9008,9010,9012,9014,9016],{"class":94,"line":6667},[92,9009,2590],{"class":190},[92,9011,194],{"class":98},[92,9013,3222],{"class":190},[92,9015,201],{"class":200},[92,9017,204],{"class":98},[92,9019,9020,9022,9024,9026,9028],{"class":94,"line":6680},[92,9021,2626],{"class":190},[92,9023,194],{"class":98},[92,9025,3222],{"class":190},[92,9027,201],{"class":200},[92,9029,204],{"class":98},[92,9031,9032,9034,9036,9039],{"class":94,"line":6685},[92,9033,2640],{"class":190},[92,9035,194],{"class":98},[92,9037,9038],{"class":190},"#f8fafc",[92,9040,204],{"class":98},[92,9042,9043,9045,9047,9049,9051,9054,9056],{"class":94,"line":6690},[92,9044,627],{"class":190},[92,9046,194],{"class":98},[92,9048,2877],{"class":190},[92,9050,201],{"class":200},[92,9052,9053],{"class":190}," dashed",[92,9055,8870],{"class":190},[92,9057,204],{"class":98},[92,9059,9060],{"class":94,"line":6698},[92,9061,235],{"class":98},[92,9063,9064],{"class":94,"line":6709},[92,9065,242],{"emptyLinePlaceholder":241},[92,9067,9068,9070],{"class":94,"line":6722},[92,9069,2482],{"class":118},[92,9071,185],{"class":98},[92,9073,9074,9076,9078,9080,9082,9085],{"class":94,"line":6736},[92,9075,6784],{"class":190},[92,9077,194],{"class":98},[92,9079,869],{"class":190},[92,9081,2690],{"class":190},[92,9083,9084],{"class":190}," auto",[92,9086,204],{"class":98},[92,9088,9089,9091,9093,9096,9098],{"class":94,"line":6749},[92,9090,7182],{"class":190},[92,9092,194],{"class":98},[92,9094,9095],{"class":190},"56",[92,9097,201],{"class":200},[92,9099,204],{"class":98},[92,9101,9102,9104,9106,9109,9111],{"class":94,"line":6761},[92,9103,3155],{"class":190},[92,9105,194],{"class":98},[92,9107,9108],{"class":190},"48",[92,9110,201],{"class":200},[92,9112,204],{"class":98},[92,9114,9115,9117,9119,9121,9123,9125,9127],{"class":94,"line":6766},[92,9116,2590],{"class":190},[92,9118,194],{"class":98},[92,9120,3222],{"class":190},[92,9122,201],{"class":200},[92,9124,3633],{"class":190},[92,9126,201],{"class":200},[92,9128,204],{"class":98},[92,9130,9131,9133,9135,9137,9139],{"class":94,"line":6771},[92,9132,2626],{"class":190},[92,9134,194],{"class":98},[92,9136,731],{"class":190},[92,9138,201],{"class":200},[92,9140,204],{"class":98},[92,9142,9143,9145,9147,9149,9151,9153,9155,9157,9159,9161,9164],{"class":94,"line":6781},[92,9144,2640],{"class":190},[92,9146,194],{"class":98},[92,9148,3185],{"class":190},[92,9150,866],{"class":98},[92,9152,3190],{"class":190},[92,9154,872],{"class":200},[92,9156,2656],{"class":98},[92,9158,7554],{"class":190},[92,9160,2656],{"class":98},[92,9162,9163],{"class":190},"#6366f1",[92,9165,875],{"class":98},[92,9167,9168,9170,9172,9174],{"class":94,"line":6793},[92,9169,1477],{"class":190},[92,9171,194],{"class":98},[92,9173,8909],{"class":190},[92,9175,204],{"class":98},[92,9177,9178,9180,9182,9184],{"class":94,"line":6804},[92,9179,6849],{"class":190},[92,9181,194],{"class":98},[92,9183,7902],{"class":190},[92,9185,204],{"class":98},[92,9187,9188,9190,9192,9194,9196],{"class":94,"line":6817},[92,9189,1837],{"class":190},[92,9191,194],{"class":98},[92,9193,3222],{"class":190},[92,9195,201],{"class":200},[92,9197,204],{"class":98},[92,9199,9200,9202,9204,9206],{"class":94,"line":6833},[92,9201,7210],{"class":190},[92,9203,194],{"class":98},[92,9205,3148],{"class":190},[92,9207,204],{"class":98},[92,9209,9210],{"class":94,"line":6846},[92,9211,235],{"class":98},[92,9213,9214,9216,9218],{"class":94,"line":6858},[92,9215,166],{"class":98},[92,9217,1425],{"class":102},[92,9219,106],{"class":98},[78,9221,9222],{"id":9222},"实践建议",[15,9224,9225],{},"优先用 Flex 处理一维布局（行或列），二维复杂布局再考虑 Grid。",[1425,9227,9228],{},"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":9230},[9231,9232,9233],{"id":7994,"depth":109,"text":7994},{"id":5773,"depth":109,"text":5773},{"id":9222,"depth":109,"text":9222},"2026-05-01","用 Flex 实现常见的卡片居中布局，并通过代码 playground 直观感受对齐方式的变化。",{},"\u002Fblog\u002Fcss-flex-demo",{"title":7979,"description":9235},"blog\u002Fcss-flex-demo",[9241,1447],"flexbox","FnnXjd4YEFKibrBnFfTHzIEl4dfl0sklSB-hk3DMocU",1782309644794]