前几天帮一个三年经验的前端朋友做模拟面试我把几个看似“送分”的HTML/CSS问题连着问了一遍DOCTYPE不写会怎样CSS优先级到底怎么算flex: 1 里的三个值分别代表什么结果有点出乎意料——很多能背出标准答案的人在最需要解释“为什么”的地方哑了火。这其实正是“前端八股文”最容易被误解的地方。前端八股文不是让你死记硬背面试题答案而是把日常工作中高频使用、但又很少深究的基础原理整理成一套可以随时调用的知识体系。HTML和CSS作为整个前端技术栈的底座恰恰是面试里最常考、也最容易被忽略的部分。这篇内容是我结合这两年面试候选人和带新人过程中的实际观察把HTMLCSS这块的高频考点重新梳理了一遍。适合两类人准备跳槽的求职者以及想回头把底层原理补扎实的在职前端。里面涉及的选择器优先级、BFC、flex/grid、移动端适配、动画性能这些话题基本就是一线团队面试里的常客。看完你会发现很多“八股文”背后是有清晰逻辑的不需要靠背。1. 一线面试里HTMLCSS到底在考什么不少候选人有个误区觉得基础题只是热身真正决定offer的是框架源码和项目经验。但现实恰恰相反我参与过的几十场前端面试里HTML/CSS基础题几乎出现在每一轮而且往往是追问最密集的部分。原因不复杂。框架迭代快业务代码沉淀快但HTML的渲染机制、CSS的层叠规则、布局系统的底层逻辑是浏览器二十多年没变过的地基。面试官通过这几个话题能很快判断出一个人是真的理解前端还是仅仅会用框架摆页面。高频问题大致集中在几个方向HTML结构DOCTYPE、标准模式与怪异模式、meta标签、语义化、Canvas/SVG。CSS核心机制选择器优先级、层叠上下文、BFC/IFC、盒模型。布局方案flex、grid、传统定位、移动端适配。视觉与交互过渡动画、渐变、transform、滚动。工程化联动微前端样式隔离、原子化CSS、Web Worker、小程序兼容。面试官通常不满足于你背出结论。比如问“CSS优先级怎么算”期待的不只是“id大于class”这句话而是你能否准确说出!important、内联样式、选择器权重、源顺序四者之间的协作关系问“flex: 1”时能不能同时把flex-grow、flex-shrink、flex-basis对剩余空间的影响讲透。也正因如此这篇文章的顺序我特意安排成了“先理解浏览器机制再谈具体用法最后给答题技巧”而不是按标签逐个罗列。1.1 为什么基础题最容易“一票否决”基础题能暴露的不只是记忆还有思维习惯。我见过候选人能画出完整React fiber架构却解释不清楚img的alt属性为什么重要。不能说后一个问题更简单它们只是处于不同层级。另外基础题还有一个隐藏属性——可以用来验证候选人项目描述的真实性。一个说自己做过复杂后台管理系统的人如果连CSS选择器权重都算错那他说“重构过组件库”的可信度就大打折扣了。1.2 我的复习建议按“机制-应用-坑”三层展开对一个知识点的掌握程度我通常用三层来衡量能说出它是什么能做什么。能解释它的底层机制能对比相近概念。能说出工作中踩过的坑以及为什么会有这个坑。比如BFC第一层是“BFC是块级格式化上下文”第二层是“当元素满足overflow不为visible、float、position为absolute或fixed、display为inline-block等条件时会触发BFC内部子元素不会影响外部布局”第三层是“我在实现两栏布局时就用它清除过浮动也用它解决过margin穿透问题”。面试准备如果按这个方式推进会比单纯刷题高效得多。下面的内容基本就是按这个思路展开的。2. HTML高频考点语义化、DOCTYPE与meta的答题深度2.1 DOCTYPE和标准模式的前因后果!DOCTYPE html几乎是每个HTML文件的第一行但很多人只记得“要写”不记得“为什么要写”。历史上的浏览器有两种渲染模式标准模式standards mode和怪异模式quirks mode。在怪异模式下浏览器沿用IE5时代的一些非标准盒子模型和行为比如盒子的宽度计算方式不同、行内元素的处理不同。DOCTYPE声明的作用就是告诉浏览器“请用标准模式渲染这份文档。”HTML5的DOCTYPE只需要一句!DOCTYPE html因为它不再引用具体的DTD文档类型定义只是作为一个开关让浏览器进入标准模式。如果你不写这行或者写成一个老旧的DTD浏览器可能会进入怪异模式导致同一套CSS在不同环境表现不一致。面试时这里有一个加分细节可以把怪异模式下最典型的差异讲出来比如怪异模式中width包含padding和border实际上等于全局box-sizing: border-box的效果。能讲到这一层已经不是背诵了而是真的理解。我平时写页面时还会顺手把html langzh-CN写上这也是一个容易忽略的小点。lang属性标记页面语言对搜索引擎和屏幕阅读器都有帮助面试谈语义化时可以顺带提一句显得细节到位。2.2 meta标签不只是charsetmeta标签在面试里经常被一带而过但它其实是页面信息控制的核心。最常见的meta charsetutf-8解决的是编码问题防止中文乱码。面试时如果提到可以顺带说明在HTML5规范里charset必须出现在前1024字节内否则浏览器在解析早期字节时可能拿到错误编码导致乱码。viewport是移动端页面的关键meta nameviewport contentwidthdevice-width, initial-scale1.0, viewport-fitcoverwidthdevice-width让布局宽度跟随设备宽度initial-scale1.0控制初始缩放viewport-fitcover在iPhone X那种带刘海屏的设备上特别重要可以让页面内容延展到安全区外再配合env(safe-area-inset-bottom)做适配。搜索引擎相关的description、打开社交分享时的og标签、老版本IE的X-UA-Compatible都是常见考点。整理时建议把它们按“编码/视口/SEO/社交分享/兼容”分类记忆答题时也能有条理地展开。提示实际开发中还有一个高频小问题——“本地双击打开HTML文件样式丢失”。很多情况下不是CSS写错了而是本地file协议编码或相对路径解析问题。理解了charset和浏览器解析机制这道题就能顺带解决。2.3 语义化标签面试官真正在考察什么语义化标签包括header、nav、main、article、section、aside、footer、figure等。面试官问语义化一般考察三件事SEO、可访问性和代码可读性。搜索引擎的爬虫需要理解页面结构语义化标签让爬虫能直接识别导航区和正文区屏幕阅读器依赖语义化标签告诉视障用户“这里是一个按钮”“那里是主内容区”对开发团队来说语义化让代码结构像目录一样清晰新人接手也能快速定位。容易被忽略的是标题层级h1到h6。一个页面最好只有一个h1h1到h6的层级应该按内容重要性递减而不是按字号大小的视觉需求跳跃使用。把h3当h1用对SEO和可访问性都是减分项。面试里如果能主动补充“语义化标签本身不改变默认样式需要配合CSS重置或自定义样式”这样的细节会让回答更完整。很多面试者以为用了语义化标签就自带样式这是常见误区。2.4 Canvas与SVG的选择逻辑Canvas和SVG的对比也是HTML部分的高频题。简单记忆可以这么理解SVG是矢量绘图用DOM描述图形Canvas是位图绘图用JavaScript像素级绘制。需要展开的细节是适用场景维度SVGCanvas图形描述DOM节点像素点缩放效果矢量无损位图会失真事件绑定元素自带事件需要手动计算坐标性能图形多时DOM压力大适合大量重绘典型场景图标、Logo、地图游戏、图表、视频处理SVG适合图标、Logo、地图这类需要缩放不失真、且需要监听元素事件的场景因为它每个图形都是独立DOM节点自带事件模型Canvas适合游戏、图表、视频处理等大量重绘和复杂图形场景因为它不走DOM渲染性能高。但这几年实际项目里Canvas图表库和大规模SVG图标库都在互相学习面试里最好的回答方式是结合自己用过的场景举例而不是只背对比表。另外实际工作中还会遇到HTML转Markdown、HTML导入表格这类工具开发需求本质都是对DOM结构的解析与序列化对前端来说也算一个有意思的扩展方向。3. CSS选择器、优先级与层叠机制能背不等于会用3.1 优先级计算的“硬核公式”选择器优先级是CSS最基础的考点也是翻车率最高的地方。它的计算规则不是“class多还是id多”这种模糊印象而是一个确定性的四位数组合。权重计算可以简化成内联样式权重最高然后是ID选择器数量、类/属性/伪类选择器数量、元素/伪元素选择器数量最后按源码顺序“同权重后写的覆盖先写的”。我面试时经常问的经典例子/* 页面结构: div idapp classcontainerp classtexthello/p/div */ #app .text { color: red; } /* (0,1,1,0) */ .container p.text { color: blue; } /* (0,0,2,1) */第一行权重高于第二行所以最终颜色是red。如果加上!important又会压过所有普通声明但!important之间仍然按上面规则比较而且内联样式加!important的优先级会覆盖普通!important。这里是很容易被忽视的点:not()、:is()等伪类本身不参与权重计算但它们参数里选择器的权重是参与计算的。比如:not(.a)的权重等于.a而不是零。3.2 BFC一块“独立结界”的实用价值BFCBlock Formatting Context块级格式化上下文是CSS布局里的核心概念。通俗点说BFC是一块“独立结界”结界内部的元素布局不会影响外部外部也不会影响内部。触发的条件有这些常见情况根元素html。float不为none。position为absolute或fixed。display为inline-block、table-cell、flex、grid。overflow不为visible比如hidden、auto、scroll。BFC最常见的三个应用场景清除浮动。父元素没有显式高度时子元素float后父元素高度塌陷给父元素建一个BFC就能把浮动子元素的高度也算进去。避免margin穿透。父子元素相邻的垂直margin会合并给父元素建BFC后可以阻止这种合并。两栏自适应布局。左侧固定宽度浮动右侧触发BFC后不会环绕到左侧下方而是自动填满剩余空间。面试的时候如果能把BFC和IFC行内格式化上下文放在一起对比会显得更有体系。IFC控制行内元素在一行内的排列方式比如text-align、vertical-align、line-height这些属性都依赖IFC的规则。3.3 层叠上下文与z-index的误区很多前端以为z-index大就一定盖在上面实际上z-index只有在同一个层叠上下文里比较才有意义。触发层叠上下文的属性非常多除了positionz-index还有opacity小于1的元素。transform、filter、perspective属性不为none。mix-blend-mode不为normal。will-change指定了上述属性。这些都会创建一个独立的层叠上下文。这就意味着一个z-index为0但带opacity的元素能和z-index为9999的元素互相独立后者的子元素未必能盖到前者的上面。我在实际项目里踩过最深的坑给一个弹窗组件加了transform: translate(-50%, -50%)做居中结果弹窗里的子元素怎么都盖不住遮罩层——因为弹窗本身成了独立层叠上下文。排查半天才想起来最高层的比较基准已经变了。顺便提一句现在越来越多团队用原子化CSSAtomic CSS来管理样式本质上是通过极小的工具类控制单一属性好处是样式复用率高、打包体积小代价是HTML里类名会变得很长。面试时可以谈它和BEM等语义化命名方案的取舍。4. 盒模型、flex与grid布局三件套的底层逻辑4.1 content-box和border-box全局设置不是小事盒模型是最简单的知识点但全局如何设置在团队里反而是需要认真决策的事。content-box是浏览器默认行为width只包含内容区padding和border会额外增加盒子的宽度border-box是width包含content、padding和border的总宽度。在实际布局中border-box直观多了所以很多组件库和团队统一做全局重置*, *::before, *::after { box-sizing: border-box; }面试时这种重置值得展开讲一句通配选择器直接应用到所有元素在性能上会有极小影响。如果担心可以用继承式写法html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; }这样在第三方组件的根节点上覆盖回content-box也更容易。代码洁癖和可维护性在面试官眼里都是加分项。4.2 flex布局为什么“flex: 1”能撑满剩余空间flex布局是移动端和现代后台系统的绝对主力。它的核心思路是容器决定主轴方向项目在主轴和交叉轴上分配空间。主轴由flex-direction决定默认row水平排列交叉轴默认垂直。justify-content控制主轴对齐align-items控制交叉轴对齐align-content处理多根轴线在交叉轴上的分布。高频考点flex: 1实际上是三个属性的简写flex-grow: 1有剩余空间时项目按比例放大。flex-shrink: 1空间不足时项目按比例缩小。flex-basis: 0%项目在分配空间前的基准尺寸是0。当flex-basis是0%时项目才会基于剩余空间来均分这也是flex:1经常用来“等分填满”的原因。如果只写flex-grow:1flex-basis默认auto项目会以自身内容宽度为基准分配结果往往不是想要的均分效果。提示flex容器里子元素默认min-width: auto当子项内容过长时它不会收缩到内容宽度以下这会破坏等分布局。解决办法是给子项设置min-width: 0这在做横向滚动列表或表格列自适应时几乎必用。flex的gap属性现在已经是主流支持了直接给容器设置gap: 16px就能控制子项间距不需要再给每个子项写margin。我在新项目里基本都是flexgap组合代码简洁很多。4.3 grid网格什么时候该从flex切换到gridgrid和flex不是互相替代的关系而是分工不同。flex更擅长一维布局主轴方向上的空间分配grid则是二维布局行列同时控制。grid的核心编写逻辑是容器上用grid-template-columns和grid-template-rows定义网格轨道子项上用grid-column和grid-row指定占据区域。fr是grid特有的单位代表剩余空间的分配比例。比如grid-template-columns: 1fr 2fr会把容器宽度分成三份第二列占两份。还有一个很实用的写法grid-template-areas: header header sidebar main footer footer;配合子项的grid-area属性可以把复杂整体布局直接“画”出来可读性比写一堆行列编号高得多。我之前重构过一套后台系统的页面骨架用的就是grid areas方案代码量比浮动布局减少了一半以上。面试里常见的对比提问是“圣杯布局怎么做”。用flex可以这样处理用grid也可以关键是要说清楚两种方案各自适合什么场景不确定内容高度、需要灵活换行时flex更顺手需要同时控制行列、整体区域划分明确时grid更合适。4.4 容器内文本位置调整的几个关键属性“怎么调整CSS容器里的文本位置”是很多新手都会搜的问题。这个问题的答案要看文本处于哪种上下文。如果是块级容器里水平居中用text-align: center垂直居中如果行高设置等于容器高度一行文本可以居中多行文本就会出问题。更通用的方案是flex或grid配合align-items/justify-content.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ }如果容器高度不固定也可以结合padding撑开空间。这里要理解的一点是文本并不是一个独立的盒模型元素它的对齐依赖所在行盒和格式上下文。理解了这一点面试里追问的line-height、vertical-align问题就都能顺下来。5. 视觉物化动画、渐变与3D变换5.1 transition和animation从“状态变化”到“关键帧控制”CSS动画有两个层级transition做状态过渡animation做关键帧动画。transition需要指定触发条件比如hover之后属性变化它会从旧值过渡到新值。animation则不需要外部触发可以设置无限循环、delay、direction等通过keyframes定义多个阶段。一个常见的问题是“transition和animation怎么选”。简单判断标准只有一个开始和一个结束用transition中间有多个阶段、需要循环或精确控制用animation。性能上要特别提醒动画属性尽量用transform和opacity避免直接动画width、height、left、top这些会触发重排的属性。重排意味着浏览器要重新计算布局这在移动端会明显感觉到卡顿。transform和opacity走的是合成器不会触发重排和重绘。5.2 字体渐变和旋转3D的几行代码字体渐变在面试里不算高频但做活动页时经常遇到。实现原理是给文字设置透明颜色作为前景色再用background-clip: text把背景裁剪到文字范围内。.gradient-text { background-image: linear-gradient(90deg, #ff6a00, #ee0979); -webkit-background-clip: text; background-clip: text; color: transparent; }注意background-clip: text需要浏览器前缀而且文字本身不能有背景色否则裁剪效果会被盖住。rotate3d是transform里容易被问到的3D函数。它的第一个参数是旋转轴向量x, y, z后面是角度。比如transform: rotate3d(1, 1, 0, 45deg)表示绕从原点到(1,1,0)这个方向的轴线旋转45度。真正让3D变换“立体”起来还需要配合perspective透视以及在父容器上设置transform-style: preserve-3d否则子元素会被压平到同一平面。5.3 用几行CSS做个涟漪光圈扩散效果“CSS涟漪光圈扩散”是很多剪报资料里的案例做按钮点击反馈和地图定位时很常见。核心思路是利用animation的多阶段缩放和透明度变化.ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); animation: ripple 1.5s ease-out infinite; } keyframes ripple { 0% { transform: scale(0); opacity: 0.8; } 100% { transform: scale(3); opacity: 0; } }配合will-change: transform, opacity提前告诉浏览器哪些属性会被改变可以让合成器提前准备。实际项目中涟漪的光圈可以用伪元素实现避免增加额外DOM。这类效果在“CSS动画效果网站”上搜一圈总能找到漂亮的参考但面试时如果能现场写出来印象分会好很多。5.4 一键返回顶部的算法和滚动动画“html一键返回顶部算法”是常见业务需求。最简单的实现是window.scrollTo(0, 0)但没有动画体验生硬。现代浏览器里一行CSS就能解决html { scroll-behavior: smooth; }配合锚点跳转或JS的scrollIntoView可以自动得到平滑滚动效果。如果需要自定义缓动就要自己算每一帧的位置常见做法是用requestAnimationFrame按时间比例插值function scrollToTop(duration 500) { const start window.scrollY; const startTime performance.now(); function step(now) {