[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay":1013,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay":1040},{"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":1009,"stem":1010,"id":1011,"extension":1012},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","display 决定元素生成何种显示盒、参与何种格式化上下文，从而在页面上表现为「独占一行」「排在同一行」或「不参与排版」。它与 盒模型 一起构成布局基础：盒模型管每一层尺寸，display 管盒子在文档中的排布角色。","技能小册",[12,13],"css","display","2024-01-30",false,{"type":17,"value":18,"toc":981},"minimark",[19,23,48,79,86,92,155,173,178,189,219,233,236,242,319,325,409,416,444,451,486,495,570,587,595,614,621,659,670,682,686,729,733,836,839,890,893,896,977],[20,21,8],"h1",{"id":22},"display-与常规流",[24,25,26,29,30,34,35,38,39,44,45,47],"p",{},[27,28,13],"code",{}," 决定元素生成何种",[31,32,33],"strong",{},"显示盒","、参与何种",[31,36,37],{},"格式化上下文","，从而在页面上表现为「独占一行」「排在同一行」或「不参与排版」。它与 ",[40,41,43],"a",{"href":42},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型"," 一起构成布局基础：盒模型管每一层尺寸，",[27,46,13],{}," 管盒子在文档中的排布角色。",[24,49,50,53,54,57,58,61,62,57,65,68,69,73,74,78],{},[31,51,52],{},"常规流（normal flow）"," 指块级与行内元素在文档顺序下的默认排布（含 ",[27,55,56],{},"position: relative"," \u002F ",[27,59,60],{},"sticky"," 仍占位的情形）。",[27,63,64],{},"display: flex",[27,66,67],{},"grid"," 会建立独立的 flex\u002Fgrid 格式化上下文，子项不再按普通块\u002F行内流排列；详见 ",[40,70,72],{"href":71},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","Flex","、",[40,75,77],{"href":76},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","Grid","。",[80,81,83,85],"h2",{"id":82},"display-在做什么",[27,84,13],{}," 在做什么？",[24,87,88,89,91],{},"规范上，",[27,90,13],{}," 同时描述：",[93,94,95,111],"table",{},[96,97,98],"thead",{},[99,100,101,105,108],"tr",{},[102,103,104],"th",{},"维度",[102,106,107],{},"含义",[102,109,110],{},"常见值",[112,113,114,133],"tbody",{},[99,115,116,122,125],{},[117,118,119],"td",{},[31,120,121],{},"外部显示类型",[117,123,124],{},"元素在父级流中占不占一整行",[117,126,127,73,130],{},[27,128,129],{},"block",[27,131,132],{},"inline",[99,134,135,140,143],{},[117,136,137],{},[31,138,139],{},"内部显示类型",[117,141,142],{},"子元素如何布局",[117,144,145,148,149,73,152,154],{},[27,146,147],{},"flow","（默认块\u002F行内流）、",[27,150,151],{},"flex",[27,153,67],{}," 等",[24,156,157,158,161,162,164,165,167,168,172],{},"日常写的 ",[27,159,160],{},"display: block"," 等价于「块级盒子 + 内部流式布局」；",[27,163,64],{}," 等价于「块级 flex 容器」。",[27,166,13],{}," 的初始值为 ",[31,169,170],{},[27,171,132],{},"（与多数 HTML 标签的 UA 默认样式不同，标签会通过用户代理样式表覆盖）。",[174,175,177],"h3",{"id":176},"双关键字语法display-level-3","双关键字语法（Display Level 3）",[24,179,180,181,184,185,188],{},"可分别指定",[31,182,183],{},"外部","与",[31,186,187],{},"内部","显示类型，例如：",[190,191,195],"pre",{"className":192,"code":193,"language":12,"meta":194,"style":194},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","display: block flex; \u002F* 外部 block，内部 flex 容器 *\u002F\ndisplay: inline grid; \u002F* 外部 inline，内部 grid *\u002F\n","",[27,196,197,210],{"__ignoreMap":194},[198,199,202,206],"span",{"class":200,"line":201},"line",1,[198,203,205],{"class":204},"su5hD","display: block flex; ",[198,207,209],{"class":208},"sutJx","\u002F* 外部 block，内部 flex 容器 *\u002F\n",[198,211,213,216],{"class":200,"line":212},2,[198,214,215],{"class":204},"display: inline grid; ",[198,217,218],{"class":208},"\u002F* 外部 inline，内部 grid *\u002F\n",[24,220,221,222,224,225,228,229,232],{},"单关键字 ",[27,223,64],{}," 仍最常用，浏览器会补全为 ",[27,226,227],{},"block flex"," 或 ",[27,230,231],{},"inline flex","（取决于上下文）。",[80,234,235],{"id":235},"常规流中的常见值",[174,237,239,241],{"id":238},"block块级",[27,240,129],{},"（块级）",[243,244,245,253,276,293],"ul",{},[246,247,248,249,252],"li",{},"在常规流中，块级盒子",[31,250,251],{},"前后会换行","，在块向（中文横排多为垂直方向）上依次堆叠。",[246,254,255,256,73,259,73,262,73,265,268,269,271,272,275],{},"可设置 ",[27,257,258],{},"width",[27,260,261],{},"height",[27,263,264],{},"margin",[27,266,267],{},"padding","（受 ",[40,270,43],{"href":42}," 与 ",[27,273,274],{},"box-sizing"," 影响）。",[246,277,278,280,281,284,285,288,289,292],{},[27,279,258],{}," 为 ",[27,282,283],{},"auto"," 时，水平方向通常",[31,286,287],{},"填满父级包含块的内容区","（不是字面意义上的 ",[27,290,291],{},"width: 100%","，但视觉效果常类似「撑满一行」）。",[246,294,295,296,73,299,73,302,305,306,73,309,73,312,315,316,318],{},"典型标签：",[27,297,298],{},"\u003Cdiv>",[27,300,301],{},"\u003Cp>",[27,303,304],{},"\u003Ch1>","–",[27,307,308],{},"\u003Ch6>",[27,310,311],{},"\u003Cul>",[27,313,314],{},"\u003Cform>"," 等（UA 默认多为 ",[27,317,129],{},"）。",[174,320,322,324],{"id":321},"inline行内",[27,323,132],{},"（行内）",[243,326,327,338,367,383,399],{},[246,328,329,330,333,334,337],{},"在常规流中参与",[31,331,332],{},"行内格式化","，与同行的行内内容排在同一行；行宽不足时按规则换行，",[31,335,336],{},"不会","像块级那样在元素前后强制断行。",[246,339,340,343,344,73,347,73,350,353,354,57,356,358,359,362,363,366],{},[31,341,342],{},"非替换","行内元素（如 ",[27,345,346],{},"\u003Cspan>",[27,348,349],{},"\u003Ca>",[27,351,352],{},"\u003Cem>","）的 ",[27,355,258],{},[27,357,261],{}," ",[31,360,361],{},"无效","，尺寸由内容与 ",[27,364,365],{},"line-height"," 等决定。",[246,368,369,343,372,73,375,378,379,57,381,78],{},[31,370,371],{},"替换",[27,373,374],{},"\u003Cimg>",[27,376,377],{},"\u003Cvideo>","）可设 ",[27,380,258],{},[27,382,261],{},[246,384,385,386,392,393,57,395,398],{},"非替换行内元素的 ",[31,387,388,389,391],{},"上下 ",[27,390,264],{}," 不参与行盒高度计算","；",[27,394,267],{},[27,396,397],{},"border"," 可见，但可能叠压相邻行，不会改变行盒在交叉轴上的占位方式。",[246,400,295,401,73,403,73,405,408],{},[27,402,346],{},[27,404,349],{},[27,406,407],{},"\u003Cstrong>"," 等。",[174,410,412,415],{"id":411},"inline-block行内块",[27,413,414],{},"inline-block","（行内块）",[243,417,418,425,441],{},[246,419,420,421,424],{},"外部表现为",[31,422,423],{},"行内级","：可与文字、其他行内\u002F行内块排在同一行。",[246,426,427,428,431,432,57,434,436,437,440],{},"内部为",[31,429,430],{},"块容器","：可设宽高与四向 ",[27,433,264],{},[27,435,267],{},"，并常作为 ",[31,438,439],{},"BFC"," 根（包含内部浮动、阻止与外部 margin 折叠等）。",[246,442,443],{},"场景：导航项、图标按钮、需要固定尺寸又需并排的元素。",[174,445,447,450],{"id":446},"list-item列表项",[27,448,449],{},"list-item","（列表项）",[243,452,453,476],{},[246,454,455,456,459,460,463,464,466,467,57,469,472,473,475],{},"除主盒外还会生成",[31,457,458],{},"标记盒","（项目符号\u002F编号）。",[27,461,462],{},"\u003Cli>"," 的 UA 默认多为 ",[27,465,449],{},"，常与父级 ",[27,468,311],{},[27,470,471],{},"\u003Col>","（",[27,474,160],{},"）配合。",[246,477,478,479,73,482,485],{},"可与 ",[27,480,481],{},"list-style-type",[27,483,484],{},"list-style-position"," 等一起使用。",[80,487,489,271,492],{"id":488},"none-与-visibility-hidden",[27,490,491],{},"none",[27,493,494],{},"visibility: hidden",[93,496,497,512],{},[96,498,499],{},[99,500,501,503,508],{},[102,502],{},[102,504,505],{},[27,506,507],{},"display: none",[102,509,510],{},[27,511,494],{},[112,513,514,527,544,557],{},[99,515,516,521,524],{},[117,517,518],{},[31,519,520],{},"是否生成盒",[117,522,523],{},"否，不参与布局",[117,525,526],{},"是，仍占位",[99,528,529,534,537],{},[117,530,531],{},[31,532,533],{},"是否绘制",[117,535,536],{},"不绘制",[117,538,539,540,543],{},"不绘制（子项可单独 ",[27,541,542],{},"visible","）",[99,545,546,551,554],{},[117,547,548],{},[31,549,550],{},"布局影响",[117,552,553],{},"周围元素会填补其空间",[117,555,556],{},"原空间保留",[99,558,559,564,567],{},[117,560,561],{},[31,562,563],{},"无障碍",[117,565,566],{},"一般从无障碍树移除",[117,568,569],{},"亦常对辅助技术隐藏，但占位仍在",[24,571,572,573,576,577,579,580,582,583,586],{},"要从文档流中",[31,574,575],{},"移除","元素（弹层关闭、条件渲染），用 ",[27,578,507],{},"。仅想「看不见但占位」（占位骨架、防布局跳动）时考虑 ",[27,581,494],{},"；需要动画淡入淡出时可配合 ",[27,584,585],{},"opacity"," 等，并注意无障碍需求。",[174,588,590,591,594],{"id":589},"html-hidden-属性","HTML ",[27,592,593],{},"hidden"," 属性",[24,596,597,598,600,601,603,604,607,608,610,611,613],{},"布尔属性 ",[27,599,593],{}," 在支持的用户代理中会使元素表现为 ",[27,602,507],{},"，且通常",[31,605,606],{},"不参与无障碍树","（与仅 ",[27,609,494],{}," 不同）。动态显示内容时，除移除 ",[27,612,593],{}," 外还需管理焦点（如将焦点移入对话框）。",[80,615,617,618,620],{"id":616},"布局型-display脱离常规流排布","布局型 ",[27,619,13],{},"（脱离常规流排布）",[93,622,623,633],{},[96,624,625],{},[99,626,627,630],{},[102,628,629],{},"值",[102,631,632],{},"说明",[112,634,635,647],{},[99,636,637,644],{},[117,638,639,57,641],{},[27,640,151],{},[27,642,643],{},"inline-flex",[117,645,646],{},"一维弹性布局；后者容器本身为行内级",[99,648,649,656],{},[117,650,651,57,653],{},[27,652,67],{},[27,654,655],{},"inline-grid",[117,657,658],{},"二维网格布局；后者容器本身为行内级",[24,660,661,662,665,666,669],{},"二者会建立 ",[31,663,664],{},"flex \u002F grid 格式化上下文","，子项的外边距折叠规则与常规流不同（参见 ",[40,667,668],{"href":42},"盒模型 · 外边距折叠","）。详细用法见：",[243,671,672,677],{},[246,673,674],{},[40,675,676],{"href":71},"弹性盒子（Flexbox）",[246,678,679],{},[40,680,681],{"href":76},"网格布局（Grid）",[80,683,685],{"id":684},"其他实用值简要","其他实用值（简要）",[243,687,688,704,716],{},[246,689,690,695,696,699,700,703],{},[31,691,692],{},[27,693,694],{},"flow-root","：创建新的",[31,697,698],{},"块级格式化上下文（BFC）","，常用于清除内部浮动、避免与外部 margin 折叠，且比滥用 ",[27,701,702],{},"overflow: hidden"," 语义更清晰。",[246,705,706,711,712,715],{},[31,707,708],{},[27,709,710],{},"contents","：元素自身不生成盒，子元素提升到父级参与布局；",[31,713,714],{},"会改变无障碍树表现","，慎用。",[246,717,718,728],{},[31,719,720,57,722,57,725,154],{},[27,721,93],{},[27,723,724],{},"table-row",[27,726,727],{},"table-cell","：模拟表格布局，多用于特殊排版或兼容场景。",[80,730,732],{"id":731},"如何选择","如何选择？",[93,734,735,745],{},[96,736,737],{},[99,738,739,742],{},[102,740,741],{},"需求",[102,743,744],{},"优先考虑",[112,746,747,756,765,774,786,795,804,815,826],{},[99,748,749,752],{},[117,750,751],{},"段落、区块、占满一行并可设宽高",[117,753,754],{},[27,755,129],{},[99,757,758,761],{},[117,759,760],{},"文本内强调、链接、不换行的小片段",[117,762,763],{},[27,764,132],{},[99,766,767,770],{},[117,768,769],{},"并排且需固定宽高或完整 margin",[117,771,772],{},[27,773,414],{},[99,775,776,779],{},[117,777,778],{},"列表项与符号",[117,780,781,783,784,543],{},[27,782,449],{},"（或语义化 ",[27,785,462],{},[99,787,788,791],{},[117,789,790],{},"从布局中移除",[117,792,793],{},[27,794,507],{},[99,796,797,800],{},[117,798,799],{},"隐藏但保留占位",[117,801,802],{},[27,803,494],{},[99,805,806,809],{},[117,807,808],{},"一维排列、对齐、分剩余空间",[117,810,811,57,813],{},[27,812,151],{},[27,814,643],{},[99,816,817,820],{},[117,818,819],{},"二维行列、页面骨架、卡片矩阵",[117,821,822,57,824],{},[27,823,67],{},[27,825,655],{},[99,827,828,831],{},[117,829,830],{},"包含浮动、避免 margin 折叠",[117,832,833,835],{},[27,834,694],{}," 或 BFC 触发条件",[80,837,838],{"id":838},"总结",[243,840,841,861,868,879],{},[246,842,843,848,849,57,851,57,853,855,856,57,858,860],{},[31,844,845,847],{},[27,846,13],{}," 决定格式化上下文","：",[27,850,129],{},[27,852,132],{},[27,854,414],{}," 属于常规流；",[27,857,151],{},[27,859,67],{}," 建立独立布局上下文。",[246,862,863,864,867],{},"块级「独占一行」、行内「排在同一行」是",[31,865,866],{},"直观说法","；精确行为取决于包含块、书写模式与是否为替换元素。",[246,869,870,878],{},[31,871,872,874,875,877],{},[27,873,491],{}," 不占位，",[27,876,494],{}," 占位","；隐藏交互控件时注意无障碍。",[246,880,881,882,884,885,887,888,78],{},"现代页面：结构区块可用 ",[27,883,129],{}," + ",[40,886,77],{"href":76},"，组件内一排元素用 ",[40,889,72],{"href":71},[80,891,892],{"id":892},"参考文献",[24,894,895],{},"以下链接在编写时均可正常访问：",[93,897,898,907],{},[96,899,900],{},[99,901,902,905],{},[102,903,904],{},"资料",[102,906,632],{},[112,908,909,922,934,948,963],{},[99,910,911,919],{},[117,912,913],{},[40,914,918],{"href":915,"rel":916},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fdisplay",[917],"nofollow","MDN：display",[117,920,921],{},"属性取值、多关键字语法、无障碍说明",[99,923,924,931],{},[117,925,926],{},[40,927,930],{"href":928,"rel":929},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_display\u002FVisual_formatting_model",[917],"MDN：视觉格式化模型",[117,932,933],{},"常规流、盒子生成、定位方案",[99,935,936,943],{},[117,937,938],{},[40,939,942],{"href":940,"rel":941},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FDisplay\u002FBlock_formatting_context",[917],"MDN：区块格式化上下文",[117,944,945,946],{},"BFC 与 ",[27,947,694],{},[99,949,950,957],{},[117,951,952],{},[40,953,956],{"href":954,"rel":955},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fvisibility",[917],"MDN：visibility",[117,958,959,960,962],{},"与 ",[27,961,507],{}," 的对比",[99,964,965,972],{},[117,966,967],{},[40,968,971],{"href":969,"rel":970},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-display-3\u002F",[917],"W3C：CSS Display Module Level 3",[117,973,974,976],{},[27,975,13],{}," 官方规范（英文）",[978,979,980],"style",{},"html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .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":194,"searchDepth":212,"depth":212,"links":982},[983,988,998,1003,1005,1006,1007,1008],{"id":82,"depth":212,"text":984,"children":985},"display 在做什么？",[986],{"id":176,"depth":987,"text":177},3,{"id":235,"depth":212,"text":235,"children":989},[990,992,994,996],{"id":238,"depth":987,"text":991},"block（块级）",{"id":321,"depth":987,"text":993},"inline（行内）",{"id":411,"depth":987,"text":995},"inline-block（行内块）",{"id":446,"depth":987,"text":997},"list-item（列表项）",{"id":488,"depth":212,"text":999,"children":1000},"none 与 visibility: hidden",[1001],{"id":589,"depth":987,"text":1002},"HTML hidden 属性",{"id":616,"depth":212,"text":1004},"布局型 display（脱离常规流排布）",{"id":684,"depth":212,"text":685},{"id":731,"depth":212,"text":732},{"id":838,"depth":212,"text":838},{"id":892,"depth":212,"text":892},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fdisplay","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fdisplay.md","md",{"items":1014},[1015,1020,1024,1028,1032,1036],{"path":1016,"title":1017,"description":1018,"category":10,"score":1019},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",6,{"path":1021,"title":1022,"description":1023,"category":10,"score":1019},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1025,"title":1026,"description":1027,"category":10,"score":1019},"\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":1029,"title":1030,"description":1031,"category":10,"score":1019},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1033,"title":1034,"description":1035,"category":10,"score":1019},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1037,"title":1038,"description":1039,"category":10,"score":1019},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1041,"title":12,"items":1042,"index":987,"prev":1100,"next":1101},"booklet\u002Fweb\u002Fcss",[1043,1047,1049,1053,1054,1057,1061,1065,1068,1072,1074,1076,1080,1084,1088,1092,1093,1094,1095,1096],{"path":1044,"title":1045,"date":1046,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":1037,"title":1038,"date":1048,"pinned":15},"2025-05-01",{"path":1050,"title":1051,"date":1052,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":7,"title":8,"date":14,"pinned":15},{"path":71,"title":1055,"date":1056,"pinned":15},"弹性盒子","2020-09-29",{"path":1058,"title":1059,"date":1060,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":1062,"title":1063,"date":1064,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":76,"title":1066,"date":1067,"pinned":15},"网格布局","2020-11-09",{"path":1069,"title":1070,"date":1071,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":1016,"title":1017,"date":1073,"pinned":15},"2026-07-23",{"path":42,"title":43,"date":1075,"pinned":15},"2023-09-04",{"path":1077,"title":1078,"date":1079,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS 特性概览","2021-11-09",{"path":1081,"title":1082,"date":1083,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1085,"title":1086,"date":1087,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":1089,"title":1090,"date":1091,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":1021,"title":1022,"date":1073,"pinned":15},{"path":1025,"title":1026,"date":1073,"pinned":15},{"path":1029,"title":1030,"date":1073,"pinned":15},{"path":1033,"title":1034,"date":1073,"pinned":15},{"path":1097,"title":1098,"date":1099,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",{"path":1050,"title":1051,"date":1052,"pinned":15},{"path":71,"title":1055,"date":1056,"pinned":15}]