[{"data":1,"prerenderedAt":1450},["ShallowReactive",2],{"blog-css-containing-block":3},{"id":4,"title":5,"body":6,"category":174,"date":1437,"description":1438,"draft":1439,"extension":1440,"meta":1441,"navigation":240,"path":1442,"seo":1443,"stem":1444,"tags":1445,"__hash__":1449},"blog\u002Fblog\u002Fcss-containing-block.md","你不知道的 CSS 之包含块",{"type":7,"value":8,"toc":1427},"minimark",[9,13,35,42,57,63,76,81,170,295,313,319,325,328,340,360,364,436,441,527,754,771,777,781,791,833,842,879,887,893,902,908,911,1116,1119,1174,1193,1196,1246,1260,1284,1290,1340,1364,1372,1378,1381,1423],[10,11,5],"h1",{"id":12},"你不知道的-css-之包含块",[14,15,16,17,21,22,26,27,30,31,34],"p",{},"盒模型、",[18,19,20],"code",{},"border-box"," 很多人熟，但 ",[23,24,25],"strong",{},"包含块（containing block）"," 一听就懵——它平时「看不见」，却决定 ",[18,28,29],{},"width: 50%","、",[18,32,33],{},"left: 10px"," 相对谁算。",[14,36,37],{},[38,39],"img",{"alt":40,"src":41},"包含块决定元素的尺寸与百分比参照区域","\u002Fdemos\u002Fcontaining-block\u002Fconcept.svg",[14,43,44,45,48,49,56],{},"简单说：",[23,46,47],{},"元素的尺寸与位置（以及百分比值的计算）受包含块影响。"," 规范见 ",[50,51,55],"a",{"href":52,"rel":53},"https:\u002F\u002Fdrafts.csswg.org\u002Fcss2\u002F#containing-block-details",[54],"nofollow","CSS2 containing block","。",[14,58,59],{},[38,60],{"alt":61,"src":62},"不同定位方式下的包含块规则","\u002Fdemos\u002Fcontaining-block\u002Frules-overview.svg",[14,64,65,66,70,71,75],{},"在 ",[50,67,69],{"href":68},"\u002Fblog\u002Fbrowser-rendering-pipeline","浏览器布局阶段","，几何信息就是结合 DOM、Computed Style 与包含块算出来的；",[50,72,74],{"href":73},"\u002Fblog\u002Fcss-property-calculation","样式计算"," 里算不定的百分比宽高，到这一步才定稿。",[77,78,80],"h2",{"id":79},"最简例子50-相对谁","最简例子：50% 相对谁？",[82,83,88],"pre",{"className":84,"code":85,"language":86,"meta":87,"style":87},"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","",[18,89,90,106,128,150,160],{"__ignoreMap":87},[91,92,95,99,103],"span",{"class":93,"line":94},"line",1,[91,96,98],{"class":97},"sVt8B","\u003C",[91,100,102],{"class":101},"s9eBZ","body",[91,104,105],{"class":97},">\n",[91,107,109,112,115,119,122,126],{"class":93,"line":108},2,[91,110,111],{"class":97},"  \u003C",[91,113,114],{"class":101},"div",[91,116,118],{"class":117},"sScJk"," class",[91,120,121],{"class":97},"=",[91,123,125],{"class":124},"sZZnC","\"container\"",[91,127,105],{"class":97},[91,129,131,134,136,138,140,143,146,148],{"class":93,"line":130},3,[91,132,133],{"class":97},"    \u003C",[91,135,114],{"class":101},[91,137,118],{"class":117},[91,139,121],{"class":97},[91,141,142],{"class":124},"\"item\"",[91,144,145],{"class":97},">\u003C\u002F",[91,147,114],{"class":101},[91,149,105],{"class":97},[91,151,153,156,158],{"class":93,"line":152},4,[91,154,155],{"class":97},"  \u003C\u002F",[91,157,114],{"class":101},[91,159,105],{"class":97},[91,161,163,166,168],{"class":93,"line":162},5,[91,164,165],{"class":97},"\u003C\u002F",[91,167,102],{"class":101},[91,169,105],{"class":97},[82,171,175],{"className":172,"code":173,"language":174,"meta":87,"style":87},"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",[18,176,177,185,204,218,230,235,242,250,265,278,290],{"__ignoreMap":87},[91,178,179,182],{"class":93,"line":94},[91,180,181],{"class":117},".container",[91,183,184],{"class":97}," {\n",[91,186,187,191,194,197,201],{"class":93,"line":108},[91,188,190],{"class":189},"sj4cs","  width",[91,192,193],{"class":97},": ",[91,195,196],{"class":189},"500",[91,198,200],{"class":199},"szBVR","px",[91,202,203],{"class":97},";\n",[91,205,206,209,211,214,216],{"class":93,"line":130},[91,207,208],{"class":189},"  height",[91,210,193],{"class":97},[91,212,213],{"class":189},"300",[91,215,200],{"class":199},[91,217,203],{"class":97},[91,219,220,223,225,228],{"class":93,"line":152},[91,221,222],{"class":189},"  background-color",[91,224,193],{"class":97},[91,226,227],{"class":189},"skyblue",[91,229,203],{"class":97},[91,231,232],{"class":93,"line":162},[91,233,234],{"class":97},"}\n",[91,236,238],{"class":93,"line":237},6,[91,239,241],{"emptyLinePlaceholder":240},true,"\n",[91,243,245,248],{"class":93,"line":244},7,[91,246,247],{"class":117},".item",[91,249,184],{"class":97},[91,251,253,255,257,260,263],{"class":93,"line":252},8,[91,254,190],{"class":189},[91,256,193],{"class":97},[91,258,259],{"class":189},"50",[91,261,262],{"class":199},"%",[91,264,203],{"class":97},[91,266,268,270,272,274,276],{"class":93,"line":267},9,[91,269,208],{"class":189},[91,271,193],{"class":97},[91,273,259],{"class":189},[91,275,262],{"class":199},[91,277,203],{"class":97},[91,279,281,283,285,288],{"class":93,"line":280},10,[91,282,222],{"class":189},[91,284,193],{"class":97},[91,286,287],{"class":189},"red",[91,289,203],{"class":97},[91,291,293],{"class":93,"line":292},11,[91,294,234],{"class":97},[14,296,297,300,301,304,305,308,309,312],{},[18,298,299],{},"item"," 是 250×150？对。但更准确的说法是：",[23,302,303],{},"百分比相对包含块","。这里包含块是最近祖先块容器的 ",[23,306,307],{},"内容区（content box）","——即 ",[18,310,311],{},"container"," 的内容区 500×300，50% 才是 250×150。",[14,314,315],{},[38,316],{"alt":317,"src":318},"50% 相对 container 内容区，结果为 250×150","\u002Fdemos\u002Fcontaining-block\u002Fpercent-demo.svg",[14,320,321,322,56],{},"平时说「相对父元素宽高」多半没错，但严谨表述是 ",[23,323,324],{},"相对包含块",[77,326,327],{"id":327},"初始包含块",[14,329,330,335,336,339],{},[23,331,332,333],{},"根元素 ",[18,334,86],{}," 的包含块叫 ",[23,337,338],{},"初始包含块（initial containing block）","：",[341,342,343,350,353],"ul",{},[344,345,346,347],"li",{},"大小通常等于 ",[23,348,349],{},"视口（viewport）",[344,351,352],{},"原点在视口左上角",[344,354,355,356,359],{},"是 ",[23,357,358],{},"绝对定位、固定定位"," 的重要参照",[77,361,363],{"id":362},"非根元素怎么找包含块","非根元素：怎么找包含块？",[365,366,367,382],"table",{},[368,369,370],"thead",{},[371,372,373,379],"tr",{},[374,375,376],"th",{},[18,377,378],{},"position",[374,380,381],{},"包含块由谁建立",[383,384,385,408,418],"tbody",{},[371,386,387,397],{},[388,389,390,393,394],"td",{},[18,391,392],{},"static"," \u002F ",[18,395,396],{},"relative",[388,398,399,400,403,404,407],{},"最近 ",[23,401,402],{},"块容器"," 的 ",[23,405,406],{},"内容区"," 边缘",[371,409,410,415],{},[388,411,412],{},[18,413,414],{},"fixed",[388,416,417],{},"视口（初始包含块）",[371,419,420,425],{},[388,421,422],{},[18,423,424],{},"absolute",[388,426,399,427,429,430,432,433,407],{},[18,428,378],{}," 不为 ",[18,431,392],{}," 的祖先的 ",[23,434,435],{},"padding 区",[437,438,440],"h3",{"id":439},"absolute-不看父元素看定位祖先","absolute 不看「父元素」，看「定位祖先」",[82,442,444],{"className":84,"code":443,"language":86,"meta":87,"style":87},"\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",[18,445,446,454,468,482,502,511,519],{"__ignoreMap":87},[91,447,448,450,452],{"class":93,"line":94},[91,449,98],{"class":97},[91,451,102],{"class":101},[91,453,105],{"class":97},[91,455,456,458,460,462,464,466],{"class":93,"line":108},[91,457,111],{"class":97},[91,459,114],{"class":101},[91,461,118],{"class":117},[91,463,121],{"class":97},[91,465,125],{"class":124},[91,467,105],{"class":97},[91,469,470,472,474,476,478,480],{"class":93,"line":130},[91,471,133],{"class":97},[91,473,114],{"class":101},[91,475,118],{"class":117},[91,477,121],{"class":97},[91,479,142],{"class":124},[91,481,105],{"class":97},[91,483,484,487,489,491,493,496,498,500],{"class":93,"line":152},[91,485,486],{"class":97},"      \u003C",[91,488,114],{"class":101},[91,490,118],{"class":117},[91,492,121],{"class":97},[91,494,495],{"class":124},"\"item2\"",[91,497,145],{"class":97},[91,499,114],{"class":101},[91,501,105],{"class":97},[91,503,504,507,509],{"class":93,"line":162},[91,505,506],{"class":97},"    \u003C\u002F",[91,508,114],{"class":101},[91,510,105],{"class":97},[91,512,513,515,517],{"class":93,"line":237},[91,514,155],{"class":97},[91,516,114],{"class":101},[91,518,105],{"class":97},[91,520,521,523,525],{"class":93,"line":244},[91,522,165],{"class":97},[91,524,102],{"class":101},[91,526,105],{"class":97},[82,528,530],{"className":172,"code":529,"language":174,"meta":87,"style":87},".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",[18,531,532,538,550,562,572,583,587,591,597,609,622,639,654,659,664,672,685,698,709,720,735,749],{"__ignoreMap":87},[91,533,534,536],{"class":93,"line":94},[91,535,181],{"class":117},[91,537,184],{"class":97},[91,539,540,542,544,546,548],{"class":93,"line":108},[91,541,190],{"class":189},[91,543,193],{"class":97},[91,545,196],{"class":189},[91,547,200],{"class":199},[91,549,203],{"class":97},[91,551,552,554,556,558,560],{"class":93,"line":130},[91,553,208],{"class":189},[91,555,193],{"class":97},[91,557,213],{"class":189},[91,559,200],{"class":199},[91,561,203],{"class":97},[91,563,564,566,568,570],{"class":93,"line":152},[91,565,222],{"class":189},[91,567,193],{"class":97},[91,569,227],{"class":189},[91,571,203],{"class":97},[91,573,574,577,579,581],{"class":93,"line":162},[91,575,576],{"class":189},"  position",[91,578,193],{"class":97},[91,580,396],{"class":189},[91,582,203],{"class":97},[91,584,585],{"class":93,"line":237},[91,586,234],{"class":97},[91,588,589],{"class":93,"line":244},[91,590,241],{"emptyLinePlaceholder":240},[91,592,593,595],{"class":93,"line":252},[91,594,247],{"class":117},[91,596,184],{"class":97},[91,598,599,601,603,605,607],{"class":93,"line":267},[91,600,190],{"class":189},[91,602,193],{"class":97},[91,604,213],{"class":189},[91,606,200],{"class":199},[91,608,203],{"class":97},[91,610,611,613,615,618,620],{"class":93,"line":280},[91,612,208],{"class":189},[91,614,193],{"class":97},[91,616,617],{"class":189},"150",[91,619,200],{"class":199},[91,621,203],{"class":97},[91,623,624,627,629,632,634,637],{"class":93,"line":292},[91,625,626],{"class":189},"  border",[91,628,193],{"class":97},[91,630,631],{"class":189},"5",[91,633,200],{"class":199},[91,635,636],{"class":189}," solid",[91,638,203],{"class":97},[91,640,642,645,647,650,652],{"class":93,"line":641},12,[91,643,644],{"class":189},"  margin-left",[91,646,193],{"class":97},[91,648,649],{"class":189},"100",[91,651,200],{"class":199},[91,653,203],{"class":97},[91,655,657],{"class":93,"line":656},13,[91,658,234],{"class":97},[91,660,662],{"class":93,"line":661},14,[91,663,241],{"emptyLinePlaceholder":240},[91,665,667,670],{"class":93,"line":666},15,[91,668,669],{"class":117},".item2",[91,671,184],{"class":97},[91,673,675,677,679,681,683],{"class":93,"line":674},16,[91,676,190],{"class":189},[91,678,193],{"class":97},[91,680,649],{"class":189},[91,682,200],{"class":199},[91,684,203],{"class":97},[91,686,688,690,692,694,696],{"class":93,"line":687},17,[91,689,208],{"class":189},[91,691,193],{"class":97},[91,693,649],{"class":189},[91,695,200],{"class":199},[91,697,203],{"class":97},[91,699,701,703,705,707],{"class":93,"line":700},18,[91,702,222],{"class":189},[91,704,193],{"class":97},[91,706,287],{"class":189},[91,708,203],{"class":97},[91,710,712,714,716,718],{"class":93,"line":711},19,[91,713,576],{"class":189},[91,715,193],{"class":97},[91,717,424],{"class":189},[91,719,203],{"class":97},[91,721,723,726,728,731,733],{"class":93,"line":722},20,[91,724,725],{"class":189},"  left",[91,727,193],{"class":97},[91,729,730],{"class":189},"10",[91,732,200],{"class":199},[91,734,203],{"class":97},[91,736,738,741,743,745,747],{"class":93,"line":737},21,[91,739,740],{"class":189},"  top",[91,742,193],{"class":97},[91,744,730],{"class":189},[91,746,200],{"class":199},[91,748,203],{"class":97},[91,750,752],{"class":93,"line":751},22,[91,753,234],{"class":97},[14,755,756,759,760,764,765,768,769,339],{},[18,757,758],{},"item2"," 的包含块是 ",[23,761,762],{},[18,763,311],{},"（有 ",[18,766,767],{},"position: relative","），不是中间的 ",[18,770,299],{},[14,772,773],{},[38,774],{"alt":775,"src":776},"item2 的包含块是 container，而非中间的 item","\u002Fdemos\u002Fcontaining-block\u002Fabsolute-demo.svg",[437,778,780],{"id":779},"transform-也会建立包含块","transform 也会建立包含块",[14,782,783,393,785,787,788,339],{},[18,784,424],{},[18,786,414],{}," 的包含块还可能是满足下列条件的 ",[23,789,790],{},"最近祖先的 padding 区",[341,792,793,805,816,828],{},[344,794,795,393,798,801,802],{},[18,796,797],{},"transform",[18,799,800],{},"perspective"," 不是 ",[18,803,804],{},"none",[344,806,807,810,811,813,814],{},[18,808,809],{},"will-change"," 为 ",[18,812,797],{}," 或 ",[18,815,800],{},[344,817,818,801,821,823,824,827],{},[18,819,820],{},"filter",[18,822,804],{},"（或 Firefox 下 ",[18,825,826],{},"will-change: filter","）",[344,829,830],{},[18,831,832],{},"contain: paint",[14,834,835,836,838,839,339],{},"给 ",[18,837,299],{}," 加上 ",[18,840,841],{},"transform: rotate(0deg)",[82,843,845],{"className":172,"code":844,"language":174,"meta":87,"style":87},".item {\n  transform: rotate(0deg);\n}\n",[18,846,847,853,875],{"__ignoreMap":87},[91,848,849,851],{"class":93,"line":94},[91,850,247],{"class":117},[91,852,184],{"class":97},[91,854,855,858,860,863,866,869,872],{"class":93,"line":108},[91,856,857],{"class":189},"  transform",[91,859,193],{"class":97},[91,861,862],{"class":189},"rotate",[91,864,865],{"class":97},"(",[91,867,868],{"class":189},"0",[91,870,871],{"class":199},"deg",[91,873,874],{"class":97},");\n",[91,876,877],{"class":93,"line":130},[91,878,234],{"class":97},[14,880,881,882,886],{},"包含块变为 ",[23,883,884],{},[18,885,299],{}," 自身：",[14,888,889],{},[38,890],{"alt":891,"src":892},"transform 在 item 上建立新的包含块","\u002Fdemos\u002Fcontaining-block\u002Ftransform-demo.svg",[14,894,895,896,898,899,56],{},"这也是 ",[18,897,797],{}," 常和层叠、合成一起讨论的原因——不仅影响包含块，还影响 ",[50,900,901],{"href":68},"分层与绘制",[14,903,904],{},[38,905],{"alt":906,"src":907},"包含块知识要点一览","\u002Fdemos\u002Fcontaining-block\u002Fsummary-map.svg",[77,909,910],{"id":910},"规范例题",[82,912,914],{"className":84,"code":913,"language":86,"meta":87,"style":87},"\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",[18,915,916,924,933,947,955,971,986,1006,1021,1026,1043,1048,1069,1074,1083,1092,1100,1108],{"__ignoreMap":87},[91,917,918,920,922],{"class":93,"line":94},[91,919,98],{"class":97},[91,921,86],{"class":101},[91,923,105],{"class":97},[91,925,926,928,931],{"class":93,"line":108},[91,927,111],{"class":97},[91,929,930],{"class":101},"head",[91,932,105],{"class":97},[91,934,935,937,940,943,945],{"class":93,"line":130},[91,936,133],{"class":97},[91,938,939],{"class":101},"title",[91,941,942],{"class":97},">Illustration of containing blocks\u003C\u002F",[91,944,939],{"class":101},[91,946,105],{"class":97},[91,948,949,951,953],{"class":93,"line":152},[91,950,155],{"class":97},[91,952,930],{"class":101},[91,954,105],{"class":97},[91,956,957,959,961,964,966,969],{"class":93,"line":162},[91,958,111],{"class":97},[91,960,102],{"class":101},[91,962,963],{"class":117}," id",[91,965,121],{"class":97},[91,967,968],{"class":124},"\"body\"",[91,970,105],{"class":97},[91,972,973,975,977,979,981,984],{"class":93,"line":237},[91,974,133],{"class":97},[91,976,114],{"class":101},[91,978,963],{"class":117},[91,980,121],{"class":97},[91,982,983],{"class":124},"\"div1\"",[91,985,105],{"class":97},[91,987,988,990,992,994,996,999,1002,1004],{"class":93,"line":244},[91,989,486],{"class":97},[91,991,14],{"class":101},[91,993,963],{"class":117},[91,995,121],{"class":97},[91,997,998],{"class":124},"\"p1\"",[91,1000,1001],{"class":97},">This is text in the first paragraph...\u003C\u002F",[91,1003,14],{"class":101},[91,1005,105],{"class":97},[91,1007,1008,1010,1012,1014,1016,1019],{"class":93,"line":252},[91,1009,486],{"class":97},[91,1011,14],{"class":101},[91,1013,963],{"class":117},[91,1015,121],{"class":97},[91,1017,1018],{"class":124},"\"p2\"",[91,1020,105],{"class":97},[91,1022,1023],{"class":93,"line":267},[91,1024,1025],{"class":97},"        This is text\n",[91,1027,1028,1031,1034,1036,1038,1041],{"class":93,"line":280},[91,1029,1030],{"class":97},"        \u003C",[91,1032,1033],{"class":101},"em",[91,1035,963],{"class":117},[91,1037,121],{"class":97},[91,1039,1040],{"class":124},"\"em1\"",[91,1042,105],{"class":97},[91,1044,1045],{"class":93,"line":292},[91,1046,1047],{"class":97},"          in the\n",[91,1049,1050,1053,1055,1057,1059,1062,1065,1067],{"class":93,"line":641},[91,1051,1052],{"class":97},"          \u003C",[91,1054,23],{"class":101},[91,1056,963],{"class":117},[91,1058,121],{"class":97},[91,1060,1061],{"class":124},"\"strong1\"",[91,1063,1064],{"class":97},">second\u003C\u002F",[91,1066,23],{"class":101},[91,1068,105],{"class":97},[91,1070,1071],{"class":93,"line":656},[91,1072,1073],{"class":97},"          paragraph.\n",[91,1075,1076,1079,1081],{"class":93,"line":661},[91,1077,1078],{"class":97},"        \u003C\u002F",[91,1080,1033],{"class":101},[91,1082,105],{"class":97},[91,1084,1085,1088,1090],{"class":93,"line":666},[91,1086,1087],{"class":97},"      \u003C\u002F",[91,1089,14],{"class":101},[91,1091,105],{"class":97},[91,1093,1094,1096,1098],{"class":93,"line":674},[91,1095,506],{"class":97},[91,1097,114],{"class":101},[91,1099,105],{"class":97},[91,1101,1102,1104,1106],{"class":93,"line":687},[91,1103,155],{"class":97},[91,1105,102],{"class":101},[91,1107,105],{"class":97},[91,1109,1110,1112,1114],{"class":93,"line":700},[91,1111,165],{"class":97},[91,1113,86],{"class":101},[91,1115,105],{"class":97},[14,1117,1118],{},"无额外 CSS 时：",[365,1120,1121,1131],{},[368,1122,1123],{},[371,1124,1125,1128],{},[374,1126,1127],{},"元素",[374,1129,1130],{},"包含块",[383,1132,1133,1139,1145,1152,1159,1167],{},[371,1134,1135,1137],{},[388,1136,86],{},[388,1138,327],{},[371,1140,1141,1143],{},[388,1142,102],{},[388,1144,86],{},[371,1146,1147,1150],{},[388,1148,1149],{},"div1",[388,1151,102],{},[371,1153,1154,1157],{},[388,1155,1156],{},"p1、p2",[388,1158,1149],{},[371,1160,1161,1164],{},[388,1162,1163],{},"em1",[388,1165,1166],{},"p2",[371,1168,1169,1172],{},[388,1170,1171],{},"strong1",[388,1173,1166],{},[14,1175,1176,759,1178,1180,1181,1183,1184,801,1186,1188,1189,1192],{},[18,1177,1171],{},[18,1179,1166],{}," 而非 ",[18,1182,1163],{},"，因为 ",[18,1185,1163],{},[23,1187,402],{},"；规则要求 ",[23,1190,1191],{},"最近的块容器"," 的内容区。",[14,1194,1195],{},"加上：",[82,1197,1199],{"className":172,"code":1198,"language":174,"meta":87,"style":87},"#div1 {\n  position: absolute;\n  left: 50px;\n  top: 50px;\n}\n",[18,1200,1201,1208,1218,1230,1242],{"__ignoreMap":87},[91,1202,1203,1206],{"class":93,"line":94},[91,1204,1205],{"class":117},"#div1",[91,1207,184],{"class":97},[91,1209,1210,1212,1214,1216],{"class":93,"line":108},[91,1211,576],{"class":189},[91,1213,193],{"class":97},[91,1215,424],{"class":189},[91,1217,203],{"class":97},[91,1219,1220,1222,1224,1226,1228],{"class":93,"line":130},[91,1221,725],{"class":189},[91,1223,193],{"class":97},[91,1225,259],{"class":189},[91,1227,200],{"class":199},[91,1229,203],{"class":97},[91,1231,1232,1234,1236,1238,1240],{"class":93,"line":152},[91,1233,740],{"class":189},[91,1235,193],{"class":97},[91,1237,259],{"class":189},[91,1239,200],{"class":199},[91,1241,203],{"class":97},[91,1243,1244],{"class":93,"line":162},[91,1245,234],{"class":97},[14,1247,1248,1250,1251,1253,1254,1256,1257,1259],{},[18,1249,1149],{}," 的包含块变为 ",[23,1252,327],{},"（",[18,1255,102],{}," 仍是 ",[18,1258,392],{},"，向上找不到定位祖先）：",[365,1261,1262,1270],{},[368,1263,1264],{},[371,1265,1266,1268],{},[374,1267,1127],{},[374,1269,1130],{},[383,1271,1272,1278],{},[371,1273,1274,1276],{},[388,1275,1149],{},[388,1277,327],{},[371,1279,1280,1282],{},[388,1281,1156],{},[388,1283,1149],{},[14,1285,1286,1287,1289],{},"再给 ",[18,1288,1163],{}," 定位：",[82,1291,1293],{"className":172,"code":1292,"language":174,"meta":87,"style":87},"#em1 {\n  position: absolute;\n  left: 100px;\n  top: 100px;\n}\n",[18,1294,1295,1302,1312,1324,1336],{"__ignoreMap":87},[91,1296,1297,1300],{"class":93,"line":94},[91,1298,1299],{"class":117},"#em1",[91,1301,184],{"class":97},[91,1303,1304,1306,1308,1310],{"class":93,"line":108},[91,1305,576],{"class":189},[91,1307,193],{"class":97},[91,1309,424],{"class":189},[91,1311,203],{"class":97},[91,1313,1314,1316,1318,1320,1322],{"class":93,"line":130},[91,1315,725],{"class":189},[91,1317,193],{"class":97},[91,1319,649],{"class":189},[91,1321,200],{"class":199},[91,1323,203],{"class":97},[91,1325,1326,1328,1330,1332,1334],{"class":93,"line":152},[91,1327,740],{"class":189},[91,1329,193],{"class":97},[91,1331,649],{"class":189},[91,1333,200],{"class":199},[91,1335,203],{"class":97},[91,1337,1338],{"class":93,"line":162},[91,1339,234],{"class":97},[365,1341,1342,1350],{},[368,1343,1344],{},[371,1345,1346,1348],{},[374,1347,1127],{},[374,1349,1130],{},[383,1351,1352,1358],{},[371,1353,1354,1356],{},[388,1355,1163],{},[388,1357,1149],{},[371,1359,1360,1362],{},[388,1361,1171],{},[388,1363,1163],{},[14,1365,1366,1367],{},"更多示例见 MDN：",[50,1368,1371],{"href":1369,"rel":1370},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FContaining_block",[54],"Containing block",[14,1373,1374],{},[38,1375],{"alt":1376,"src":1377},"规范例题中的 DOM 树与包含块关系","\u002Fdemos\u002Fcontaining-block\u002Fdom-tree.svg",[77,1379,1380],{"id":1380},"小结",[341,1382,1383,1388,1407,1416],{},[344,1384,1385,1387],{},[23,1386,1130],{}," 决定百分比与定位偏移的参照区域，不是笼统的「父元素」。",[344,1389,1390,1392,1393,1395,1396,1398,1399,1401,1402,1398,1404,1406],{},[18,1391,392],{},"\u002F",[18,1394,396],{}," 看最近块容器的 ",[23,1397,406],{},"；",[18,1400,424],{}," 看定位祖先的 ",[23,1403,435],{},[18,1405,414],{}," 看视口。",[344,1408,1409,1411,1412,1415],{},[18,1410,797],{}," 等属性会 ",[23,1413,1414],{},"新建包含块","，布局结果可能「突然变了」。",[344,1417,1418,1419,56],{},"布局阶段算几何信息时离不开包含块；改样式触发的 reflow 见 ",[50,1420,1422],{"href":1421},"\u002Fblog\u002Freflow-repaint-transform","reflow 与 repaint",[1424,1425,1426],"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":87,"searchDepth":130,"depth":130,"links":1428},[1429,1430,1431,1435,1436],{"id":79,"depth":108,"text":80},{"id":327,"depth":108,"text":327},{"id":362,"depth":108,"text":363,"children":1432},[1433,1434],{"id":439,"depth":130,"text":440},{"id":779,"depth":130,"text":780},{"id":910,"depth":108,"text":910},{"id":1380,"depth":108,"text":1380},"2026-06-28","百分比宽高与绝对定位偏移到底相对谁算？搞懂 containing block 与初始包含块，布局阶段的几何信息才说得清。",false,"md",{},"\u002Fblog\u002Fcss-containing-block",{"title":5,"description":1438},"blog\u002Fcss-containing-block",[1446,1447,1448],"layout","containing-block","interview","7-rbTxShL5j-yWfKcjpRnC_JvYeoy2-lO_1z13rrAsk",1782309644797]