[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel":929,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel":955},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":925,"stem":926,"id":927,"extension":928},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","CSS 盒模型（Box Model）是 CSS 布局的基础：渲染引擎把元素表示为矩形盒子，由内到外依次是内容、内边距、边框、外边距。width \u002F height 究竟作用在哪一层，由 box-sizing 决定；弄清这一点，才能正确理…","技能小册",[12,13],"css","model","2023-09-04",false,{"type":17,"value":18,"toc":910},"minimark",[19,22,55,71,75,82,173,176,214,224,231,250,302,310,319,341,360,366,377,395,411,422,426,442,602,619,623,634,645,668,671,733,736,789,792,795,906],[20,21,8],"h1",{"id":8},[23,24,25,26,30,31,35,36,39,40,43,44,49,50,54],"p",{},"CSS 盒模型（Box Model）是 CSS 布局的基础：渲染引擎把元素表示为矩形盒子，由内到外依次是",[27,28,29],"strong",{},"内容、内边距、边框、外边距","。",[32,33,34],"code",{},"width"," \u002F ",[32,37,38],{},"height"," 究竟作用在哪一层，由 ",[32,41,42],{},"box-sizing"," 决定；弄清这一点，才能正确理解 ",[45,46,48],"a",{"href":47},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","Flex","、",[45,51,53],{"href":52},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","Grid"," 等布局中的尺寸行为。",[23,56,57,58,61,62,35,64,66,67,70],{},"块级、行内块、flex\u002Fgrid 子项等都按盒模型计算尺寸。纯行内非替换元素（如 ",[32,59,60],{},"\u003Cspan>","）虽有 padding、border、margin，但通常不能通过 ",[32,63,34],{},[32,65,38],{}," 指定盒尺寸；行盒高度主要由 ",[32,68,69],{},"line-height"," 等决定，边框与内边距会画在内容周围。",[72,73,74],"h2",{"id":74},"盒模型的组成",[23,76,77,78,81],{},"规范用四条",[27,79,80],{},"边界","划分区域：内容边界（content edge）→ 内边距边界 → 边框边界 → 外边距边界（margin edge）。对应四个区域：",[83,84,85,101],"table",{},[86,87,88],"thead",{},[89,90,91,95,98],"tr",{},[92,93,94],"th",{},"区域",[92,96,97],{},"作用",[92,99,100],{},"常用属性",[102,103,104,122,137,158],"tbody",{},[89,105,106,112,115],{},[107,108,109],"td",{},[27,110,111],{},"Content（内容）",[107,113,114],{},"文本、图片、子元素等",[107,116,117,49,119,121],{},[32,118,34],{},[32,120,38],{},"（在可设尺寸的盒上）",[89,123,124,129,132],{},[107,125,126],{},[27,127,128],{},"Padding（内边距）",[107,130,131],{},"内容与边框之间的留白；背景会延伸到此",[107,133,134],{},[32,135,136],{},"padding",[89,138,139,144,147],{},[107,140,141],{},[27,142,143],{},"Border（边框）",[107,145,146],{},"围绕 padding 的线框，占用布局空间",[107,148,149,49,152,49,155],{},[32,150,151],{},"border-width",[32,153,154],{},"border-style",[32,156,157],{},"border-color",[89,159,160,165,168],{},[107,161,162],{},[27,163,164],{},"Margin（外边距）",[107,166,167],{},"边框外的透明间距，用于分开相邻盒子",[107,169,170],{},[32,171,172],{},"margin",[23,174,175],{},"与布局尺寸相关的补充：",[177,178,179,192,200],"ul",{},[180,181,182,187,188,191],"li",{},[27,183,184],{},[32,185,186],{},"outline","：画在边框外侧，用于焦点环等，",[27,189,190],{},"不参与","盒模型宽度\u002F高度计算，也不占据布局空间（可能与边框重叠显示）。",[180,193,194,199],{},[27,195,196],{},[32,197,198],{},"box-shadow","：阴影同样不扩大布局盒尺寸（除非配合其他属性产生交互）。",[180,201,202,209,210,213],{},[27,203,204,205,35,207],{},"百分比 ",[32,206,136],{},[32,208,172],{},"：水平与垂直方向的百分比，参照物通常都是",[27,211,212],{},"包含块（containing block）的宽度","（规范统一规则，并非“竖直方向参照高度”）。",[215,216,222],"pre",{"className":217,"code":219,"language":220,"meta":221},[218],"language-text","      +-------------------------------+\n      |          Margin (外边距)        |  \u003C- 透明，margin-box 外侧\n      |   +-----------------------+   |\n      |   |    Border (边框)      |   |  \u003C- border-box 边界\n      |   |   +---------------+   |   |\n      |   |   |  Padding (内边距) |   |  \u003C- 背景可延伸至此\n      |   |   |   +-------+   |   |   |\n      |   |   |   |Content|   |   |   |  \u003C- content-box 边界\n      |   |   |   +-------+   |   |   |\n      |   |   +---------------+   |   |\n      |   +-----------------------+   |\n      +-------------------------------+\n","text","",[32,223,219],{"__ignoreMap":221},[72,225,227,228,230],{"id":226},"盒模型的类型box-sizing","盒模型的类型（",[32,229,42],{},"）",[23,232,233,35,235,237,238,240,241,30],{},[32,234,34],{},[32,236,38],{}," 指定的是哪一种“盒”的宽高，由 ",[32,239,42],{}," 控制。",[27,242,243,245,246,35,248],{},[32,244,172],{}," 永远不计入 ",[32,247,34],{},[32,249,38],{},[83,251,252,267],{},[86,253,254],{},[89,255,256,259,262],{},[92,257,258],{},"属性值",[92,260,261],{},"常见叫法",[92,263,264,266],{},[32,265,34],{}," 指定的是",[102,268,269,286],{},[89,270,271,276,279],{},[107,272,273],{},[32,274,275],{},"content-box",[107,277,278],{},"标准盒模型 \u002F 内容盒",[107,280,281,282,285],{},"仅 ",[27,283,284],{},"content box"," 的宽度",[89,287,288,293,296],{},[107,289,290],{},[32,291,292],{},"border-box",[107,294,295],{},"边框盒模型",[107,297,298,301],{},[27,299,300],{},"border box"," 的宽度（内容 + 左右 padding + 左右 border）",[303,304,306,307,309],"h3",{"id":305},"标准盒模型content-box初始值","标准盒模型（",[32,308,275],{},"，初始值）",[23,311,312,314,315,318],{},[32,313,34],{}," 只约束内容区；padding、border 加在内容区",[27,316,317],{},"外侧","，元素在页面上会“变胖”。",[177,320,321,333],{},[180,322,323,326,327,330],{},[27,324,325],{},"border box 宽度","（常称元素盒宽度，不含 margin）：",[328,329],"br",{},[32,331,332],{},"width + padding-left + padding-right + border-left-width + border-right-width",[180,334,335,338,339],{},[27,336,337],{},"布局占用宽度","（margin box）：再加上左右 ",[32,340,172],{},[23,342,343,344,347,348,347,351,354,355,357,30],{},"示例：",[32,345,346],{},"width: 200px","，",[32,349,350],{},"padding: 20px",[32,352,353],{},"border: 10px solid","（四边相同）→ border box 宽度",[328,356],{},[32,358,359],{},"200 + 20×2 + 10×2 = 260px",[303,361,363,364,230],{"id":362},"边框盒模型border-box","边框盒模型（",[32,365,292],{},[23,367,368,370,371,373,374,376],{},[32,369,34],{}," 表示整个 ",[27,372,300],{}," 的宽度；增加 padding 或 border 会压缩内容区，border box 总宽保持不变（在 ",[32,375,34],{}," 已确定、且无 min\u002Fmax 冲突时）。",[177,378,379,386],{},[180,380,381,383,384],{},[27,382,325],{},"：等于 ",[32,385,34],{},[180,387,388,391,392],{},[27,389,390],{},"内容区宽度","：",[32,393,394],{},"width - padding-left - padding-right - border-left-width - border-right-width",[23,396,397,398,401,402,30,405,407,408,410],{},"同上数值：border box 恒为 ",[32,399,400],{},"200px","；内容区约 ",[32,403,404],{},"200 - 40 - 20 = 140px",[32,406,38],{}," 与 ",[32,409,34],{}," 规则对称。",[412,413,414],"blockquote",{},[23,415,416,417,421],{},"“怪异盒模型”来自早期 IE 在怪异模式（Quirks Mode）下的行为；现代规范请使用 ",[27,418,419],{},[32,420,292],{}," 这一正式术语。",[72,423,425],{"id":424},"如何切换盒模型","如何切换盒模型？",[23,427,428,430,431,433,434,437,438,441],{},[32,429,42],{}," 初始值为 ",[32,432,275],{},"，且",[27,435,436],{},"不可继承","（",[32,439,440],{},"inherit"," 除外）。常见两种全局策略：",[215,443,446],{"className":444,"code":445,"language":12,"meta":221,"style":221},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","\u002F* 策略 A：通配符直接设为 border-box *\u002F\n*,\n*::before,\n*::after {\n    box-sizing: border-box;\n}\n\n\u002F* 策略 B：在根元素设定，子元素继承（便于组件库局部改回 content-box） *\u002F\nhtml {\n    box-sizing: border-box;\n}\n*,\n*::before,\n*::after {\n    box-sizing: inherit;\n}\n",[32,447,448,457,468,483,496,513,519,526,532,540,551,556,563,574,585,597],{"__ignoreMap":221},[449,450,453],"span",{"class":451,"line":452},"line",1,[449,454,456],{"class":455},"sutJx","\u002F* 策略 A：通配符直接设为 border-box *\u002F\n",[449,458,460,464],{"class":451,"line":459},2,[449,461,463],{"class":462},"s83vy","*",[449,465,467],{"class":466},"sP7_E",",\n",[449,469,471,473,477,481],{"class":451,"line":470},3,[449,472,463],{"class":462},[449,474,476],{"class":475},"stp6e","::",[449,478,480],{"class":479},"s9AJx","before",[449,482,467],{"class":466},[449,484,486,488,490,493],{"class":451,"line":485},4,[449,487,463],{"class":462},[449,489,476],{"class":475},[449,491,492],{"class":479},"after",[449,494,495],{"class":466}," {\n",[449,497,499,503,506,510],{"class":451,"line":498},5,[449,500,502],{"class":501},"soE4H","    box-sizing",[449,504,505],{"class":466},":",[449,507,509],{"class":508},"s_hVV"," border-box",[449,511,512],{"class":466},";\n",[449,514,516],{"class":451,"line":515},6,[449,517,518],{"class":466},"}\n",[449,520,522],{"class":451,"line":521},7,[449,523,525],{"emptyLinePlaceholder":524},true,"\n",[449,527,529],{"class":451,"line":528},8,[449,530,531],{"class":455},"\u002F* 策略 B：在根元素设定，子元素继承（便于组件库局部改回 content-box） *\u002F\n",[449,533,535,538],{"class":451,"line":534},9,[449,536,537],{"class":462},"html",[449,539,495],{"class":466},[449,541,543,545,547,549],{"class":451,"line":542},10,[449,544,502],{"class":501},[449,546,505],{"class":466},[449,548,509],{"class":508},[449,550,512],{"class":466},[449,552,554],{"class":451,"line":553},11,[449,555,518],{"class":466},[449,557,559,561],{"class":451,"line":558},12,[449,560,463],{"class":462},[449,562,467],{"class":466},[449,564,566,568,570,572],{"class":451,"line":565},13,[449,567,463],{"class":462},[449,569,476],{"class":475},[449,571,480],{"class":479},[449,573,467],{"class":466},[449,575,577,579,581,583],{"class":451,"line":576},14,[449,578,463],{"class":462},[449,580,476],{"class":475},[449,582,492],{"class":479},[449,584,495],{"class":466},[449,586,588,590,592,595],{"class":451,"line":587},15,[449,589,502],{"class":501},[449,591,505],{"class":466},[449,593,594],{"class":508}," inherit",[449,596,512],{"class":466},[449,598,600],{"class":451,"line":599},16,[449,601,518],{"class":466},[23,603,604,605,607,608,610,611,613,614,616,617,30],{},"单个元素可覆盖为 ",[32,606,275],{}," 或 ",[32,609,292],{},"。引入第三方组件库时，若对方按 ",[32,612,275],{}," 设计尺寸，混用全局 ",[32,615,292],{}," 可能导致对不齐，需在组件根节点单独设回 ",[32,618,275],{},[72,620,622],{"id":621},"外边距折叠margin-collapsing","外边距折叠（margin collapsing）",[23,624,625,626,629,630,633],{},"仅发生在",[27,627,628],{},"块级格式化上下文","中，且",[27,631,632],{},"只影响垂直方向","相邻外边距（水平方向相邻 margin 不折叠）。典型情况：",[177,635,636,639,642],{},[180,637,638],{},"相邻兄弟块元素的上下 margin 相遇；",[180,640,641],{},"父元素与第一个\u002F最后一个子元素的 margin 相遇（中间无 border、padding、行内内容等隔开时）；",[180,643,644],{},"空块元素自身的上下 margin 相遇。",[23,646,647,648,651,652,654,391,657,607,660,663,664,667],{},"折叠后取",[27,649,650],{},"较大","的正 margin；若均为负值则取绝对值最大者；一正一负则代数相加。",[328,653],{},[27,655,656],{},"注意",[32,658,659],{},"display: flex",[32,661,662],{},"display: grid"," 的 flex\u002Fgrid 容器",[27,665,666],{},"不会","发生子项之间的外边距折叠。",[72,669,670],{"id":670},"调试与实践",[177,672,673,680,689,705],{},[180,674,675,676,679],{},"浏览器开发者工具（Chrome \u002F Firefox \u002F Safari 等）的 ",[27,677,678],{},"Layout \u002F 盒模型"," 面板可直观看到 content、padding、border、margin 各层数值。",[180,681,682,683,685,686,688],{},"全局 ",[32,684,292],{}," 便于“设多宽就是多宽”的心算；表单控件在部分浏览器中默认接近 ",[32,687,292],{},"，与通配重置混用时需留意一致性。",[180,690,691,692,695,696,698,699,701,702,704],{},"使用 ",[32,693,694],{},"width: 100%"," 的同时再加 ",[32,697,136],{}," 时，",[32,700,275],{}," 容易撑破父级；",[32,703,292],{}," 更易保持在父级宽度内。",[180,706,707,715,716,719,720,722,723,725,726,729,730,30],{},[27,708,709,35,712],{},[32,710,711],{},"min-width",[32,713,714],{},"max-width"," 约束的是",[27,717,718],{},"用于布局的宽度","（对 ",[32,721,292],{}," 即 border box）；与 ",[45,724,48],{"href":47}," 联用时，flex 项默认 ",[32,727,728],{},"min-width: auto"," 会阻止收缩到小于内容，溢出时常设 ",[32,731,732],{},"min-width: 0",[72,734,735],{"id":735},"总结",[177,737,738,748,758,767,781],{},[180,739,740,741,744,745,747],{},"四层：",[27,742,743],{},"Content → Padding → Border → Margin","；",[32,746,186],{},"、阴影不改变布局盒尺寸。",[180,749,750,391,755,757],{},[27,751,752,754],{},[32,753,275],{},"（默认）",[32,756,34],{}," 只管内容区；padding \u002F border 叠在外面。",[180,759,760,391,764,766],{},[27,761,762],{},[32,763,292],{},[32,765,34],{}," 含内容、padding、border；改 padding \u002F border 主要挤压内容区。",[180,768,769,776,777,780],{},[27,770,771,773,774],{},[32,772,172],{}," 不计入 ",[32,775,34],{},"，但影响与相邻元素的间距；块级垂直方向注意 ",[27,778,779],{},"margin 折叠"," 与 flex\u002Fgrid 的例外。",[180,782,783,784,786,787,30],{},"推荐在项目中统一 ",[32,785,42],{},"；与旧组件或设计稿按“内容区宽”对齐时，局部使用 ",[32,788,275],{},[72,790,791],{"id":791},"参考文献",[23,793,794],{},"以下链接在编写时均可正常访问：",[83,796,797,807],{},[86,798,799],{},[89,800,801,804],{},[92,802,803],{},"资料",[92,805,806],{},"说明",[102,808,809,822,838,850,862,876,888],{},[89,810,811,819],{},[107,812,813],{},[45,814,818],{"href":815,"rel":816},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_box_model\u002FIntroduction_to_the_CSS_box_model",[817],"nofollow","MDN：CSS 基础框盒模型介绍",[107,820,821],{},"中文：四层区域与边界概念",[89,823,824,831],{},[107,825,826],{},[45,827,830],{"href":828,"rel":829},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fbox-sizing",[817],"MDN：box-sizing",[107,832,833,35,835,837],{},[32,834,275],{},[32,836,292],{}," 与计算公式",[89,839,840,847],{},[107,841,842],{},[45,843,846],{"href":844,"rel":845},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_box_model\u002FMastering_margin_collapsing",[817],"MDN：掌握外边距折叠",[107,848,849],{},"折叠场景与 flex\u002Fgrid 例外",[89,851,852,859],{},[107,853,854],{},[45,855,858],{"href":856,"rel":857},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-box-4\u002F",[817],"W3C：CSS Box Model Module Level 4",[107,860,861],{},"盒模型官方规范（英文）",[89,863,864,871],{},[107,865,866],{},[45,867,870],{"href":868,"rel":869},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-sizing-3\u002F#box-sizing",[817],"W3C：CSS Box Sizing Module Level 3",[107,872,873,875],{},[32,874,42],{}," 属性规范",[89,877,878,885],{},[107,879,880],{},[45,881,884],{"href":882,"rel":883},"https:\u002F\u002Fcss-tricks.com\u002Falmanac\u002Fproperties\u002Fb\u002Fbox-sizing\u002F",[817],"CSS-Tricks：box-sizing",[107,886,887],{},"图文对比两种盒模型",[89,889,890,897],{},[107,891,892],{},[45,893,896],{"href":894,"rel":895},"https:\u002F\u002Fwww.paulirish.com\u002F2012\u002Fbox-sizing-border-box-ftw\u002F",[817],"Paul Irish：border-box 全局使用建议",[107,898,899,900,902,903,905],{},"经典 ",[32,901,537],{}," + ",[32,904,440],{}," 写法与说明",[907,908,909],"style",{},"html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":221,"searchDepth":459,"depth":459,"links":911},[912,913,920,921,922,923,924],{"id":74,"depth":459,"text":74},{"id":226,"depth":459,"text":914,"children":915},"盒模型的类型（box-sizing）",[916,918],{"id":305,"depth":470,"text":917},"标准盒模型（content-box，初始值）",{"id":362,"depth":470,"text":919},"边框盒模型（border-box）",{"id":424,"depth":459,"text":425},{"id":621,"depth":459,"text":622},{"id":670,"depth":459,"text":670},{"id":735,"depth":459,"text":735},{"id":791,"depth":459,"text":791},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fmodel","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fmodel.md","md",{"items":930},[931,935,939,943,947,951],{"path":932,"title":933,"description":934,"category":10,"score":515},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":936,"title":937,"description":938,"category":10,"score":515},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":940,"title":941,"description":942,"category":10,"score":515},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":944,"title":945,"description":946,"category":10,"score":515},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":948,"title":949,"description":950,"category":10,"score":515},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":952,"title":953,"description":954,"category":10,"score":515},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":956,"title":12,"items":957,"index":542,"prev":1017,"next":1018},"booklet\u002Fweb\u002Fcss",[958,962,964,968,972,975,979,983,986,990,992,993,997,1001,1005,1009,1010,1011,1012,1013],{"path":959,"title":960,"date":961,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":952,"title":953,"date":963,"pinned":15},"2025-05-01",{"path":965,"title":966,"date":967,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":969,"title":970,"date":971,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":47,"title":973,"date":974,"pinned":15},"弹性盒子","2020-09-29",{"path":976,"title":977,"date":978,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":980,"title":981,"date":982,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":52,"title":984,"date":985,"pinned":15},"网格布局","2020-11-09",{"path":987,"title":988,"date":989,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":932,"title":933,"date":991,"pinned":15},"2026-07-23",{"path":7,"title":8,"date":14,"pinned":15},{"path":994,"title":995,"date":996,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 特性概览","2021-11-09",{"path":998,"title":999,"date":1000,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1002,"title":1003,"date":1004,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":1006,"title":1007,"date":1008,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":936,"title":937,"date":991,"pinned":15},{"path":940,"title":941,"date":991,"pinned":15},{"path":944,"title":945,"date":991,"pinned":15},{"path":948,"title":949,"date":991,"pinned":15},{"path":1014,"title":1015,"date":1016,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",{"path":932,"title":933,"date":991,"pinned":15},{"path":994,"title":995,"date":996,"pinned":15}]