一到铜九铁十我微信就一直没消停过。不是来约饭的是一批朋友、前同事、还有各种网友都在问同一件事前端面试到底还考不考 HTML 和 CSS我的回答每次都一样——考而且往往第一轮就能把你打回原形。很多人简历上写着精通 HTML/CSS结果二十分钟聊下来盒模型说不清、BFC 没听过、flex 只记得一个 justify-content这种情况下后面的 Vue、React 八股背得再溜也很难挽回局面。这篇内容是我这些年面试候选人和帮人模拟面试时反复撞见的 HTMLCSS 高频考点。不讲虚的直接按面试官爱问的方向拆每条都给你标准回答思路、面试官接下来可能追问什么、以及我在实际开发里踩过的对应坑。如果你正在准备校招、社招跳槽或者只是想把基础补扎实照着这份清单过一遍比盲目刷几十道题更管用。1. 面试官为什么偏要问基础八股题型拆解与备考思路1.1 从面试官视角看基础题的价值我面试别人的时候最怕的不是候选人答错而是答得模棱两可、云里雾里。HTML 和 CSS 的知识点不复杂但它们是所有前端页面的底层语言几乎每个业务需求最终都会落实到 DOM 结构和样式上。一个候选人如果能把盒模型、BFC、选择器权重这些概念讲清楚说明他至少认真看过代码背后的运行逻辑如果连box-sizing是干嘛的都要想半天我基本能判断他平时写页面主要靠复制粘贴。基础题还有一个特点很容易连环追问。比如面试官问flex: 1 是什么意思你说等分空间那下一个问题就是flex-grow、flex-shrink、flex-basis 分别控制什么默认值是多少再往下问flex: 1 和 flex: auto 有什么区别如果每一步都答得上来这一题就能从基础题变成加分题。1.2 高频考点分布与常见问法我统计了一下这几年面试中 HTMLCSS 出现频率最高的几类问题大致是下面这个分布考点出现频率典型问法CSS 盒模型极高标准盒模型和怪异盒模型的区别width 到底包不包含 padding选择器优先级极高这个选择器的权重是多少!important 和行内样式谁优先BFC高什么是 BFC哪些写法能触发主要解决什么问题flex / grid极高flex: 1 是什么flex 和 grid 分别适合什么场景position 定位高absolute 相对谁定位fixed 有什么坑sticky 为什么失效语义化中高为什么说 div 用多了不好语义化标签有哪些响应式与移动端高rem 和 vw 选哪个1px 问题怎么解决动画与性能中为什么 transform 比 left 性能好transition 和 animation 的区别这个表不是让你死记硬背而是帮你排列复习优先级。真正要做的不是背答案而是把每个知识点放在一个具体的页面场景里理解它解决什么问题、用的时候有什么坑。1.3 备考策略把八股文变成最小 demo我自己复习基础时的习惯是每个知识点都写一个能跑的 20 行以内最小页面。比如学 BFC就建一个空白 HTML写一个浮动子元素让父容器高度塌陷然后用各种方式修复肉眼看出区别。这样做的好处是面试时被问到原理你脑子里会有画面表达会更自然不像在背书。面试官其实很吃这一套。你说BFC 可以清除浮动带来的高度塌陷和你说我之前做过一个两列布局子元素浮动以后父容器高度变 0我通过给父容器加 overflow: hidden 触发 BFC 解决的后来发现这样会把溢出的下拉菜单裁掉所以改成了伪元素 clearfix后者的说服力完全不一样。2. HTML 必背文档结构、语义化、meta 标签与 SEO2.1 doctype 到底在管什么事很多前端写了几年对 HTML 第一行的!DOCTYPE html仍然停留在背下来的模板层面。这东西其实比你想象的管用。它告诉浏览器请按照标准模式解析这个文档。如果不写浏览器会进入怪异模式盒模型、行高、图片垂直对齐等一大批规则都会回退到 IE5 时代的旧逻辑表现诡异、难以排查。所以我面试时经常随手写一个div问宽度 100px、padding 20px、border 10px标准模式下它实际占多宽怪异模式下呢这就是 doctype 的延伸考点本质还是在测盒模型。另外html langzh-CN也别忽略它影响屏幕阅读器的发音、浏览器的翻译建议、以及:lang()选择器的匹配不只是给 SEO 看的。2.2 语义化标签解决了什么问题语义化的核心一句话让标签有含义人和机器都能理解结构。header、nav、main、article、section、aside、footer这些标签本质上都是带名字的 div但它们额外传达了三件事对 SEO搜索引擎能更准确地识别页面里哪些是导航、哪些是正文、哪些是补充信息。对无障碍屏幕阅读器用户可以直接跳转导航、快速进入 main 区域不用听一大段无关内容。对团队协作新人接手代码时扫一眼结构就能知道页面骨架不需要从头读几十个 class。面试时你还可以主动补一句h1一个页面只保留一个标题层级不要跳nav里的链接给屏幕阅读器提供了快捷跳转入口图片要写alt不仅仅是为了 SEO更是为了图片加载失败时用户仍然知道这里原本是什么内容。这一连串说出来面试官会觉得你是真做过无障碍或者至少认真研究过。2.3 高频 meta 标签清单meta 标签经常被面试官当成细节点来试探尤其是刚入行的人往往只背了charset和viewport稍微问深一点就露馅。我常用的几个meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0, viewport-fitcover / meta namedescription content页面描述会被搜索引擎展示在标题下 / meta nametheme-color content#4CAF50 / meta propertyog:title content社交分享标题 / meta propertyog:image content分享缩略图 /这里面有三个容易被追问的点。第一viewport-fitcover是专门为 iPhone 刘海屏准备的配合env(safe-area-inset-bottom)一起用否则页面底部会被 Home 条遮挡。第二description虽然不影响排名但影响点击率因为搜索引擎会在结果页展示它。第三keywords现在基本没用了搜索引擎不再信任堆砌关键词的行为面试时如果提到这点反而显得你跟得上时代。2.4 容易被追问的两个细节一个是按钮语义。面试官可能会问用 div 画一个按钮有什么问题答案不只是没有默认样式更关键的是div 不可聚焦、不支持键盘回车触发、不读作按钮、没有原生 form 行为。所以能用button就绝不用 div。另一个是hreflang和canonical。多语言站点会用hreflang告诉搜索引擎不同语言版本页面的关系canonical则是告诉搜索引擎哪个是规范 URL避免重复内容分散权重。这两个标签不是日常项目必写但一旦被问SEO 怎么做你顺口提出这两个会明显超出一般候选人的知识储备。3. CSS 选择器与层叠规则权重计算怎么算才能不翻车3.1 权重计算0,1,0,0 是怎么来的CSS 优先级的基本规则我相信大多数人都知道内联 ID 类/属性/伪类 元素/伪元素。但一旦遇到复合选择器很多人就开始含糊了。面试官通常会给一个比较阴间的选择器让你当场算权重比如#app .content .item:hover a::before拆开看有 1 个 ID所以第一位是 1有.content、.item、:hover三个类级别类、属性、伪类所以第二位是 3有a和::before两个元素级所以第三位是 2。整体权重写作1,3,2。同级选择器之间比权重时从高位往低位比谁先大谁赢。注意一点、、~、空格这些组合符本身没有权重只有组合符连接的选择器参与计算。通配符*权重是 0不参与比较。:not()本身不计权重但它参数里写什么就按什么计入。这些细节是面试官最爱挖的我至少见过三次候选人栽在:not()上。3.2 三个常见的优先级陷阱第一个陷阱是伪类和类的权重一样。很多人以为a:hover比.link大其实它俩权重一样同样都是 0,1,1后写的覆盖先写的。所以写链接样式时a:hover要放在a的后面否则 hover 样式会被普通链接样式盖掉。第二个陷阱是!important不是万能的。如果两条规则都带!important那仍然要回到基础权重去比。而且!important会让后续维护变得很难受因为我经常需要在项目里找是哪条 important 把这里盖住了排查成本非常高。所以我的经验是业务代码里尽量不要写真的需要临时覆盖第三方库样式时再用。第三个陷阱是行内样式优先级非常高高于所有选择器除非有!important但它没法复用、没法响应式变化所以更多场景下应该用类去控制样式。面试官问行内样式一定比普通样式优先级高吗其实就是在试探你懂不懂!important这个例外。3.3 继承与层叠的边界CSS 里有一部分属性会从父元素继承给子元素但很多刚入门的人把继承和全局生效混在一起。典型可继承属性color、font-family、font-size、line-height、visibility、cursor这些文本类和外观类属性。典型不继承属性width、height、margin、padding、border、background、position、flex相关属性。面试时可以被追问怎么强制一个元素继承某个属性答案是inherit关键字比如width: inherit让子元素强制继承父元素宽度。此外还有initial恢复初始值、unset如果属性可继承则继承否则恢复初始值、revert恢复浏览器默认样式。四个关键字能分清楚基础分基本就拿到了。3.4 scoped 样式的扩展考点现在不少项目里用的是 Vue 的 scoped 样式面试官经常借这个问题看你对 CSS 工程化的理解。Vue 编译时会给组件里的元素加一个>.box { width: 200px; padding: 20px; border: 10px solid #333; box-sizing: content-box; /* 实际占宽 200 20*2 10*2 260px */ }同一套样式换成border-box实际占宽就是 200px内容区被压到200 - 20*2 - 10*2 140px。这就是为什么现在业界普遍推荐全局使用 border-box——它的行为更符合人的直觉尤其在移动端栅格布局里不会因为一个 padding 就把布局撑爆。4.2 box-sizing 的最佳实践我通常会在项目初始化时给所有元素统一设置*, *::before, *::after { box-sizing: border-box; }但这里有个隐藏坑如果你引用了第三方组件库而组件库里某些样式依赖 content-box 的默认行为全局覆盖可能会让组件的尺寸计算方式变化导致样式异常。所以有些团队会选择html { box-sizing: border-box; }然后把第三方库的根容器再改回content-box。这个细节面试官不一定问但你主动提出来说明你真的踩过坑。另一个常见追问是margin会不会被算进宽度里答案是不会。无论哪种盒模型margin都在元素外部只影响元素占位和周围元素的距离不会被计入width。4.3 BFC 是什么、怎么触发、有什么用BFC 的全称是 Block Formatting Context块级格式化上下文。你可以把它理解成一块独立的布局领地领地内部的元素排列方式不会影响领地外的元素。这是一个在面试中出现频率极高、但很多候选人解释不清的概念。触发 BFC 的常见条件overflow不是visible比如hidden、autofloat不是noneposition是absolute或fixeddisplay是inline-block、table-cell、flow-root、flex、grid等根元素html本身也是一个 BFCBFC 最经典的三个应用场景清除浮动造成的高度塌陷——给父容器触发 BFC父容器就会把浮动的子元素也算进高度。阻止margin塌陷——两个相邻兄弟元素的上下 margin 会合并取最大值但如果其中一个放在 BFC 内部就不会和外部合并。避免元素被浮动元素覆盖——给非浮动元素触发 BFC它就不去和浮动元素凑热闹而是自己占一块区域常用于两栏布局。4.4 现场模拟高度塌陷与 margin 合并面试官最喜欢的考法就是让你现场分析一个页面为什么长这样。我给你模拟一个典型场景div classparent div classchild浮动元素/div /div.parent { border: 2px solid #333; } .child { float: left; width: 100px; height: 100px; }因为 child 浮动了parent 内部被浮动的 child 不会参与高度计算所以 parent 的高度为 0border 变成一条线。解决方案有很多给 parent 加overflow: hidden、加display: flow-root、或者用经典的 clearfix 伪元素方案。我的建议是优先用 clearfix而不是overflow: hidden。原因是overflow: hidden会创建一个裁剪容器如果页面里有下拉菜单、tooltip、带阴影的元素这些内容一旦超出容器边界就会被裁掉。这种问题在线上很难排查因为它只在特定交互下出现。5. 定位、Flex、Grid从居中到整体布局5.1 position 的边界与陷阱position 是布局老题但里面有几个容易翻车的点。relative是相对自身原始位置偏移仍然占据原来的文档流空间absolute会脱离文档流相对最近的position非 static 的祖先定位fixed一般相对视口固定但一旦祖先元素有transform、perspective或filter属性它就会变成相对那个祖先定位这是面试中非常经典的一个坑。举个例子一个固定定位的返回顶部按钮如果包在某个容器里而容器为了动画加了transform: translateZ(0)按钮就不跟着视口走了会出现在奇怪的位置。这问题在移动端很常见因为很多人喜欢用transform做 GPU 加速。sticky则是 relative 和 fixed 的结合体元素在没到达阈值前占着原来的位置到达阈值后固定。它失效的常见原因有三个父容器高度不够、没有设置 top/bottom 阈值、父级祖先存在overflow: hidden。所以我一般建议碰到 sticky 失效先查这三个方向。5.2 水平垂直居中的方案梳理居中问题也是面试必问而且面试官一定会追问还有别的方式吗。我把常用的方案列一下每种都要能随手写出来/* 方案一flex 布局最推荐 */ .parent { display: flex; align-items: center; justify-content: center; } /* 方案二绝对定位 transform适合不知道宽高的情形 */ .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 方案三绝对定位 margin: auto */ .child { position: absolute; inset: 0; margin: auto; width: 200px; height: 100px; }每个方案的适用场景不一样flex 最简单直接适合绝大多数现代布局transform 方案不依赖于元素宽高但会创建一个包含块偶尔有兼容问题margin: auto 方案要求子元素有确定宽高适合弹窗这类固定尺寸内容。能在面试时说清楚为什么选这个、不选那个比背出五种方案更有价值。5.3 flex 必备属性与记忆方法flex 的考点集中在这几个属性上flex-direction、justify-content、align-items、flex-wrap、gap以及最常考的flex-grow、flex-shrink、flex-basis。很多人记不住flex: 1到底是什么。它是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的缩写表示在容器空间不足时等比例压缩有剩余空间时按 1 增长且初始主轴空间为 0所以可以均匀分配空间。而flex: auto是flex: 1 1 auto初始主轴空间是内容本身的大小所以两个不同内容的元素不会严格等宽。这个区别面试官问十次能刷掉一半人。记忆主轴和交叉轴我有个土办法justify-content处理的是句子里的单词怎么排所以它作用于主轴align-items处理的是同一行里的单词怎么对齐所以它作用于交叉轴。默认情况下主轴是水平方向交叉轴是垂直方向改了flex-direction: column之后两者互换我经常靠这个口诀避免写反。5.4 grid 和 flex 怎么选面试官很少让你二选一而是问什么场景用 flex什么场景用 grid。最简单直接的回答flex 本质是一维布局适合处理一行或一列里的排列grid 本质是二维布局适合同时处理行和列的复杂栅格。比如实现一个九宫格flex 需要配合flex-wrap和width: 33.33%来凑但如果格子之间还有 gap宽度百分比还要减掉间隔非常麻烦。用 grid 就直白很多.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }1fr是 grid 特有的单位代表剩余空间的一部分。repeat(3, 1fr)就是三列均分。如果你想做自适应栅格还可以用grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))让容器在宽度不够时自动换行、列数自动变化配合minmax和auto-fit能省掉大量媒体查询。这是很实用的加分技能。6. 响应式与移动端细节从媒体查询到安全区6.1 一套代码多端适配的思路响应式设计的核心不是写出能缩放的页面而是在不同尺寸、不同交互方式的设备上内容依然可用。实现手段一般分几层媒体查询负责在关键断点处调整布局相对单位负责让尺寸随容器或视口变化弹性布局负责让内容自动换行和留白。面试常考的一个基础例子.card { width: calc(50% - 12px); } media (max-width: 768px) { .card { width: 100%; } }但纯靠媒体查询的缺点是断点写多了很难维护。我会建议配合clamp()函数让字号和间距能平滑过渡html { font-size: clamp(14px, 2vw, 18px); }这样视觉上在不同屏宽之间不会有突然跳变的感觉也减少了一些断点维护。6.2 rem 和 vw 的实现原理与选择rem 相对根元素html的 font-sizevw 直接相对视口宽度。面试官的经典问法是它们分别适合什么场景有什么坑rem 适配的原理是JS 动态把根字号设置为视口宽度的一定比例页面里所有用 rem 的元素都会跟着等比例缩放。比如设计稿 375px 宽设置html { font-size: 37.5px }那么1rem 37.5px200px 的设计稿宽度就是5.333rem在 750px 的设备上就会自动放大到 400px。这种方案适合需要等比缩放的运营页、活动页。vw 方案就没有 rem 那种先改根字号再做换算的中间步骤10vw就是视口宽度的 10%更直接。但 vw 的坑是它只基于视口宽度内容超过一屏时高度和字号的比例容易失衡所以字号一般不建议直接用 vw而是用 clamp 限制上下限。6.3 viewport 视口与 dpr 的底层关系移动端适配必须理解一句话CSS 像素和物理像素不是一回事。一个 iPhone 的逻辑宽度是 375px但物理像素可能是 1125px3 倍屏devicePixelRatio就是 3。meta nameviewport contentwidthdevice-width, initial-scale1.0的作用是让页面布局视口等于设备逻辑宽度而不是默认的 980px不然页面在手机上会先被缩小需要用户手动放大才能看清楚。面试时相关的高频追问是1px 线为什么在手机上变粗。因为在 dpr2 的屏幕上CSS 的 1px 占 2 个物理像素看起来就是比设计稿粗。常见解法有用transform: scaleY(0.5)把伪元素高度压一半用background-image配合linear-gradient画 0.5px 的渐变线或者把 viewport 初始缩放设为1/dpr让整个页面变成物理像素对齐。前两种更通用第三种会影响全局布局我一般不用。6.4 iOS 底部安全区与小程序兼容我为什么特别强调这一块因为相关热词里频繁出现小程序苹果底部兼容 css说明这条线上踩坑的人太多了面到移动端适配面试官也喜欢拿这个问。代码上是这样meta nameviewport contentwidthdevice-width, initial-scale1.0, viewport-fitcover /.bottom-bar { padding-bottom: constant(safe-area-inset-bottom); /* 旧版 iOS */ padding-bottom: env(safe-area-inset-bottom); /* 标准写法需放在最后 */ }注意constant()和env()都要写且标准写法放后面否则旧 iPhone 会忽略新语法导致没有内边距。小程序里同样适用但需要注意小程序的 webview 环境可能对 CSS 变量兼容性不一致用之前先查最小支持版本。现在有些方案会用一个工具类统一处理安全区这是更工程化的做法。7. 动画、transform 与渲染性能拉开差距的进阶题7.1 transform 三维变换与 perspectiveCSS 动画类题目里transform出场率非常高。rotate3d是其中一个容易让人卡壳的点因为它的参数并不像rotate那么直观。.card { transform: rotate3d(1, 1, 0, 45deg); }rotate3d(x, y, z, angle)前三个参数构成一个向量元素会绕这个向量方向旋转。rotate3d(1, 1, 0, 45deg)表示绕从左上到右下的对角线旋转 45 度视觉上像卡片在空间里翻了一个角。要让它有立体感必须配合perspective.scene { perspective: 800px; perspective-origin: center center; }perspective的值是观察者离屏幕的距离值越小透视感越强。面试时能说出perspective 写在父元素和写在 transform 里的区别属于加分项父元素上的 perspective 是所有子元素共享同一个透视中心写在 transform 里则是每个元素独立计算像多个卡片各自从自己的中心点透视。7.2 字体渐变与涟漪光圈的实际写法这两个都是热词里出现的内容同时也是面试中可以作为展示动手能力的加分小案例。字体渐变的核心是利用background-clip: text把背景裁剪到文字区域.gradient-text { background: linear-gradient(90deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }这类细节平时容易被忽略但面试手写题里如果出现实现一段渐变色文字很多人会卡在不知道background-clip: text这回事上。涟漪光圈扩散是 CSS 动画经典手写题思路是无限循环放大一个透明光环keyframes ripple { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.5); opacity: 0; } } .ripple { animation: ripple 1.2s ease-out infinite; }关键点是动画只改transform和opacity不碰width和height。为什么这就引到后面性能的话题。7.3 动画性能为什么建议只改 transform 和 opacity浏览器渲染一帧大致经历样式计算、布局、绘制、合成。你改width、left、top这类属性会触发布局和重绘一旦动画元素多页面就会出现明显的掉帧。而transform和opacity两类属性的变化可以由合成器单独处理元素会被提升到一个独立的合成层只做层移动和透明度叠加不触发整页布局性能开销小得多。所以行业里有个共识能用 transform 完成的效果不要用 left/top 去写。比如让一个弹窗从上往下出现与其改top从 -100% 到 0不如用transform: translateY(-100%)到translateY(0)。我在项目里见过太多因为用 top 做动画导致滚动卡顿的页面换成 transform 以后顺滑非常多。7.4 will-change 的使用边界will-change是用来提前告诉浏览器某个元素将会发生变化让浏览器预先做好优化准备的。它确实能提升动画流畅度但很多人用了就忘了移除反而占用了大量内存。我踩过的坑是给十几个列表项都加了will-change: transform结果页面上滑时不仅没变快移动端甚至出现闪屏。后来养成习惯只对持续动画中的元素用动画结束时在transitionend事件里移除或者干脆不用让浏览器自己判断。面试时能主动提到这个反面案例面试官会明显觉得你是真做过性能优化而不是背概念。8. 场景题与答题话术从八股到实战不崩8.1 手写一个圣杯布局或双飞翼布局圣杯布局是经典中的经典虽然现在生产环境里 flex/grid 早就取代了 float 方案但面试官还是偶尔会让手写。因为这道题能同时考察浮动、负 margin、relative 定位、padding 多个知识点比单独拆开问要高效得多。我用 flex 版本来表达核心思想.container { display: flex; } .center { flex: 1; order: 1; } .left { width: 200px; order: 0; } .right { width: 200px; order: 2; }核心是中间列优先渲染、自适应宽度左右两列固定宽度。如果你能再解释 float 版本里负 margin 的原理以及为什么现代项目不再用 float 写整体布局这题就能答出层次。8.2 自适应正方形与三等分自适应正方形是我比较喜欢考的一道题因为它有老方案和新方案两种做法。老方案利用 padding 百分比是相对父宽度计算的特性.square { width: 50%; height: 0; padding-bottom: 50%; }新方案直接使用aspect-ratio.square { aspect-ratio: 1 / 1; }aspect-ratio的兼容性已经很好我现在的态度是能用新方案就用新方案。面试时如果能把两种方案都写出来并说明 padding 方案的 hack 原理说服力会很强。8.3 面试答题三段式结论-原理-举例我陪人模拟面试时总结了一套基础题的应答节奏非常管用先说结论再讲原理最后给一个实际例子。举个例子面试官问box-sizing: border-box 有什么用第一步给结论它让 width 包含 padding 和 border元素实际占宽不会超出设定的宽度。第二步讲原理默认 content-box 下width 只包含内容区padding 和 border 会向外扩张。第三步举例子我之前做栅格布局时两个 50% 的卡片各加了 padding结果总宽度超过 100% 换行了后来统一设置 border-box 就正常了。这个节奏同时满足了面试官考察的三个维度概念理解、底层原理、实战经验。问题可以编吗可以但最好来自真实经历哪怕是很小的经历也比纯背概念有说服力。8.4 面试前我习惯做的三件事最后分享一点我的个人习惯。每次面试前我不会过度刷题而是做三件事第一在白纸上默写盒模型图和 BFC 触发条件。默写不出来的知识就是还没真正记住面试时大概率会卡壳。第二把简历里写过的每一项技术都准备一个我实际用它解决过什么问题的故事。CSS 同理别只写熟练 flex而是写用 flex 实现过一个支持三列自适应、中间列优先渲染的复杂列表页面试官顺着简历问时你才有话可说。第三花十分钟看一遍自己以前的项目代码回忆那些当时觉得很奇怪最后发现是布局问题的片段。很多 HTMLCSS 面试题其实就是在考你有没有认真复盘过自己写的页面。你如果能把排查过程讲出来比任何标准答案都更能打动面试官。基础八股永远不是背一百道题就算完事。它真正的价值是让你在写每一行标签和样式时知道浏览器怎么解释它、页面为什么这样排列、性能瓶颈大概在哪。把这份清单过一遍再结合自己的项目去验证我对你唯一的建议是別光看打开编辑器每个例子敲一遍。相信我动手敲过和眼睛看过的记忆深度完全不是一回事。