[{"data":1,"prerenderedAt":1016},["ShallowReactive",2],{"blog-css-property-calculation":3},{"id":4,"title":5,"body":6,"category":22,"date":1003,"description":1004,"draft":1005,"extension":1006,"meta":1007,"navigation":460,"path":1008,"seo":1009,"stem":1010,"tags":1011,"__hash__":1015},"blog\u002Fblog\u002Fcss-property-calculation.md","CSS 属性计算过程：从声明到最终值",{"type":7,"value":8,"toc":990},"minimark",[9,13,17,61,73,80,98,102,143,157,163,169,172,178,193,199,203,209,236,242,245,249,256,275,279,282,300,306,312,350,356,365,368,375,421,488,494,500,503,506,512,565,568,574,578,589,623,648,658,664,670,727,777,789,795,801,807,811,817,823,826,832,836,889,913,919,957,960,986],[10,11,5],"h1",{"id":12},"css-属性计算过程从声明到最终值",[14,15,16],"p",{},"写 CSS 时往往只写几行：",[18,19,24],"pre",{"className":20,"code":21,"language":22,"meta":23,"style":23},"language-css shiki shiki-themes github-light github-dark","p {\n  color: red;\n}\n","css","",[25,26,27,39,55],"code",{"__ignoreMap":23},[28,29,32,35],"span",{"class":30,"line":31},"line",1,[28,33,14],{"class":34},"s9eBZ",[28,36,38],{"class":37},"sVt8B"," {\n",[28,40,42,46,49,52],{"class":30,"line":41},2,[28,43,45],{"class":44},"sj4cs","  color",[28,47,48],{"class":37},": ",[28,50,51],{"class":44},"red",[28,53,54],{"class":37},";\n",[28,56,58],{"class":30,"line":57},3,[28,59,60],{"class":37},"}\n",[14,62,63,64,68,69,72],{},"但打开开发者工具 → 元素 → ",[65,66,67],"strong",{},"计算样式"," → 勾选「全部显示」，会发现每个元素都有 ",[65,70,71],{},"成百个属性","。它们从哪来？为什么有的没写却有值，有的写了却不是你以为的结果？",[14,74,75],{},[76,77],"img",{"alt":78,"src":79},"CSS 属性计算流程概览","\u002Fdemos\u002Fcss-property-calc\u002Fflow-overview.svg",[14,81,82,83,86,87,92,93,97],{},"属性值的计算大致分 ",[65,84,85],{},"四步","：确定声明值 → 层叠冲突 → 使用继承 → 使用默认值。算完后的结果会进入渲染流水线的 ",[88,89,91],"a",{"href":90},"\u002Fblog\u002Fbrowser-rendering-pipeline","样式计算"," 阶段，再与 ",[88,94,96],{"href":95},"\u002Fblog\u002Fcss-containing-block","包含块"," 一起在布局里定稿几何尺寸。",[99,100,101],"h2",{"id":101},"每个元素都有一套完整样式",[18,103,107],{"className":104,"code":105,"language":106,"meta":23,"style":23},"language-html shiki shiki-themes github-light github-dark","\u003Cbody>\n  \u003Ch1>这是一个 h1 标题\u003C\u002Fh1>\n\u003C\u002Fbody>\n","html",[25,108,109,120,134],{"__ignoreMap":23},[28,110,111,114,117],{"class":30,"line":31},[28,112,113],{"class":37},"\u003C",[28,115,116],{"class":34},"body",[28,118,119],{"class":37},">\n",[28,121,122,125,127,130,132],{"class":30,"line":41},[28,123,124],{"class":37},"  \u003C",[28,126,10],{"class":34},[28,128,129],{"class":37},">这是一个 h1 标题\u003C\u002F",[28,131,10],{"class":34},[28,133,119],{"class":37},[28,135,136,139,141],{"class":30,"line":57},[28,137,138],{"class":37},"\u003C\u002F",[28,140,116],{"class":34},[28,142,119],{"class":37},[14,144,145,146,148,149,152,153,156],{},"没给 ",[25,147,10],{}," 写任何样式，它仍有默认字号、颜色等——因为 ",[65,150,151],{},"任意 HTML 元素都对应一整套 CSS 属性","；没写的，多数走继承或 ",[65,154,155],{},"用户代理样式表（浏览器默认样式）","。",[14,158,159],{},[76,160],{"alt":161,"src":162},"未写样式时的 h1 外观","\u002Fdemos\u002Fcss-property-calc\u002Fh1-default.svg",[14,164,165],{},[76,166],{"alt":167,"src":168},"元素上实际存在的全部属性","\u002Fdemos\u002Fcss-property-calc\u002Fall-props.svg",[14,170,171],{},"在计算样式里勾选全部显示即可验证：",[14,173,174],{},[76,175],{"alt":176,"src":177},"计算样式面板","\u002Fdemos\u002Fcss-property-calc\u002Fcomputed-panel.svg",[14,179,180,181,184,185,188,189,192],{},"注意：没写 ",[65,182,183],{},"不等于"," 一定用默认值——中间还有 ",[65,186,187],{},"继承"," 和 ",[65,190,191],{},"层叠","，所以必须理解计算流程。",[14,194,195],{},[76,196],{"alt":197,"src":198},"并非总是默认值","\u002Fdemos\u002Fcss-property-calc\u002Fnot-only-default.svg",[99,200,202],{"id":201},"第一步确定声明值","第一步：确定声明值",[14,204,205,208],{},[65,206,207],{},"声明值"," 就是样式表里写明的规则，包括：",[210,211,212,219],"ul",{},[213,214,215,218],"li",{},[65,216,217],{},"作者样式表","（你写的 CSS）",[213,220,221,224,225,227,228,231,232,235],{},[65,222,223],{},"用户代理样式表","（浏览器内置，如 ",[25,226,10],{}," 的 ",[25,229,230],{},"display","、",[25,233,234],{},"margin","）",[14,237,238],{},[76,239],{"alt":240,"src":241},"作者样式与用户代理样式","\u002Fdemos\u002Fcss-property-calc\u002Fauthor-ua.svg",[14,243,244],{},"若声明之间无冲突，直接采用对应声明。",[99,246,248],{"id":247},"第二步层叠冲突","第二步：层叠冲突",[14,250,251,252,255],{},"多条规则声明同一属性时，进入 ",[65,253,254],{},"层叠（Cascade）"," 解决，细分为：",[257,258,259,265,270],"ol",{},[213,260,261,262],{},"比较 ",[65,263,264],{},"源的重要性",[213,266,261,267],{},[65,268,269],{},"优先级（特异性）",[213,271,261,272],{},[65,273,274],{},"次序",[276,277,278],"h3",{"id":278},"比较源的重要性",[14,280,281],{},"样式来源（重要性从高到低）：",[210,283,284,289,295],{},[213,285,286],{},[65,287,288],{},"页面作者样式",[213,290,291,294],{},[65,292,293],{},"用户样式","（用户自定义）",[213,296,297],{},[65,298,299],{},"用户代理样式",[14,301,302],{},[76,303],{"alt":304,"src":305},"样式源重要性","\u002Fdemos\u002Fcss-property-calc\u002Fsource-priority.svg",[14,307,308,309,311],{},"作者与用户代理同时声明 ",[25,310,230],{}," 时，作者胜出：",[18,313,315],{"className":20,"code":314,"language":22,"meta":23,"style":23},"p {\n  color: red;\n  display: inline-block;\n}\n",[25,316,317,323,333,345],{"__ignoreMap":23},[28,318,319,321],{"class":30,"line":31},[28,320,14],{"class":34},[28,322,38],{"class":37},[28,324,325,327,329,331],{"class":30,"line":41},[28,326,45],{"class":44},[28,328,48],{"class":37},[28,330,51],{"class":44},[28,332,54],{"class":37},[28,334,335,338,340,343],{"class":30,"line":57},[28,336,337],{"class":44},"  display",[28,339,48],{"class":37},[28,341,342],{"class":44},"inline-block",[28,344,54],{"class":37},[28,346,348],{"class":30,"line":347},4,[28,349,60],{"class":37},[14,351,352],{},[76,353],{"alt":354,"src":355},"display 由作者样式决定","\u002Fdemos\u002Fcss-property-calc\u002Fcascade-display.svg",[14,357,358,359],{},"详见 MDN：",[88,360,364],{"href":361,"rel":362},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCascade",[363],"nofollow","Cascade",[276,366,367],{"id":367},"比较优先级",[14,369,370,371,374],{},"同一源内冲突，比 ",[65,372,373],{},"选择器权重","：",[18,376,378],{"className":104,"code":377,"language":106,"meta":23,"style":23},"\u003Cdiv class=\"test\">\n  \u003Ch1>test\u003C\u002Fh1>\n\u003C\u002Fdiv>\n",[25,379,380,400,413],{"__ignoreMap":23},[28,381,382,384,387,391,394,398],{"class":30,"line":31},[28,383,113],{"class":37},[28,385,386],{"class":34},"div",[28,388,390],{"class":389},"sScJk"," class",[28,392,393],{"class":37},"=",[28,395,397],{"class":396},"sZZnC","\"test\"",[28,399,119],{"class":37},[28,401,402,404,406,409,411],{"class":30,"line":41},[28,403,124],{"class":37},[28,405,10],{"class":34},[28,407,408],{"class":37},">test\u003C\u002F",[28,410,10],{"class":34},[28,412,119],{"class":37},[28,414,415,417,419],{"class":30,"line":57},[28,416,138],{"class":37},[28,418,386],{"class":34},[28,420,119],{"class":37},[18,422,424],{"className":20,"code":423,"language":22,"meta":23,"style":23},".test h1 {\n  font-size: 50px;\n}\n\nh1 {\n  font-size: 20px;\n}\n",[25,425,426,436,452,456,462,469,483],{"__ignoreMap":23},[28,427,428,431,434],{"class":30,"line":31},[28,429,430],{"class":389},".test",[28,432,433],{"class":34}," h1",[28,435,38],{"class":37},[28,437,438,441,443,446,450],{"class":30,"line":41},[28,439,440],{"class":44},"  font-size",[28,442,48],{"class":37},[28,444,445],{"class":44},"50",[28,447,449],{"class":448},"szBVR","px",[28,451,54],{"class":37},[28,453,454],{"class":30,"line":57},[28,455,60],{"class":37},[28,457,458],{"class":30,"line":347},[28,459,461],{"emptyLinePlaceholder":460},true,"\n",[28,463,465,467],{"class":30,"line":464},5,[28,466,10],{"class":34},[28,468,38],{"class":37},[28,470,472,474,476,479,481],{"class":30,"line":471},6,[28,473,440],{"class":44},[28,475,48],{"class":37},[28,477,478],{"class":44},"20",[28,480,449],{"class":448},[28,482,54],{"class":37},[28,484,486],{"class":30,"line":485},7,[28,487,60],{"class":37},[14,489,490,493],{},[25,491,492],{},".test h1"," 权重更高 → 50px：",[14,495,496],{},[76,497],{"alt":498,"src":499},"权重较高规则生效","\u002Fdemos\u002Fcss-property-calc\u002Fspecificity.svg",[14,501,502],{},"落败规则在 Styles 面板中会被划掉。",[276,504,505],{"id":505},"比较次序",[14,507,508,509,374],{},"同源、同权重时，",[65,510,511],{},"后面的规则覆盖前面的",[18,513,515],{"className":20,"code":514,"language":22,"meta":23,"style":23},"h1 {\n  font-size: 50px;\n}\n\nh1 {\n  font-size: 20px;\n}\n",[25,516,517,523,535,539,543,549,561],{"__ignoreMap":23},[28,518,519,521],{"class":30,"line":31},[28,520,10],{"class":34},[28,522,38],{"class":37},[28,524,525,527,529,531,533],{"class":30,"line":41},[28,526,440],{"class":44},[28,528,48],{"class":37},[28,530,445],{"class":44},[28,532,449],{"class":448},[28,534,54],{"class":37},[28,536,537],{"class":30,"line":57},[28,538,60],{"class":37},[28,540,541],{"class":30,"line":347},[28,542,461],{"emptyLinePlaceholder":460},[28,544,545,547],{"class":30,"line":464},[28,546,10],{"class":34},[28,548,38],{"class":37},[28,550,551,553,555,557,559],{"class":30,"line":471},[28,552,440],{"class":44},[28,554,48],{"class":37},[28,556,478],{"class":44},[28,558,449],{"class":448},[28,560,54],{"class":37},[28,562,563],{"class":30,"line":485},[28,564,60],{"class":37},[14,566,567],{},"最终 20px：",[14,569,570],{},[76,571],{"alt":572,"src":573},"同权重时后者胜出","\u002Fdemos\u002Fcss-property-calc\u002Fsource-order.svg",[99,575,577],{"id":576},"第三步使用继承","第三步：使用继承",[14,579,580,581,584,585,588],{},"没有声明的属性，若该属性 ",[65,582,583],{},"可继承","，则从 ",[65,586,587],{},"最近的祖先"," 取值：",[18,590,592],{"className":104,"code":591,"language":106,"meta":23,"style":23},"\u003Cdiv>\n  \u003Cp>Lorem ipsum dolor sit amet.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[25,593,594,602,615],{"__ignoreMap":23},[28,595,596,598,600],{"class":30,"line":31},[28,597,113],{"class":37},[28,599,386],{"class":34},[28,601,119],{"class":37},[28,603,604,606,608,611,613],{"class":30,"line":41},[28,605,124],{"class":37},[28,607,14],{"class":34},[28,609,610],{"class":37},">Lorem ipsum dolor sit amet.\u003C\u002F",[28,612,14],{"class":34},[28,614,119],{"class":37},[28,616,617,619,621],{"class":30,"line":57},[28,618,138],{"class":37},[28,620,386],{"class":34},[28,622,119],{"class":37},[18,624,626],{"className":20,"code":625,"language":22,"meta":23,"style":23},"div {\n  color: red;\n}\n",[25,627,628,634,644],{"__ignoreMap":23},[28,629,630,632],{"class":30,"line":31},[28,631,386],{"class":34},[28,633,38],{"class":37},[28,635,636,638,640,642],{"class":30,"line":41},[28,637,45],{"class":44},[28,639,48],{"class":37},[28,641,51],{"class":44},[28,643,54],{"class":37},[28,645,646],{"class":30,"line":57},[28,647,60],{"class":37},[14,649,650,227,652,655,656,374],{},[25,651,14],{},[25,653,654],{},"color"," 来自 ",[25,657,386],{},[14,659,660],{},[76,661],{"alt":662,"src":663},"color 继承","\u002Fdemos\u002Fcss-property-calc\u002Finherit-basic.svg",[14,665,666,667,374],{},"强调 ",[65,668,669],{},"最近祖先",[18,671,673],{"className":104,"code":672,"language":106,"meta":23,"style":23},"\u003Cdiv class=\"test\">\n  \u003Cdiv>\n    \u003Cp>Lorem ipsum dolor sit amet.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[25,674,675,689,697,710,719],{"__ignoreMap":23},[28,676,677,679,681,683,685,687],{"class":30,"line":31},[28,678,113],{"class":37},[28,680,386],{"class":34},[28,682,390],{"class":389},[28,684,393],{"class":37},[28,686,397],{"class":396},[28,688,119],{"class":37},[28,690,691,693,695],{"class":30,"line":41},[28,692,124],{"class":37},[28,694,386],{"class":34},[28,696,119],{"class":37},[28,698,699,702,704,706,708],{"class":30,"line":57},[28,700,701],{"class":37},"    \u003C",[28,703,14],{"class":34},[28,705,610],{"class":37},[28,707,14],{"class":34},[28,709,119],{"class":37},[28,711,712,715,717],{"class":30,"line":347},[28,713,714],{"class":37},"  \u003C\u002F",[28,716,386],{"class":34},[28,718,119],{"class":37},[28,720,721,723,725],{"class":30,"line":464},[28,722,138],{"class":37},[28,724,386],{"class":34},[28,726,119],{"class":37},[18,728,730],{"className":20,"code":729,"language":22,"meta":23,"style":23},"div {\n  color: red;\n}\n\n.test {\n  color: blue;\n}\n",[25,731,732,738,748,752,756,762,773],{"__ignoreMap":23},[28,733,734,736],{"class":30,"line":31},[28,735,386],{"class":34},[28,737,38],{"class":37},[28,739,740,742,744,746],{"class":30,"line":41},[28,741,45],{"class":44},[28,743,48],{"class":37},[28,745,51],{"class":44},[28,747,54],{"class":37},[28,749,750],{"class":30,"line":57},[28,751,60],{"class":37},[28,753,754],{"class":30,"line":347},[28,755,461],{"emptyLinePlaceholder":460},[28,757,758,760],{"class":30,"line":464},[28,759,430],{"class":389},[28,761,38],{"class":37},[28,763,764,766,768,771],{"class":30,"line":471},[28,765,45],{"class":44},[28,767,48],{"class":37},[28,769,770],{"class":44},"blue",[28,772,54],{"class":37},[28,774,775],{"class":30,"line":485},[28,776,60],{"class":37},[14,778,779,780,782,783,785,786,788],{},"内层 ",[25,781,386],{}," 更近 → ",[25,784,14],{}," 继承蓝色（这里不比权重，因为根本没选中 ",[25,787,14],{},"）：",[14,790,791],{},[76,792],{"alt":793,"src":794},"继承听最近的祖先","\u002Fdemos\u002Fcss-property-calc\u002Finherit-nearest.svg",[14,796,797,798,374],{},"哪些属性可继承？查 MDN 各属性页，例如 ",[25,799,800],{},"text-align",[14,802,803],{},[76,804],{"alt":805,"src":806},"MDN 上的 inherits 说明","\u002Fdemos\u002Fcss-property-calc\u002Finherits-hint.svg",[99,808,810],{"id":809},"第四步使用默认值","第四步：使用默认值",[14,812,813,814,374],{},"仍无法确定的，用 ",[65,815,816],{},"initial \u002F 用户代理默认值",[14,818,819],{},[76,820],{"alt":821,"src":822},"最终落到默认值","\u002Fdemos\u002Fcss-property-calc\u002Finitial-default.svg",[14,824,825],{},"元素要在浏览器里渲染，必须具备完整属性集；大量属性既未声明、也无法继承，就靠这一步补齐。",[14,827,828],{},[76,829],{"alt":830,"src":831},"四步流程回顾","\u002Fdemos\u002Fcss-property-calc\u002Fsteps-summary.svg",[99,833,835],{"id":834},"面试题a-和-p-各是什么颜色","面试题：a 和 p 各是什么颜色？",[18,837,839],{"className":104,"code":838,"language":106,"meta":23,"style":23},"\u003Cdiv>\n  \u003Ca href=\"\">test\u003C\u002Fa>\n  \u003Cp>test\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[25,840,841,849,869,881],{"__ignoreMap":23},[28,842,843,845,847],{"class":30,"line":31},[28,844,113],{"class":37},[28,846,386],{"class":34},[28,848,119],{"class":37},[28,850,851,853,855,858,860,863,865,867],{"class":30,"line":41},[28,852,124],{"class":37},[28,854,88],{"class":34},[28,856,857],{"class":389}," href",[28,859,393],{"class":37},[28,861,862],{"class":396},"\"\"",[28,864,408],{"class":37},[28,866,88],{"class":34},[28,868,119],{"class":37},[28,870,871,873,875,877,879],{"class":30,"line":57},[28,872,124],{"class":37},[28,874,14],{"class":34},[28,876,408],{"class":37},[28,878,14],{"class":34},[28,880,119],{"class":37},[28,882,883,885,887],{"class":30,"line":347},[28,884,138],{"class":37},[28,886,386],{"class":34},[28,888,119],{"class":37},[18,890,891],{"className":20,"code":625,"language":22,"meta":23,"style":23},[25,892,893,899,909],{"__ignoreMap":23},[28,894,895,897],{"class":30,"line":31},[28,896,386],{"class":34},[28,898,38],{"class":37},[28,900,901,903,905,907],{"class":30,"line":41},[28,902,45],{"class":44},[28,904,48],{"class":37},[28,906,51],{"class":44},[28,908,54],{"class":37},[28,910,911],{"class":30,"line":57},[28,912,60],{"class":37},[14,914,915],{},[76,916],{"alt":917,"src":918},"面试题解答","\u002Fdemos\u002Fcss-property-calc\u002Finterview-a-p.svg",[210,920,921,938],{},[213,922,923,927,928,930,931,934,935,937],{},[65,924,925],{},[25,926,88],{},"：用户代理样式表里已为链接声明了 ",[25,929,654],{},"，有声明值，",[65,932,933],{},"不继承"," ",[25,936,386],{}," 的红色。",[213,939,940,944,945,947,948,950,951,953,954,956],{},[65,941,942],{},[25,943,14],{},"：作者与 UA 都未给 ",[25,946,14],{}," 声明 ",[25,949,654],{},"，而 ",[25,952,654],{}," 可继承 → 从 ",[25,955,386],{}," 继承红色。",[99,958,959],{"id":959},"小结",[210,961,962,968,974,980],{},[213,963,964,965,156],{},"计算样式四步：",[65,966,967],{},"声明 → 层叠 → 继承 → 默认",[213,969,970,971,156],{},"层叠内部：",[65,972,973],{},"源 > 权重 > 次序",[213,975,976,977,979],{},"继承看 ",[65,978,669],{},"，与选择器权重无关。",[213,981,982,983,156],{},"算出的 Computed Style 是渲染流水线「样式计算」的输入；百分比尺寸还要等 ",[88,984,985],{"href":95},"布局与包含块",[987,988,989],"style",{},"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":23,"searchDepth":57,"depth":57,"links":991},[992,993,994,999,1000,1001,1002],{"id":101,"depth":41,"text":101},{"id":201,"depth":41,"text":202},{"id":247,"depth":41,"text":248,"children":995},[996,997,998],{"id":278,"depth":57,"text":278},{"id":367,"depth":57,"text":367},{"id":505,"depth":57,"text":505},{"id":576,"depth":41,"text":577},{"id":809,"depth":41,"text":810},{"id":834,"depth":41,"text":835},{"id":959,"depth":41,"text":959},"2026-06-27","确定声明值、层叠冲突、继承与默认值——搞懂 Computed 面板里那一长串属性是怎么来的。",false,"md",{},"\u002Fblog\u002Fcss-property-calculation",{"title":5,"description":1004},"blog\u002Fcss-property-calculation",[1012,1013,1014],"cascade","computed-style","interview","VHFx82BlHxxsO9OMlz7Mo-xU23maWSskailB9o960y8",1782309644798]