[{"data":1,"prerenderedAt":1330},["ShallowReactive",2],{"page-\u002Fcss\u002Fcss上下文":3},{"id":4,"title":5,"body":6,"description":12,"extension":1321,"meta":1322,"navigation":1325,"path":1326,"seo":1327,"stem":1328,"__hash__":1329},"content\u002Fcss\u002Fcss上下文.md","Css上下文",{"type":7,"value":8,"toc":1313},"minimark",[9,13,17,20,158,164,183,187,228,231,251,273,308,328,331,540,548,551,632,635,642,762,813,816,819,830,833,922,925,928,931,934,949,952,1034,1067,1079,1178,1181,1192,1195,1198,1309],[10,11,12],"p",{},"css中有几个上下文需要了解一下，我下面列出来。这是最核心的一类，决定盒子如何布局、如何相互影响。CSS里的上下文本质都是作用域的隔离机制，它们共同构成布局和渲染的隔离体系",[14,15,16],"h2",{"id":16},"不同上下文",[10,18,19],{},"主要包括：",[21,22,23,42],"table",{},[24,25,26],"thead",{},[27,28,29,33,36,39],"tr",{},[30,31,32],"th",{},"上下文",[30,34,35],{},"全称",[30,37,38],{},"作用",[30,40,41],{},"触发方式",[43,44,45,80,96,118,139],"tbody",{},[27,46,47,54,57,60],{},[48,49,50],"td",{},[51,52,53],"strong",{},"BFC",[48,55,56],{},"Block Formatting Context",[48,58,59],{},"块级布局隔离，防止 margin 折叠、清除浮动、包含浮动",[48,61,62,66,67,66,70,66,73,66,76,79],{},[63,64,65],"code",{},"overflow: hidden","、",[63,68,69],{},"display: flow-root",[63,71,72],{},"float",[63,74,75],{},"position: absolute\u002Ffixed",[63,77,78],{},"display: flex\u002Fgrid"," 的子项等",[27,81,82,87,90,93],{},[48,83,84],{},[51,85,86],{},"IFC",[48,88,89],{},"Inline Formatting Context",[48,91,92],{},"行内元素布局，决定行盒如何排列",[48,94,95],{},"块级容器内包含行内内容时自动创建",[27,97,98,103,106,109],{},[48,99,100],{},[51,101,102],{},"FFC",[48,104,105],{},"Flex Formatting Context",[48,107,108],{},"Flex 布局环境",[48,110,111,114,115],{},[63,112,113],{},"display: flex"," 或 ",[63,116,117],{},"inline-flex",[27,119,120,125,128,131],{},[48,121,122],{},[51,123,124],{},"GFC",[48,126,127],{},"Grid Formatting Context",[48,129,130],{},"Grid 布局环境",[48,132,133,114,136],{},[63,134,135],{},"display: grid",[63,137,138],{},"inline-grid",[27,140,141,146,149,152],{},[48,142,143],{},[51,144,145],{},"TC",[48,147,148],{},"Table Formatting Context",[48,150,151],{},"表格布局环境",[48,153,154,157],{},[63,155,156],{},"display: table"," 等表格相关值",[10,159,160,163],{},[51,161,162],{},"BFC 是最常被提到的","，因为它能解决很多经典问题，不过先不讲，后面我再解释。除了上面的，还有层叠上下文，用于决定元素在Z轴上如何堆叠。还有隔离上下文比如isolation: isolate创建独立的层叠上下文，用于mix-blend-mode场景防止混合模式影响外部元素。容器上下文，比如css containment中的contain: layout\u002Fpaint\u002Fsize会创建布局\u002F绘制隔离，让元素的内部变化不影响外部，这个也可以看做一种上下文。",[165,166,167],"blockquote",{},[10,168,169,176,177,182],{},[170,171,175],"a",{"href":172,"rel":173},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS",[174],"nofollow","CSS"," 属性 ",[51,178,179],{},[63,180,181],{},"contain"," 标示了元素及其内容尽可能独立于文档树的其余部分。局限使 DOM 的一部分得以被隔离，且通过将布局、样式、绘制、尺寸或其任意组合的计算限制于 DOM 子树而非整个页面使性能受益。局限也可用于限制 CSS 计数器和引号的作用域。它允许你向浏览器声明：**某个元素及其子树是独立的，其内部的布局、样式或绘制变化，不会影响到页面上的其他部分。这样浏览器就能把重排、重绘的工作范围限制在这个元素内部，而不是检查整个页面，从而在处理复杂或动态内容时提升渲染性能，具体看MDN",[184,185,186],"h3",{"id":186},"其他相关概念",[188,189,190,205,216],"ul",{},[191,192,193,196,197,200,201,204],"li",{},[51,194,195],{},"滚动上下文（Scroll Container）","：",[63,198,199],{},"overflow"," 非 ",[63,202,203],{},"visible"," 且内容溢出时，形成独立的滚动区域。",[191,206,207,196,210,66,213,215],{},[51,208,209],{},"裁剪上下文（Clipping Context）",[63,211,212],{},"clip-path",[63,214,65],{}," 等会裁剪内部内容。",[191,217,218,196,221,200,224,227],{},[51,219,220],{},"变换上下文（Transform Context）",[63,222,223],{},"transform",[63,225,226],{},"none"," 会创建新的坐标系统，同时也会创建层叠上下文。",[14,229,230],{"id":230},"bfc",[10,232,233,236,237,240,241,66,243,66,245,66,247,250],{},[51,234,235],{},"BFC（块级格式化上下文）","：是一个",[51,238,239],{},"布局隔离环境","，需要特定条件才能触发，比如 ",[63,242,65],{},[63,244,69],{},[63,246,72],{},[63,248,249],{},"position: absolute"," 等。",[10,252,253,260,261,264,265,268,269,272],{},[51,254,255,256,259],{},"块级元素（",[63,257,258],{},"display: block","）","：默认 ",[63,262,263],{},"width: auto","，会",[51,266,267],{},"占满父容器的可用宽度","（撑满整行）。这跟它是不是 BFC 无关，普通块级元素也这样。我们常常用display: flow-root来创建BFC，它本身是块级元素，所以默认也",[51,270,271],{},"占满整行","。",[274,275,280],"pre",{"className":276,"code":277,"language":278,"meta":279,"style":279},"language-css shiki shiki-themes github-light github-dark","\u003Cdiv class=\" text-black bg-black\">123\u003C\u002Fdiv>\n","css","",[63,281,282],{"__ignoreMap":279},[283,284,287,291,295,298,301,305],"span",{"class":285,"line":286},"line",1,[283,288,290],{"class":289},"sVt8B","\u003Cdiv class=\" ",[283,292,294],{"class":293},"s9eBZ","text-black",[283,296,297],{"class":293}," bg-black",[283,299,300],{"class":289},"\"",[283,302,304],{"class":303},"szBVR",">",[283,306,307],{"class":289},"123\u003C\u002Fdiv>\n",[10,309,310,311,314,315,66,318,66,321,323,324,327],{},"比如这个简单的元素，他就会默认占满父容器宽度，前提是它处于",[51,312,313],{},"正常流","中，并且没有设置 ",[63,316,317],{},"width",[63,319,320],{},"display: inline-block",[63,322,72],{}," 等改变宽度的属性。只要我们加了inline-block或是float，那么就会出现收缩包裹现象。哦对了，里面的123直接放在块级容器里的文本会被浏览器自动包进一个",[51,325,326],{},"匿名行内盒子","，这个盒子参与行内格式化上下文IFC，会从左到右排列。",[10,329,330],{},"所以，这里重点强调：占满整行是块级元素的默认行为！！！块级元素的代表我先列出来：",[21,332,333,349],{},[24,334,335],{},[27,336,337,343,346],{},[30,338,339,340],{},"默认 ",[63,341,342],{},"display",[30,344,345],{},"代表元素",[30,347,348],{},"特点",[43,350,351,387,426,452,468,491,514],{},[27,352,353,360,384],{},[48,354,355],{},[51,356,357],{},[63,358,359],{},"block",[48,361,362,66,365,66,368,371,372,66,375,66,378,66,381],{},[63,363,364],{},"\u003Cdiv>",[63,366,367],{},"\u003Cp>",[63,369,370],{},"\u003Ch1>","~",[63,373,374],{},"\u003Ch6>",[63,376,377],{},"\u003Cul>",[63,379,380],{},"\u003Cli>",[63,382,383],{},"\u003Csection>",[48,385,386],{},"独占一行，默认占满父容器宽度",[27,388,389,396,416],{},[48,390,391],{},[51,392,393],{},[63,394,395],{},"inline",[48,397,398,66,401,66,404,66,407,66,410,66,413],{},[63,399,400],{},"\u003Cspan>",[63,402,403],{},"\u003Ca>",[63,405,406],{},"\u003Cem>",[63,408,409],{},"\u003Cstrong>",[63,411,412],{},"\u003Cb>",[63,414,415],{},"\u003Ci>",[48,417,418,419,421,422,425],{},"不独占一行，宽高由内容决定，",[63,420,317],{},"\u002F",[63,423,424],{},"height"," 无效，表现为inline的行内元素",[27,427,428,435,449],{},[48,429,430],{},[51,431,432],{},[63,433,434],{},"inline-block",[48,436,437,66,440,66,443,66,446],{},[63,438,439],{},"\u003Cbutton>",[63,441,442],{},"\u003Cinput>",[63,444,445],{},"\u003Cselect>",[63,447,448],{},"\u003Cimg>",[48,450,451],{},"对外像行内元素，对内像块级元素，可设宽高",[27,453,454,461,465],{},[48,455,456],{},[51,457,458],{},[63,459,460],{},"list-item",[48,462,463],{},[63,464,380],{},[48,466,467],{},"像块级元素，但会生成列表项标记",[27,469,470,477,488],{},[48,471,472],{},[51,473,474,476],{},[63,475,21],{}," 相关",[48,478,479,66,482,66,485],{},[63,480,481],{},"\u003Ctable>",[63,483,484],{},"\u003Ctr>",[63,486,487],{},"\u003Ctd>",[48,489,490],{},"表格布局专用",[27,492,493,499,511],{},[48,494,495],{},[51,496,497],{},[63,498,226],{},[48,500,501,66,504,66,507,510],{},[63,502,503],{},"\u003Chead>",[63,505,506],{},"\u003Cmeta>",[63,508,509],{},"\u003Ctitle>"," 等",[48,512,513],{},"不生成盒子，不参与布局",[27,515,516,536,538],{},[48,517,518,519,521,522,66,524,66,526,66,529,532,533,535],{},"对外像行内元素，对内像块级元素，可设宽高的意思是不独占一行，多个 ",[63,520,434],{}," 元素会排在同一行；宽度默认由内容决定（收缩包裹），不占满父容器。",[63,523,317],{},[63,525,424],{},[63,527,528],{},"margin",[63,530,531],{},"padding"," 都有效，这是它和纯 ",[63,534,395],{}," 元素最大的区别。内部可以放块级元素，内部布局按正常流进行。",[48,537],{},[48,539],{},[10,541,542,543,66,545,547],{},"正常流式CSS中最基础、默认的布局方式，当你不使用 ",[63,544,72],{},[63,546,75],{}," 或 Flex\u002FGrid 等特殊布局时，元素就处于正常流中。表现为把页面上元素分成两类来排列，块级元素会从上到下垂直堆叠，每个独占一行，默认占满父容器宽度，垂直方向的margin折叠。",[10,549,550],{},"行内元素inline，从左到右水平排列，排满一行后换行，宽度由内容决定，不独占一行，垂直margin不生效，水平margin生效。",[274,552,556],{"className":553,"code":554,"language":555,"meta":279,"style":279},"language-html shiki shiki-themes github-light github-dark","  \u003Cdiv class=\" text-black bg-black inline-block\">\n    \u003Cspan class=\" mr-2\">123\u003C\u002Fspan>\n    \u003Cspan class=\" mt-10\">123\u003C\u002Fspan>\n  \u003C\u002Fdiv>\n","html",[63,557,558,580,602,622],{"__ignoreMap":279},[283,559,560,563,566,570,573,577],{"class":285,"line":286},[283,561,562],{"class":289},"  \u003C",[283,564,565],{"class":293},"div",[283,567,569],{"class":568},"sScJk"," class",[283,571,572],{"class":289},"=",[283,574,576],{"class":575},"sZZnC","\" text-black bg-black inline-block\"",[283,578,579],{"class":289},">\n",[283,581,583,586,588,590,592,595,598,600],{"class":285,"line":582},2,[283,584,585],{"class":289},"    \u003C",[283,587,283],{"class":293},[283,589,569],{"class":568},[283,591,572],{"class":289},[283,593,594],{"class":575},"\" mr-2\"",[283,596,597],{"class":289},">123\u003C\u002F",[283,599,283],{"class":293},[283,601,579],{"class":289},[283,603,605,607,609,611,613,616,618,620],{"class":285,"line":604},3,[283,606,585],{"class":289},[283,608,283],{"class":293},[283,610,569],{"class":568},[283,612,572],{"class":289},[283,614,615],{"class":575},"\" mt-10\"",[283,617,597],{"class":289},[283,619,283],{"class":293},[283,621,579],{"class":289},[283,623,625,628,630],{"class":285,"line":624},4,[283,626,627],{"class":289},"  \u003C\u002F",[283,629,565],{"class":293},[283,631,579],{"class":289},[10,633,634],{},"比如这里的mr-2会生效，mt-10不会生效，你想要生效就要去生成bfc，可以加上block生效，把span的display的inline改为block，这里不是创建bfc的意思哦。",[10,636,637,638,641],{},"根据 CSS 规范，一个元素满足以下",[51,639,640],{},"任意一个","条件，就会创建 BFC：",[21,643,644,654],{},[24,645,646],{},[27,647,648,651],{},[30,649,650],{},"触发条件",[30,652,653],{},"说明",[43,655,656,666,675,684,698,707,727,737,745],{},[27,657,658,663],{},[48,659,660],{},[63,661,662],{},"float: left\u002Fright",[48,664,665],{},"浮动元素",[27,667,668,672],{},[48,669,670],{},[63,671,75],{},[48,673,674],{},"绝对\u002F固定定位",[27,676,677,681],{},[48,678,679],{},[63,680,320],{},[48,682,683],{},"行内块",[27,685,686,695],{},[48,687,688,691,692],{},[63,689,690],{},"display: table-cell"," \u002F ",[63,693,694],{},"table-caption",[48,696,697],{},"表格相关",[27,699,700,704],{},[48,701,702],{},[63,703,69],{},[48,705,706],{},"专门创建 BFC 的值",[27,708,709,715],{},[48,710,711,200,713],{},[63,712,199],{},[63,714,203],{},[48,716,717,718,66,721,66,724],{},"如 ",[63,719,720],{},"hidden",[63,722,723],{},"auto",[63,725,726],{},"scroll",[27,728,729,734],{},[48,730,731],{},[63,732,733],{},"contain: layout\u002Fpaint\u002Fcontent\u002Fstrict",[48,735,736],{},"容器隔离",[27,738,739,742],{},[48,740,741],{},"Flex\u002FGrid 子项",[48,743,744],{},"某些情况下",[27,746,747,760],{},[48,748,749,750,752,753,756,757,759],{},"一个普通 ",[63,751,359],{}," 元素",[51,754,755],{},"不能","包含浮动子元素（父元素会高度塌陷），因为它是正常流，浮动子元素会脱离它。但如果你给它加 ",[63,758,65],{},"，它就变成 BFC，就能包含浮动子元素了。",[48,761],{},[274,763,765],{"className":553,"code":764,"language":555,"meta":279,"style":279},"\u003Cdiv class=\"box bg-yellow-500\">\n  \u003Cdiv style=\"float: left; width: 100px; height: 100px; background: red;\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[63,766,767,783,804],{"__ignoreMap":279},[283,768,769,772,774,776,778,781],{"class":285,"line":286},[283,770,771],{"class":289},"\u003C",[283,773,565],{"class":293},[283,775,569],{"class":568},[283,777,572],{"class":289},[283,779,780],{"class":575},"\"box bg-yellow-500\"",[283,782,579],{"class":289},[283,784,785,787,789,792,794,797,800,802],{"class":285,"line":582},[283,786,562],{"class":289},[283,788,565],{"class":293},[283,790,791],{"class":568}," style",[283,793,572],{"class":289},[283,795,796],{"class":575},"\"float: left; width: 100px; height: 100px; background: red;\"",[283,798,799],{"class":289},">\u003C\u002F",[283,801,565],{"class":293},[283,803,579],{"class":289},[283,805,806,809,811],{"class":285,"line":604},[283,807,808],{"class":289},"\u003C\u002F",[283,810,565],{"class":293},[283,812,579],{"class":289},[10,814,815],{},"这种情况下，会出现高度塌陷，因为刚才才说浮动元素会脱离高度计算是吧，这个脱离了正常流之后box就显示不出黄色了，box不包含它。那么我们这时候加上 overflow-hidden试试，这样就会发现之前的黄色出来了，这就意味着overflow-hidden确实创建了BFC，解决了高度塌陷的问题，之前的浮动元素参与了高度计算！！当然你输入flow-root也是一样的效果。",[14,817,818],{"id":818},"ffc",[10,820,821,822,825,826,829],{},"当一个元素变成 Flex 容器后，它内部的子元素",[51,823,824],{},"不再遵循正常流","，而是变成 ",[51,827,828],{},"Flex 项（flex item）","，按 Flex 规则排列。",[10,831,832],{},"这个时候就会分为主轴排列和交叉轴两个方向，子元素默认按照主轴从左到右排列，然后默认flex-wrap：nowrap不换行，挤在一行，可能压缩。浮动会消失，子元素的float会直接被忽略，不生效。垂直上，margin不会折叠，flex项之间的margin不会折叠。子元素可以设置宽高，flex项是块级化的，width和height都生效。flex容器的高度会包含flex项，不会高度塌陷，flex容器对外是块级，内部布局独立。",[274,834,836],{"className":553,"code":835,"language":555,"meta":279,"style":279},"\u003Cdiv class=\"flex bg-amber-400\">\n  \u003Cdiv class=\"item bg-blue-400 mt-2\">1\u003C\u002Fdiv>\n  \u003Cdiv class=\"item bg-blue-600 mt-3\">2\u003C\u002Fdiv>\n  \u003Cdiv class=\"item\">3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[63,837,838,853,873,893,913],{"__ignoreMap":279},[283,839,840,842,844,846,848,851],{"class":285,"line":286},[283,841,771],{"class":289},[283,843,565],{"class":293},[283,845,569],{"class":568},[283,847,572],{"class":289},[283,849,850],{"class":575},"\"flex bg-amber-400\"",[283,852,579],{"class":289},[283,854,855,857,859,861,863,866,869,871],{"class":285,"line":582},[283,856,562],{"class":289},[283,858,565],{"class":293},[283,860,569],{"class":568},[283,862,572],{"class":289},[283,864,865],{"class":575},"\"item bg-blue-400 mt-2\"",[283,867,868],{"class":289},">1\u003C\u002F",[283,870,565],{"class":293},[283,872,579],{"class":289},[283,874,875,877,879,881,883,886,889,891],{"class":285,"line":604},[283,876,562],{"class":289},[283,878,565],{"class":293},[283,880,569],{"class":568},[283,882,572],{"class":289},[283,884,885],{"class":575},"\"item bg-blue-600 mt-3\"",[283,887,888],{"class":289},">2\u003C\u002F",[283,890,565],{"class":293},[283,892,579],{"class":289},[283,894,895,897,899,901,903,906,909,911],{"class":285,"line":624},[283,896,562],{"class":289},[283,898,565],{"class":293},[283,900,569],{"class":568},[283,902,572],{"class":289},[283,904,905],{"class":575},"\"item\"",[283,907,908],{"class":289},">3\u003C\u002F",[283,910,565],{"class":293},[283,912,579],{"class":289},[283,914,916,918,920],{"class":285,"line":915},5,[283,917,808],{"class":289},[283,919,565],{"class":293},[283,921,579],{"class":289},[10,923,924],{},"这里的mt-2 和mt-3不会被折叠，两个都可以生效。",[10,926,927],{},"你还可以使用行内flex: inline-flex，创建行内flex容器。flex-row或者flex-col设置主轴方向。除此以外，flex和流式都可能出现高度拉伸，但触发条件和表现完全不同。",[10,929,930],{},"在正常流中，父元素有固定高度+子元素占据100%高度情况下，子元素自己是会拉伸到指定高度的，。在flex中，如果父元素display: flex + 默认align-items:stretch下，所有flex项会默认拉伸，就算子元素不设置高度，依旧会去拉伸。",[10,932,933],{},"flex在设置flex-wrap换行之后，就会flex行和项，分辨flex行和项之后才可以清除之后的justify-content等布局操作的主体是什么。",[10,935,936,937,940,941,944,945,948],{},"justify-content操作的是每一flex行的内部，控制该行中所有 Flex 项沿",[51,938,939],{},"主轴","的分布，",[51,942,943],{},"不控制行与行之间的分布","——那是 ",[63,946,947],{},"align-content"," 的职责。align-items操控的每一个flex项，作用于交叉轴。",[10,950,951],{},"比如你控制三个item项在一个flex行中居中：",[274,953,955],{"className":553,"code":954,"language":555,"meta":279,"style":279},"\u003Cdiv class=\"flex flex-wrap justify-center bg-amber-400 h-20\">\n  \u003Cdiv class=\"item bg-blue-400 mt-2\">1\u003C\u002Fdiv>\n  \u003Cdiv class=\"item bg-blue-600 mt-3\">2\u003C\u002Fdiv>\n  \u003Cdiv class=\"item\">3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[63,956,957,972,990,1008,1026],{"__ignoreMap":279},[283,958,959,961,963,965,967,970],{"class":285,"line":286},[283,960,771],{"class":289},[283,962,565],{"class":293},[283,964,569],{"class":568},[283,966,572],{"class":289},[283,968,969],{"class":575},"\"flex flex-wrap justify-center bg-amber-400 h-20\"",[283,971,579],{"class":289},[283,973,974,976,978,980,982,984,986,988],{"class":285,"line":582},[283,975,562],{"class":289},[283,977,565],{"class":293},[283,979,569],{"class":568},[283,981,572],{"class":289},[283,983,865],{"class":575},[283,985,868],{"class":289},[283,987,565],{"class":293},[283,989,579],{"class":289},[283,991,992,994,996,998,1000,1002,1004,1006],{"class":285,"line":604},[283,993,562],{"class":289},[283,995,565],{"class":293},[283,997,569],{"class":568},[283,999,572],{"class":289},[283,1001,885],{"class":575},[283,1003,888],{"class":289},[283,1005,565],{"class":293},[283,1007,579],{"class":289},[283,1009,1010,1012,1014,1016,1018,1020,1022,1024],{"class":285,"line":624},[283,1011,562],{"class":289},[283,1013,565],{"class":293},[283,1015,569],{"class":568},[283,1017,572],{"class":289},[283,1019,905],{"class":575},[283,1021,908],{"class":289},[283,1023,565],{"class":293},[283,1025,579],{"class":289},[283,1027,1028,1030,1032],{"class":285,"line":915},[283,1029,808],{"class":289},[283,1031,565],{"class":293},[283,1033,579],{"class":289},[10,1035,1036,1037,1040,1041,1044,1045,1048,1049,1052,1053,1056,1057],{},"我们使用gap-y-6可以设置flex行的距离，",[63,1038,1039],{},"gap-y-6"," 是 Tailwind 的 ",[63,1042,1043],{},"row-gap: 1.5rem","（24px）。在 Flex 布局中，它控制的是",[51,1046,1047],{},"相邻 Flex 行之间的固定间距","。如果你仔细观察这几行代码，会发现两行高度上没有贴在一起，而是分开的，这是因为align-content: stretch发力了，当 Flex 容器在交叉轴方向有",[51,1050,1051],{},"剩余空间","时，把剩余空间",[51,1054,1055],{},"平均分配","给每一行，让每行的高度被拉大，从而填满整个容器。",[51,1058,1059,1060,1062,1063,1066],{},"如果 ",[63,1061,947],{}," 是 ",[63,1064,1065],{},"flex-start","，两行就会贴在一起，靠在容器顶部。",[10,1068,1069,1070,1073,1074,1078],{},"控制 Flex ",[51,1071,1072],{},"行与行之间","在交叉轴（垂直方向）分布的属性是 ",[51,1075,1076],{},[63,1077,947],{},"，对应的 Tailwind 类是：",[21,1080,1081,1091],{},[24,1082,1083],{},[27,1084,1085,1088],{},[30,1086,1087],{},"Tailwind 类",[30,1089,1090],{},"CSS 属性",[43,1092,1093,1105,1117,1129,1141,1153,1165],{},[27,1094,1095,1100],{},[48,1096,1097],{},[63,1098,1099],{},"content-start",[48,1101,1102],{},[63,1103,1104],{},"align-content: flex-start",[27,1106,1107,1112],{},[48,1108,1109],{},[63,1110,1111],{},"content-end",[48,1113,1114],{},[63,1115,1116],{},"align-content: flex-end",[27,1118,1119,1124],{},[48,1120,1121],{},[63,1122,1123],{},"content-center",[48,1125,1126],{},[63,1127,1128],{},"align-content: center",[27,1130,1131,1136],{},[48,1132,1133],{},[63,1134,1135],{},"content-between",[48,1137,1138],{},[63,1139,1140],{},"align-content: space-between",[27,1142,1143,1148],{},[48,1144,1145],{},[63,1146,1147],{},"content-around",[48,1149,1150],{},[63,1151,1152],{},"align-content: space-around",[27,1154,1155,1160],{},[48,1156,1157],{},[63,1158,1159],{},"content-evenly",[48,1161,1162],{},[63,1163,1164],{},"align-content: space-evenly",[27,1166,1167,1172],{},[48,1168,1169],{},[63,1170,1171],{},"content-stretch",[48,1173,1174,1177],{},[63,1175,1176],{},"align-content: stretch","（默认）",[14,1179,1180],{"id":1180},"层叠上下文",[10,1182,1183,1184,1187,1188,1191],{},"层叠上下文和z-index相关，是 CSS 中决定",[51,1185,1186],{},"元素在 Z 轴上如何堆叠","的核心机制。理解它，就能解释“为什么 ",[63,1189,1190],{},"z-index: 9999"," 还是被盖住”这类经典问题。",[10,1193,1194],{},"它是一个独立的堆叠环境，可以想象为一个盒子，内部元素是按规则堆叠，整体作为一个单位，参与外层父级层叠上下文的堆叠，子元素的z-index只是在同一个层叠上下文内比较，无法跨上下文越级，层叠上下文可以嵌套，形成一棵树。",[10,1196,1197],{},"在一个层叠上下文内部，元素从低到高堆叠：",[21,1199,1200,1212],{},[24,1201,1202],{},[27,1203,1204,1207,1210],{},[30,1205,1206],{},"顺序",[30,1208,1209],{},"内容",[30,1211,653],{},[43,1213,1214,1225,1241,1252,1263,1274,1291],{},[27,1215,1216,1219,1222],{},[48,1217,1218],{},"1（最低）",[48,1220,1221],{},"背景和边框",[48,1223,1224],{},"当前层叠上下文根元素的背景、边框",[27,1226,1227,1230,1236],{},[48,1228,1229],{},"2",[48,1231,1232,1235],{},[63,1233,1234],{},"z-index"," 为负的子元素",[48,1237,717,1238],{},[63,1239,1240],{},"z-index: -1",[27,1242,1243,1246,1249],{},[48,1244,1245],{},"3",[48,1247,1248],{},"块级元素的背景和边框",[48,1250,1251],{},"普通流中的块级盒子",[27,1253,1254,1257,1259],{},[48,1255,1256],{},"4",[48,1258,665],{},[48,1260,1261],{},[63,1262,662],{},[27,1264,1265,1268,1271],{},[48,1266,1267],{},"5",[48,1269,1270],{},"行内元素的背景和边框",[48,1272,1273],{},"普通流中的行内盒子",[27,1275,1276,1279,1288],{},[48,1277,1278],{},"6",[48,1280,1281,114,1284,1287],{},[63,1282,1283],{},"z-index: auto",[63,1285,1286],{},"0"," 的定位元素",[48,1289,1290],{},"定位但未设 z-index",[27,1292,1293,1296,1301],{},[48,1294,1295],{},"7（最高）",[48,1297,1298,1300],{},[63,1299,1234],{}," 为正的子元素",[48,1302,717,1303,66,1306],{},[63,1304,1305],{},"z-index: 1",[63,1307,1308],{},"z-index: 999",[1310,1311,1312],"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 .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 .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}",{"title":279,"searchDepth":582,"depth":582,"links":1314},[1315,1318,1319,1320],{"id":16,"depth":582,"text":16,"children":1316},[1317],{"id":186,"depth":604,"text":186},{"id":230,"depth":582,"text":230},{"id":818,"depth":582,"text":818},{"id":1180,"depth":582,"text":1180},"md",{"date":1323,"tags":1324},"2026-10-11",[278],true,"\u002Fcss\u002Fcss上下文",{"description":12},"css\u002Fcss上下文","tXdwrUfODlpWxiYQND0xpw2sLE1nmHt8ARR5biFzmDs",1791740439696]