最近在准备前端面试的朋友应该都有这种感觉投简历之前先刷两套题已经成了行业默契。我自己带团队面试也有几年了发现一个很有意思的现象不管候选人简历上写着多复杂的技术栈HTML和CSS的基础题始终是第一道门槛。这两块看起来门槛低但恰恰最能看出一个人是真正写过页面还是在背题库——比如问“flex: 1”到底展开了是哪三个属性十个候选人里能答全的不到一半。这份八股文整理就是针对前端面试中HTML与CSS两个方向的核心考点覆盖了文档结构、语义化、盒模型、层叠上下文、布局方案、响应式、动画、样式工程化这些面试高频区。适合正在准备前端岗位面试的候选人也适合工作一两年想系统补基础的同学。每个知识点我都尽量把“为什么”讲清楚而不是只给结论因为面试官追问的往往不是“是什么”而是“为什么”。1. HTML高频考点从文档结构到语义化1.1 DOCTYPE与文档模式的核心逻辑面试官问DOCTYPE几乎必考一个问题!DOCTYPE html这行声明到底有什么用答案不只是“告诉浏览器用标准模式渲染”。更深一层是HTML5之前DOCTYPE声明是一长串DTD引用因为那时的HTML基于SGML需要引用外部DTD来定义文档结构合法性。HTML5不再基于SGML所以只需要一个简短的!DOCTYPE html就能触发标准模式。浏览器解析页面时有三种模式标准模式、怪异模式Quirks Mode、几乎标准模式。怪异模式下浏览器会模拟IE5时代的盒模型导致CSS布局行为完全不同。所以我实际写页面时HTML的第一行一定先写DOCTYPE再写html langzh-cn这样既避免怪异模式也方便屏幕阅读器识别页面语言。这里有个细节很多人忽略lang属性不光影响无障碍朗读还会影响浏览器的翻译建议和字体渲染中文页面建议显式写langzh-cn不要留空。面试进阶题还会考meta charsetutf-8。这一行必须放在head最前面因为HTML规范要求字符编码声明在前1024字节内如果放太靠后浏览器可能已经用默认编码解析了一部分内容中文就会乱码。同理meta nameviewport contentwidthdevice-width, initial-scale1是移动端适配的基础但很多人不知道initial-scale1配合widthdevice-width有什么用——它是为了控制iOS Safari在横竖屏切换时的缩放行为防止页面在旋转后自动放大。1.2 语义化标签的实战选择语义化标签是HTML面试的常客但很多候选人只会背“header表示头部nav表示导航”这种表。面试官其实想听的是你写页面时如何决定用div还是用section我的判断标准很简单——如果一个区域独立成块后去掉所有样式光看文档结构就能理解页面逻辑那语义化就是合格的。具体实操中要注意几个容易踩的坑。section要求内部必须有标题h1-h6否则直接用div更合适article适合完整独立的内容块比如一篇博文、一条评论而不是随便一个卡片都用它aside用来放侧边栏、广告、相关推荐这类与主内容弱相关的内容。还有hgroup这个标签已经在新规范里被重新定义面试时提到它要谨慎它只能包裹标题和副标题的组合别再拿它当“标题组容器”用了。还有一个高频考点strong和b、em和i的区别。strong表示内容重要性em表示强调语气两者都有默认加粗或斜体的视觉样式而b和i只是纯视觉样式无语义含义。前端开发中我几乎只用strong和em因为屏幕阅读器会对它们特殊处理而b和i对无障碍毫无帮助。1.3 HTML标签细节考点速查src与href的区别也是经典题。src是资源引入script src...和img src...中的src会阻塞页面解析浏览器遇到后会暂停HTML解析先下载并执行完资源再继续href是超链接引用link href...和a href...不会阻塞解析浏览器会并行下载资源。这就是为什么CSS推荐用link引入而JS推荐放在body末尾或加defer的原因。script标签的defer和async也常被追问。defer是“下载不阻塞执行等解析完多个defer按顺序执行”async是“下载不阻塞下载完就执行顺序不保证”。给个实际场景页面依赖两个JS文件A依赖B那就不能用async因为B可能先执行完应该两个都加defer保证执行顺序。如果某个JS文件独立无依赖又想尽早加载用async。img标签的垃圾问题也经常考alt属性不能省略它不只用于图片加载失败时显示替代文本还承担无障碍职责。真正的技术点是loadinglazy——这是原生懒加载属性不需要引入任何库。但要注意loadinglazy只能对width和height已设置的图片生效否则会造成页面布局偏移CLS影响性能评分。2. CSS核心机制盒模型、选择器与层叠上下文2.1 标准盒模型与怪异盒模型的取舍盒模型是所有CSS布局的地基。标准盒模型content-box中width只包含内容区padding和border会额外撑大元素怪异盒模型border-box中width包含了padding和border。面试时一个必背的小技巧是用公式说明标准盒模型的实际渲染宽度 width padding-left padding-right border-left border-right而border-box的实际渲染宽度就等于width。实际项目里我在全局样式中一定会写*, *::before, *::after { box-sizing: border-box; }原因很简单content-box下一个宽度100%的子元素再加上padding和border就会溢出父容器必须靠计算器算宽度尤其在响应式布局中这种溢出会让页面横向滚动。改用border-box后子元素的width: 100%就是“占满父容器内容区整宽”padding不会导致溢出。这是一个典型的“规范建议”和“工程实践”不一致的点面试时主动说出“项目中默认使用border-box而不是content-box”,会在印象分上占优。2.2 选择器优先级与权重计算选择器优先级Specificity是面试问不烂的题。计算规则是行内样式记作1-0-0-0ID选择器记作0-1-0-0类选择器、属性选择器、伪类记作0-0-1-0元素选择器、伪元素记作0-0-0-1通配符*和组合器、、~不占权重。判断样式优先级时从左到右逐位比较高位相同再看低位。举个例子#app .nav li.active { color: red; } /* 0-1-2-1 */ .nav li.active { color: blue; } /* 0-0-2-1 */第一组权重的第二位是1ID第二组是0所以无论后面写多少类选择器.nav li.active永远打不过#app .nav li.active。这就是为什么项目中尽量少用ID选择器——它权重太高后面想覆盖只能再套一层ID或者加!important越写越乱。还有一个容易忽略的细节!important不参与权重计算但它会覆盖所有普通声明和行内样式。两条冲突规则都带!important时再比较具体权重。我通常在两种情况下才用!important一是覆盖第三方UI库的样式二是写工具类时确保生效。自己维护的项目里!important用得越多说明选择器设计越失败。2.3 层叠上下文与z-index的隐藏陷阱z-index不是简单的“数字越大越在上面”。只有当元素处于同一个层叠上下文时z-index才有可比性。创建层叠上下文的常见方式有position值为relative/absolute且z-index不是auto、opacity小于1、transform不等于none、filter不等于none、will-change指定了这些属性、flex/grid子项且z-index不为auto。这就是经典的“z-index失效”现场父元素A通过opacity: 0.9创建了层叠上下文子元素B的z-index: 9999再大也只能在A的上下文内部生效如果兄弟元素C的层级高于A那么C会盖住A连同B的整块区域。排查这类问题时的思路是别只盯着出问题的那个元素看沿着DOM树往上找看哪层祖先创建了层叠上下文。position: fixed在CSS3之后遇到会创建层叠上下文的父级时会“降级”为相对该父级定位这也是移动端开发中常见的Bug来源。比如弹窗组件挂在transform过的容器内fixed定位就会失效弹出层被父容器裁切。解决方案一般是把弹窗挂到body下的独立节点或者改用position: fixed配合top/left手动计算坐标。2.4 BFC格式化上下文到底是什么BFCBlock Formatting Context块级格式化上下文是CSS面试的进阶考点。简单理解BFC是一块独立的渲染区域内部元素的布局不会影响外部外部元素也不会伸进BFC内部。触发BFC的常见方式overflow不为visible、display为flow-root、float不为none、position为absolute或fixed、display: inline-block、flex或grid容器本身。BFC解决什么问题三个经典场景清除浮动父容器内子元素全浮动了父容器高度塌陷给父容器加overflow: hidden或display: flow-root就能让父容器包住浮动子元素。防止margin合并塌陷两个垂直相邻元素的margin-top和margin-bottom会合并取较大值。让其中一个元素套在BFC里就能阻断合并。阻止元素被浮动元素覆盖文字环绕效果中如果想让某个块避开浮动元素给它设置overflow: hidden它会自动让出浮动元素占的区域。我在工程中其实很少主动创建BFC因为overflow: hidden有时会影响内部元素的粘性定位或滚动。要清除浮动更推荐用display: flow-root它是专门为创建BFC设计的副作用最小。3. CSS布局体系Flex、Grid、浮动与定位3.1 Flex布局核心属性与经典布局Flex是面试必考也是实际开发中用得最多的布局方案。必须背清楚两类属性容器属性flex-direction、justify-content、align-items、flex-wrap、gap和项目属性flex-grow、flex-shrink、flex-basis、align-self、order。最容易考但答不全的就是flex: 1。它其实是三个属性的缩写flex: 1; /* 等价于 */ flex-grow: 1; flex-shrink: 1; flex-basis: 0%;flex-grow: 1表示剩余空间分配给该元素flex-shrink: 1表示空间不足时允许压缩flex-basis: 0%表示初始主轴尺寸为0。三个项目都设flex: 1时它们会等分父容器宽度——这是实现“三栏等分布局”最简洁的方式。如果只写flex-grow: 1不写flex-basis那flex-basis默认是auto会参考内容的宽度等分效果可能被内容撑破。还有gap属性值得单独说。以前做flex间距要么用margin负margin要么给子项加margin-right再通过:last-child去掉。现在直接用gap: 12px就能给flex子项之间加间距gap不会像margin那样参与合并也不会撑破容器。Flex和Grid都支持gap这是浏览器已经全面支持多年的成熟特性。经典垂直水平居中方案.parent { display: flex; justify-content: center; align-items: center; }两个属性一次解决。但面试官会追问如果子元素数量不固定最后一个元素不想居中怎么办这时要看业务场景用margin-left: auto让特定元素吸到右侧或者调整justify-content的实际值。3.2 Grid布局二维布局的正确打开方式Grid和Flex的分工常被问到Flex适合一维布局要么水平要么垂直Grid适合二维布局行和列同时控制。Grid面试需要掌握的核心属性包括grid-template-columns、grid-template-rows、grid-template-areas、gap、grid-column、grid-row。最常用的等分布局写法.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }这里repeat(3, 1fr)会生成三列等宽的网格1fr是Grid特有单位表示“剩余空间的一份”类似flex-grow的思路但作用在轨道尺寸上。1fr和auto的区别是auto按内容撑开1fr先分完固定尺寸再分配剩余空间。比如grid-template-columns: 200px 1fr 1fr第一列固定200px剩下两列均分剩余宽度。页面骨架布局用grid-template-areas最直观.layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 60px 1fr 40px; grid-template-areas: header header sidebar main footer footer; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }这段代码一眼就能看出页面结构顶部通栏、左侧边栏、右侧主内容、底部通栏。grid-template-areas必须构成规整的矩形区域不能出现L形空洞。调整响应式布局时只需要改变grid-template-areas的排列HTML结构完全不用动这是比float布局好用太多的地方。3.3 浮动与定位的底层逻辑浮动float现在主要用在文字环绕图片场景但面试必考它背后的机制。浮动的本质是“元素脱离文档流流向一侧后续内容环绕排列”。脱离文档流后父容器就感知不到浮动子元素的高度产生高度塌陷。清除浮动的经典方案之一.clearfix::after { content: ; display: block; clear: both; }clear: both的作用是“该元素两侧不允许有浮动元素”所以它会被挤到浮动元素下方父容器通过感知这个::after伪元素的高度间接包住了浮动子元素。现在项目里已经很少用float做布局但理解这个原理对排查老代码非常有帮助。定位的四种模式也要熟static是默认relative是相对自身原位置偏移不脱离文档流absolute是相对最近的“定位祖先”position不等于static的祖先定位脱离文档流fixed是相对视口定位sticky是“吸顶”效果它在滚动到指定阈值前是普通流过了阈值后表现类似fixed但它不会脱离文档流也不受父容器overflow: hidden之外的影响。面试常问sticky为什么有时不生效——多数是因为祖先元素有overflow: hidden或overflow: auto这时sticky会相对最近的滚动容器工作而不是视口。3.4 垂直水平居中的全方案对比垂直水平居中是HTMLCSS面试的“必考一题”而且常常让候选人列出至少三种方案。我在面试中会按这个顺序回答方案实现方式适合场景注意事项Flexdisplay: flex; justify-content: center; align-items: center;大多数场景首选父容器需要确定尺寸Griddisplay: grid; place-items: center;单元素居中最简洁Grid容器内所有子项都会居中绝对定位负marginposition: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;子元素宽高固定宽高变了要重新算margin绝对定位transformposition: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);子元素宽高不确定transform会创建层叠上下文margin: auto绝对定位子元素设置inset: 0; margin: auto;宽高确定的块级元素父容器必须是定位元素最后一个方案很多人不知道子元素position: absolute且top/right/bottom/left都为0再设置margin: auto浏览器会自动分配剩余空间实现居中。这个方案的核心机制是“绝对定位元素的margin: auto会在四个方向均分剩余空间”。4. 样式进阶与工程化议题4.1 动画与过渡性能优化的关键细节CSS动画面试题很少只问属性一定会追问性能。transition适合简单的状态变化animation适合重复播放或复杂的关键帧动画。核心性能知识是尽量只改变transform和opacity避免改变width、height、top、left等属性因为这些属性会触发Layout和Paint而transform和opacity只在合成阶段处理可以交给GPU加速。最常见的hover上浮效果实现.card { transition: transform 0.2s ease-in-out; } .card:hover { transform: translateY(-4px); }注意这里只用了transform的translateY而不是top或margin-top。用top实现同样的视觉位移浏览器需要重新计算布局在低端设备上会出现掉帧用transform则非常流畅。同理涟漪光圈扩散效果可以控制opacity和scalekeyframes ripple { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(4); opacity: 0; } }CSS变量自定义属性也是面试加分点它让动画参数可以集中管理:root { --animation-duration: 300ms; } .card { transition: transform var(--animation-duration) ease; }/* 字体渐变 */ .gradient-text { background: linear-gradient(90deg, #ff6b6b, #4ecdc4); -webkit-background-clip: text; background-clip: text; color: transparent; }字体渐变的原理是先把背景设为渐变色再用background-clip: text把背景裁剪到文字形状内最后把文字颜色设为transparent让渐变色透出来。注意background-clip: text需要加-webkit-前缀才在主流浏览器中生效。三维变换rotate3d也常被问到transform: rotate3d(x, y, z, angle)。这里的x/y/z是旋转轴的向量分量比如rotate3d(1, 1, 0, 45deg)表示绕“从原点到(1,1,0)方向”的轴旋转45度。实际场景中卡片翻转效果一般用rotateY就够rotate3d适合做更复杂的立体视觉效果。配合perspective属性才能在父容器上产生透视效果否则旋转看起来只是平面压缩。4.2 响应式布局与移动端适配响应式布局的三种主流实现媒体查询、rem/vw弹性单位、容器查询Container Queries。面试重点考媒体查询的断点设计以及rem和vw的区别。rem是相对根元素html的font-sizeem是相对父级元素font-sizevw是相对视口宽度的1%。移动端适配常见做法是用postcss-pxtorem插件把设计稿里的px转成rem运行时通过JS动态设置根字号// 简单适配示例以设计稿375px为标准 function setRootFontSize() { const windowWidth document.documentElement.clientWidth; document.documentElement.style.fontSize (windowWidth / 10) px; }这里把根字号设为视口宽度的十分之一这样1rem就等于视口宽度的10%做等比缩放非常方便。但这种纯rem方案的问题是“字体会随视口无限缩放”在平板和PC上字会变得巨大。实际工程中我更推荐“rem只用于大模块间距正文用clamp()限制范围”这种混合方案body { font-size: clamp(14px, 0.875rem 0.5vw, 18px); }clamp()接受三个值最小值、首选值、最大值。上面的例子在视口从375px变到1440px时字号会平滑地从约15px变到约17px不会失控。这是现代CSS响应式比较成熟的写法面试提出来会显得有实际经验。移动端另一个隐藏考点是iPhone底部安全区适配面试聊到兼容性时可以顺便带出。利用env(safe-area-inset-bottom).footer { padding-bottom: env(safe-area-inset-bottom); }env()能读取设备安全区域的值在iPhone刘海屏和底部横条机型上自动留出安全距离。注意要配合viewport-fitcover使用否则meta viewport里默认的fitcontain不会触发安全区变量。关于”小程序苹果底部兼容CSS“的问题核心就是给固定底部的元素加这一行或者用constant()兼容旧版iOS。4.3 CSS工程化原子化、Modules与ScopedCSS工程化是面试中比较进阶的板块考察候选人有没有经过真实项目洗礼。三个关键词原子化CSS、CSS Modules、CSS-in-JS。原子化CSSAtomic CSS近年来很火代表工具是Tailwind CSS。它本质是“每个类只做一件事”比如flex表示flex布局mt-4表示margin-top为1rem。优点是样式可复用、团队协作时不会出现命名冲突缺点是HTML类名很长可读性下降。面试时被问“你对原子化CSS怎么看”最好给出客观评价适合组件化开发、熟练后效率高但对不熟悉工具链的传统维护型项目可能是负担。Vue的Scoped CSS是单文件组件里的经典方案面试考点在于它如何实现样式隔离——通过给组件DOM节点加>.parent :deep(.child-inner) { color: red; }编译后会变成.parent[data-v-xxx] .child-inner这样就能穿透scoped限制修改子组件内部样式。这是覆盖组件库样式时最常用的手段。CSS Modules是React生态常见的方案它在构建阶段给每个类名加上哈希后缀实现真正意义上的局部作用域。和Scoped CSS不同的是CSS Modules的样式隔离不依赖运行时属性而是直接改写类名。理解这两者的差异能应对“React和Vue的样式隔离方案有什么不同”这类对比题。4.4 常见兼容性问题和细节处理兼容性问题是让前端开发很头疼的部分面试虽然不直接考修复步骤但会通过场景题考察排查思路。原生的兼容性问题主要有这几类flex布局在旧版Safari需要加-webkit-前缀display: -webkit-flex。现在浏览器已普遍支持无前缀写法但老项目改造时会遇到。position: sticky在部分旧浏览器不生效排查时先看父容器是否有overflow: hidden再看祖先有没有设置高度两者都会让sticky失效。iOS滚动卡顿给滚动容器加-webkit-overflow-scrolling: touch提升滚动流畅度但新iOS版本已默认支持写不写都行。表单默认样式不一致不同浏览器的input、button默认样式差异很大一般需要reset或normalize处理。最简单的方式是设置appearance: none再重新写自定义样式。1px边框在高清屏上变粗视觉稿里的1px在Retina屏上实际渲染为2px或3px用transform: scaleY(0.5)可以压细。还有几个细节值得记住gap属性在flex容器中老版本Safari有兼容问题如果必须兼容老版本可以退回到margin方案background-clip: text在部分浏览器需要-webkit-前缀env()和constant()底部安全区适配constant()是iOS 11.0-11.2的写法env()是11.2之后的标准两个都要写一行。这些都是刷网络热词和面试题时经常看到的真实细节项目里踩一次坑就忘不了了。5. 实操心得怎么刷八股文才真正有效最后分享一点我个人带人和准备面试的体会。刷HTMLCSS八股文最忌讳的就是只背结论不看原理。拿flex: 1举例背住“是flex-grow、flex-shrink、flex-basis的缩写”不难但如果不知道flex-basis: 0%和auto的差别遇到“两个flex项内容长度不同为什么等分后总有一个被撑开”这种实际场景还是会卡住。我的建议是每整理一个知识点就在浏览器里亲手写一个最小Demo验证一遍打开开发者工具看计算后的样式看哪些声明被覆盖了、被谁覆盖了比盲背二十道题都有用。另一个实操技巧是把八股文整理成自己的“面试问答卡”。每个知识点写三句话一句话说结论一句话说原理一句话说场景。比如BFC结论是“独立渲染区域”原理是“内部布局不影响外部”场景是“清除浮动、防margin塌陷”。面试官问的时候先答结论再讲原理最后给场景条理清晰而且显得有实战经验。前端面试的题目会变但HTML和CSS的核心机制其实十年没怎么变过。把这篇整理里的概念真正吃透不仅是为了过面试更是为了写页面时少踩坑。遇到问题知道去哪里查、怎么排查比背住标准答案重要得多。最后再分享一个小技巧面试前可以自己列一份“高频追问清单”比如“flex: 1展开是什么”“BFC怎么触发”“z-index为什么失效”“fixed为什么被父级带跑”这类问题每个都写一个能讲两分钟的例子。把这些场景在面试前轮流过一遍进考场心里就踏实了。HTML和CSS看起来简单但越基础的东西越能体现功力祝各位都能在面试里稳过这一关。