[{"data":1,"prerenderedAt":680},["ShallowReactive",2],{"doc-\u002Fdocs\u002Finterview-css-layout":3,"docs-all":576},{"id":4,"title":5,"body":6,"category":562,"date":563,"description":564,"draft":565,"extension":566,"meta":567,"navigation":182,"path":568,"seo":569,"source":570,"stem":571,"tags":572,"__hash__":575},"docs\u002Fdocs\u002Finterview-css-layout.md","CSS 与布局考点",{"type":7,"value":8,"toc":552},"minimark",[9,14,38,55,58,61,65,76,85,88,91,94,98,107,491,495,498,534,538,545,548],[10,11,13],"h2",{"id":12},"em-与-rem","em 与 rem",[15,16,17,21,22,26,27,21,30,33,34,37],"p",{},[18,19,20],"code",{},"em"," 相对于",[23,24,25],"strong",{},"父元素","的字体大小，",[18,28,29],{},"rem",[23,31,32],{},"根元素","（",[18,35,36],{},"html","）的字体大小。",[15,39,40,41,44,45,47,48,51,52,54],{},"三种单位的取舍：",[18,42,43],{},"px"," 是精确单位但不利于响应式布局；",[18,46,20],{}," 以父节点 ",[18,49,50],{},"font-size"," 为参考点，多层嵌套时标准不统一容易造成混乱；",[18,53,29],{}," 只需在根元素上确定一个参考值，是移动端适配的主流选择。",[10,56,57],{"id":57},"移动端适配方案",[15,59,60],{},"主要有三种，各有适用场景。",[62,63,64],"h3",{"id":64},"流式布局",[15,66,67,68,71,72,75],{},"CSS2 时代就有的方案，主要靠百分比排版，页面主要区域的尺寸使用百分数，搭配 ",[18,69,70],{},"min-width","、",[18,73,74],{},"max-width"," 使用。",[15,77,78,81,82,84],{},[23,79,80],{},"缺点很明显","：宽度用百分比定义，但高度和文字大小大多仍用 ",[18,83,43],{}," 固定，因此在大屏手机下会出现页面元素宽度被拉得很长、而高度和文字大小保持不变的割裂感。",[62,86,87],{"id":87},"响应式布局",[15,89,90],{},"关键技术是 CSS3 的媒体查询，监测屏幕尺寸后有针对性地更改布局。特点是每个分辨率下都有一套布局样式，元素位置和大小都会变。",[15,92,93],{},"优点是能同时适配 PC 和移动端，做得足够细致效果很完美。缺点是媒体查询的断点是有限且需要枚举的，只能覆盖主流尺寸，工作量大且设计需要出多个版本。",[62,95,97],{"id":96},"rem-布局","REM 布局",[15,99,100,101,103,104,106],{},"在根元素上按屏幕宽度设定 ",[18,102,50],{},"，页面内所有尺寸用 ",[18,105,29],{}," 表达，从而实现盒子宽高的自适应。",[108,109,114],"pre",{"className":110,"code":111,"language":112,"meta":113,"style":113},"language-css shiki shiki-themes github-light github-dark","@media screen and (min-width: 640px) {\n  html { font-size: 100px; }\n}\n\n@media screen and (max-width: 639px) and (min-width: 480px) {\n  html { font-size: 75px; }\n}\n\n@media screen and (max-width: 479px) and (min-width: 414px) {\n  html { font-size: 64.6875px; }\n}\n\n@media screen and (max-width: 413px) and (min-width: 375px) {\n  html { font-size: 58.59px; }\n}\n\n@media screen and (max-width: 374px) and (min-width: 360px) {\n  html { font-size: 56.25px; }\n}\n\n@media screen and (max-width: 359px) {\n  html { font-size: 50px; }\n}\n","css","",[18,115,116,149,171,177,184,223,241,246,251,288,306,311,316,353,371,376,381,418,436,441,446,468,486],{"__ignoreMap":113},[117,118,121,125,129,132,136,138,141,144,146],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"szBVR","@media",[117,126,128],{"class":127},"sj4cs"," screen",[117,130,131],{"class":123}," and",[117,133,135],{"class":134},"sVt8B"," (",[117,137,70],{"class":127},[117,139,140],{"class":134},": ",[117,142,143],{"class":127},"640",[117,145,43],{"class":123},[117,147,148],{"class":134},") {\n",[117,150,152,156,159,161,163,166,168],{"class":119,"line":151},2,[117,153,155],{"class":154},"s9eBZ","  html",[117,157,158],{"class":134}," { ",[117,160,50],{"class":127},[117,162,140],{"class":134},[117,164,165],{"class":127},"100",[117,167,43],{"class":123},[117,169,170],{"class":134},"; }\n",[117,172,174],{"class":119,"line":173},3,[117,175,176],{"class":134},"}\n",[117,178,180],{"class":119,"line":179},4,[117,181,183],{"emptyLinePlaceholder":182},true,"\n",[117,185,187,189,191,193,195,197,199,202,204,207,210,212,214,216,219,221],{"class":119,"line":186},5,[117,188,124],{"class":123},[117,190,128],{"class":127},[117,192,131],{"class":123},[117,194,135],{"class":134},[117,196,74],{"class":127},[117,198,140],{"class":134},[117,200,201],{"class":127},"639",[117,203,43],{"class":123},[117,205,206],{"class":134},") ",[117,208,209],{"class":123},"and",[117,211,135],{"class":134},[117,213,70],{"class":127},[117,215,140],{"class":134},[117,217,218],{"class":127},"480",[117,220,43],{"class":123},[117,222,148],{"class":134},[117,224,226,228,230,232,234,237,239],{"class":119,"line":225},6,[117,227,155],{"class":154},[117,229,158],{"class":134},[117,231,50],{"class":127},[117,233,140],{"class":134},[117,235,236],{"class":127},"75",[117,238,43],{"class":123},[117,240,170],{"class":134},[117,242,244],{"class":119,"line":243},7,[117,245,176],{"class":134},[117,247,249],{"class":119,"line":248},8,[117,250,183],{"emptyLinePlaceholder":182},[117,252,254,256,258,260,262,264,266,269,271,273,275,277,279,281,284,286],{"class":119,"line":253},9,[117,255,124],{"class":123},[117,257,128],{"class":127},[117,259,131],{"class":123},[117,261,135],{"class":134},[117,263,74],{"class":127},[117,265,140],{"class":134},[117,267,268],{"class":127},"479",[117,270,43],{"class":123},[117,272,206],{"class":134},[117,274,209],{"class":123},[117,276,135],{"class":134},[117,278,70],{"class":127},[117,280,140],{"class":134},[117,282,283],{"class":127},"414",[117,285,43],{"class":123},[117,287,148],{"class":134},[117,289,291,293,295,297,299,302,304],{"class":119,"line":290},10,[117,292,155],{"class":154},[117,294,158],{"class":134},[117,296,50],{"class":127},[117,298,140],{"class":134},[117,300,301],{"class":127},"64.6875",[117,303,43],{"class":123},[117,305,170],{"class":134},[117,307,309],{"class":119,"line":308},11,[117,310,176],{"class":134},[117,312,314],{"class":119,"line":313},12,[117,315,183],{"emptyLinePlaceholder":182},[117,317,319,321,323,325,327,329,331,334,336,338,340,342,344,346,349,351],{"class":119,"line":318},13,[117,320,124],{"class":123},[117,322,128],{"class":127},[117,324,131],{"class":123},[117,326,135],{"class":134},[117,328,74],{"class":127},[117,330,140],{"class":134},[117,332,333],{"class":127},"413",[117,335,43],{"class":123},[117,337,206],{"class":134},[117,339,209],{"class":123},[117,341,135],{"class":134},[117,343,70],{"class":127},[117,345,140],{"class":134},[117,347,348],{"class":127},"375",[117,350,43],{"class":123},[117,352,148],{"class":134},[117,354,356,358,360,362,364,367,369],{"class":119,"line":355},14,[117,357,155],{"class":154},[117,359,158],{"class":134},[117,361,50],{"class":127},[117,363,140],{"class":134},[117,365,366],{"class":127},"58.59",[117,368,43],{"class":123},[117,370,170],{"class":134},[117,372,374],{"class":119,"line":373},15,[117,375,176],{"class":134},[117,377,379],{"class":119,"line":378},16,[117,380,183],{"emptyLinePlaceholder":182},[117,382,384,386,388,390,392,394,396,399,401,403,405,407,409,411,414,416],{"class":119,"line":383},17,[117,385,124],{"class":123},[117,387,128],{"class":127},[117,389,131],{"class":123},[117,391,135],{"class":134},[117,393,74],{"class":127},[117,395,140],{"class":134},[117,397,398],{"class":127},"374",[117,400,43],{"class":123},[117,402,206],{"class":134},[117,404,209],{"class":123},[117,406,135],{"class":134},[117,408,70],{"class":127},[117,410,140],{"class":134},[117,412,413],{"class":127},"360",[117,415,43],{"class":123},[117,417,148],{"class":134},[117,419,421,423,425,427,429,432,434],{"class":119,"line":420},18,[117,422,155],{"class":154},[117,424,158],{"class":134},[117,426,50],{"class":127},[117,428,140],{"class":134},[117,430,431],{"class":127},"56.25",[117,433,43],{"class":123},[117,435,170],{"class":134},[117,437,439],{"class":119,"line":438},19,[117,440,176],{"class":134},[117,442,444],{"class":119,"line":443},20,[117,445,183],{"emptyLinePlaceholder":182},[117,447,449,451,453,455,457,459,461,464,466],{"class":119,"line":448},21,[117,450,124],{"class":123},[117,452,128],{"class":127},[117,454,131],{"class":123},[117,456,135],{"class":134},[117,458,74],{"class":127},[117,460,140],{"class":134},[117,462,463],{"class":127},"359",[117,465,43],{"class":123},[117,467,148],{"class":134},[117,469,471,473,475,477,479,482,484],{"class":119,"line":470},22,[117,472,155],{"class":154},[117,474,158],{"class":134},[117,476,50],{"class":127},[117,478,140],{"class":134},[117,480,481],{"class":127},"50",[117,483,43],{"class":123},[117,485,170],{"class":134},[117,487,489],{"class":119,"line":488},23,[117,490,176],{"class":134},[10,492,494],{"id":493},"viewport-标准设置","viewport 标准设置",[15,496,497],{},"最标准的 viewport 配置需要满足五点：视口宽度与设备保持一致、默认缩放比例 1.0、不允许用户自行缩放、最大与最小缩放比例均为 1.0。",[108,499,502],{"className":500,"code":501,"language":36,"meta":113,"style":113},"language-html shiki shiki-themes github-light github-dark","\u003Cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n",[18,503,504],{"__ignoreMap":113},[117,505,506,509,512,516,519,523,526,528,531],{"class":119,"line":120},[117,507,508],{"class":134},"\u003C",[117,510,511],{"class":154},"meta",[117,513,515],{"class":514},"sScJk"," name",[117,517,518],{"class":134},"=",[117,520,522],{"class":521},"sZZnC","\"viewport\"",[117,524,525],{"class":514}," content",[117,527,518],{"class":134},[117,529,530],{"class":521},"\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\"",[117,532,533],{"class":134},">\n",[10,535,537],{"id":536},"html5-与-css3-考察范围","HTML5 与 CSS3 考察范围",[15,539,540,541,544],{},"HTML5 部分常考语义化标签、音视频处理、Canvas 与 WebGL、History API、",[18,542,543],{},"requestAnimationFrame","、地理位置、WebSocket。",[15,546,547],{},"CSS3 部分常考常规属性、动画、盒子模型、响应式布局。",[549,550,551],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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 .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":113,"searchDepth":173,"depth":173,"links":553},[554,555,560,561],{"id":12,"depth":151,"text":13},{"id":57,"depth":151,"text":57,"children":556},[557,558,559],{"id":64,"depth":173,"text":64},{"id":87,"depth":173,"text":87},{"id":96,"depth":173,"text":97},{"id":493,"depth":151,"text":494},{"id":536,"depth":151,"text":537},"interview","2024-11-03","em 与 rem 的区别、移动端三种适配方案对比、viewport 标准设置与 REM 布局的媒体查询实现。",false,"md",{},"\u002Fdocs\u002Finterview-css-layout",{"title":5,"description":564},null,"docs\u002Finterview-css-layout",[112,36,573,574],"best-practice","notes","fbXlTwZgG6mryGQqPNoFFUwYQGB97QWTE_y4Nbl23lY",[577,587,596,602,612,618,626,628,636,641,648,654,661,668,674],{"path":578,"title":579,"description":580,"date":581,"category":582,"tags":583},"\u002Fdocs\u002Ffrontend-coding-standards","前端团队编码规范","HTML \u002F CSS \u002F JavaScript 三端统一的团队编码约定，含缩进、命名、语法与禁用项，可直接作为 Code Review 依据。","2025-12-17","standards",[36,112,584,585,573,586],"javascript","es6","guide",{"path":588,"title":589,"description":590,"date":591,"category":592,"tags":593},"\u002Fdocs\u002Fwindows-mklink","Windows mklink 符号链接用法","mklink 各参数区别与实用场景：目录联接、符号链接与硬链接的选择。","2024-12-18","toolchain",[594,595],"windows","cheatsheet",{"path":597,"title":598,"description":599,"date":600,"category":592,"tags":601},"\u002Fdocs\u002Frandom-color-utils","JS 随机颜色生成方法","几种生成随机 RGB \u002F HEX 颜色的实现方式与各自适用场景。","2024-12-11",[584,595],{"path":603,"title":604,"description":605,"date":606,"category":607,"tags":608},"\u002Fdocs\u002Fcanvas-vs-svg","Canvas 与 SVG 绘图方案选型","对比 Canvas 与 SVG 两种绘图方案的优缺点与适用场景，给出选型判断依据。","2024-12-09","visualization",[609,610,611,573],"canvas","svg","performance",{"path":613,"title":614,"description":615,"date":563,"category":592,"tags":616},"\u002Fdocs\u002Ffree-commercial-fonts","免费可商用字体整理","整理思源黑体、思源宋体等可商用中文字体，规避字体版权风险。",[617,112,574],"font",{"path":619,"title":620,"description":621,"date":563,"category":562,"tags":622},"\u002Fdocs\u002Finterview-browser-network","浏览器与网络考点","从输入 URL 到页面呈现的完整链路，涵盖渲染流程、回流重绘、HTTP 报文与状态码、跨域同源策略与常见攻击方式。",[623,624,625,611,574],"browser","http","network",{"path":568,"title":5,"description":564,"date":563,"category":562,"tags":627},[112,36,573,574],{"path":629,"title":630,"description":631,"date":563,"category":562,"tags":632},"\u002Fdocs\u002Finterview-framework-tooling","框架与工程化考点","React diff 与 setState 机制、Redux 核心组成、Vue 常考清单，以及 Webpack、Vite、Git 的面试要点。",[633,584,634,635,574],"vue","webpack","vite",{"path":637,"title":638,"description":639,"date":563,"category":562,"tags":640},"\u002Fdocs\u002Finterview-javascript-core","JavaScript 核心考点","数据类型、this 绑定、闭包、原型链、异步与数组方法，前端面试中 JS 部分的高频考点与代码示例。",[584,585,574],{"path":642,"title":643,"description":644,"date":563,"category":645,"tags":646},"\u002Fdocs\u002Fjs-module-systems","JavaScript 模块化方案","梳理 CommonJS、AMD、ES Module 等模块化方案的差异与使用方式。","fundamentals",[584,647,585,574],"module-system",{"path":649,"title":650,"description":651,"date":563,"category":645,"tags":652},"\u002Fdocs\u002Fwebsocket-basics","WebSocket 基础","WebSocket 全双工通信协议的事件、方法与基本用法整理。",[653,625,584,574],"websocket",{"path":655,"title":656,"description":657,"date":658,"category":607,"tags":659},"\u002Fdocs\u002Fgojs-getting-started","GoJS 入门实战","从引入方式、画布初始化到节点模板与数据绑定，一份可直接上手的 GoJS 流程图开发笔记。","2024-08-22",[660,584,574],"gojs",{"path":662,"title":663,"description":664,"date":665,"category":607,"tags":666},"\u002Fdocs\u002Fecharts-options-notes","ECharts 配置项速查","整理 ECharts 常用 option 配置：数据格式、坐标轴、图例与交互项的实际用法。","2024-08-09",[667,584,595],"echarts",{"path":669,"title":670,"description":671,"date":672,"category":645,"tags":673},"\u002Fdocs\u002Fhttp-status-codes","HTTP 响应状态码详解","按 1xx 到 5xx 分类梳理 HTTP 状态码的含义与典型使用场景。","2024-06-27",[624,625,595],{"path":675,"title":676,"description":677,"date":678,"category":645,"tags":679},"\u002Fdocs\u002Fhtml-basics","HTML 基础笔记","HTML 语法规范、常用标签、表格与表单元素速查。","2022-06-10",[36,574,595],1788337378844]