1. 从零整理一份H5、CSS面试手册的初衷前段时间有位读者私信我说自己在准备前端岗位的面试但每次刷到H5和CSS相关题目总觉得知识点太散要么是flex布局的坑踩了又忘要么是CSS动画的属性记了又混。他说了一句让我印象很深的话“八股文其实不是背出来的是把项目里踩过的坑一条条提炼出来的。”这句话挺有意思也直接戳中了我自己之前的经历。我刚入行那会儿也特别怕面试官问CSS布局和H5容器交互这类问题。究其原因是很多知识点散落在不同项目里平时“能用就行”但真要人家问“为什么这样写”就卡住了。后来我花了一段时间把自己写的页面、调的样式、排过的兼容性问题按主题做了一套整理。这就是我整理的这份“H5、CSS篇”的由来。这篇文章适合谁看一类是正在准备前端面试的开发者尤其是初中级岗位H5和CSS恰好是重点考察方向另一类是已经在做业务开发、但总觉得自己基础不够扎实的同学。我会把面试中最高频的CSS布局方案flex、grid、视觉效果技法渐变、旋转、波浪、H5与小程序、微信公众号的交互机制以及移动端适配中的经典问题全部过一遍。因为知识点太多我不会写成教科书式的list而是按“面试官通常会怎么问 实际项目中怎么用 有什么坑”这个思路来讲。每一块内容都尽量保证你能直接拿去用、拿去背也能讲出背后的原理而不是死记硬背。2. 布局能力是H5、CSS考察的重头戏2.1 flex布局从会用到会说flex是我日常工作里用得最多的布局方案没有之一。以前用浮动布局做导航栏每次都得手写清除浮动还要处理各种margin塌陷。flex出现之后这些问题基本都消失了。面试官对flex的考察通常不只是“你会不会用”而是“你懂不懂每个属性背后的对齐规则”。先回忆一下flex布局的两个核心概念容器属性和项目属性。容器上最常用的是flex-direction、justify-content、align-items、flex-wrap、align-content项目上最常用的是flex-grow、flex-shrink、flex-basis以及项目自身的order和align-self。我给读者做分享时喜欢用两个直观的场景来讲水平垂直居中、两栏自适应布局这是flex最基础的用法也是面试手写题的高频点。圣杯布局中间自适应、两侧固定宽度这个用flex一行代码就能搞定面试官会通过这个问题看你是不是真的理解“伸缩”的含义。.container { display: flex; min-height: 100vh; } .menu { flex: 0 0 220px; } .main { flex: 1 1 auto; }这段代码里flex: 0 0 220px表示侧栏固定宽度220px且不放大、不缩小flex: 1 1 auto表示主栏自动伸缩填满剩余空间。面试时能把这个语法背后的计算逻辑讲清楚比单纯背代码加分很多。面试官如果追问“flex: 1到底表示什么”你要能答出来它是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的缩写。很多人会记成flex-basis: auto但实际默认标准是0%这会影响项目尺寸的计算方式。flex还有一个隐藏考点就是margin: auto在flex容器里的表现。正常情况下margin-left: auto可以让元素推到最右侧在flex容器里也是一样的规则。比如做自适应两栏时我们希望左边logo、右边导航按钮中间留空很多人会用justify-content: space-between但其实给导航栏加一个margin-left: auto更简洁也更好理解。2.2 grid布局的面试高频点如果说flex是解决一维布局的那grid为了解决二维布局就出现了。这两年面试问到grid的频率明显上升尤其是中大型项目会用到复杂栅格系统好的手写方案能拉开差距。grid最核心的是grid-template-columns和grid-template-rows后者驱动行列轨道控制子项目放置。重点版本这里需要强调我们经常见到的grid-template-columns: repeat(3, 1fr)表示三列等宽grid-template-rows: 250px 1fr则表示第一行固定250px第二行自适应。另一个被面试官偏爱的是grid-area和grid-template-areas。这种写法能把布局区域的划分直观地展示在代码里非常像在图纸上画画.app { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: 60px 1fr 50px; grid-template-areas: header header sidebar content sidebar footer; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .footer { grid-area: footer; }使用grid-template-areas的好处是你一眼就能看懂页面整体骨架后续调整区域顺序只需要改字符串不用动每个元素的位置样式。缺点是单词不能重名且区域结构必须规整不容许奇怪的L型空缺。很多面试官喜欢问“grid和flex怎么选”我通常的答案是页面整体骨架优先考虑grid组件内部细节对齐优先考虑flex。两者不是替代关系是合作关系。2.3 gap属性的兼容性陷阱gap属性在flex和grid里都能用用来设置项目间隙。以前我们做间距常用margin但margin会带来“边缘多余间距”和“最后一个元素margin问题”需要额外写负值或者用:last-child去处理。gap能完美解决这种痛点它只作用于相邻项目之间不会在外边界产生多余空白。.list { display: flex; gap: 12px; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }gap: 16px 8px表示行间距16px、列间距8px这在响应式卡片布局里非常常用。也是在这个地方踩过一个老项目兼容性的坑gap在flex布局中iOS Safari 14.5之前是不支持的直接导致白屏或间距异常。所以在大规模使用前必须检查项目最低支持版本。如果用户群体里老浏览器占比高建议还是退回到margin negative margin方案或者用column-gap和row-gap分别设置因为它们早一些支持。面试时如果你能主动说出“flex gap 在旧版本Safari不兼容我用margin负值兜底”这句话会让面试官觉得你真的做过多端适配而不是只会写demo。3. CSS视觉效果从“能看见”到“有质感”3.1 字体渐变的实现思路样式类问题中字体渐变出现频率一直不低网上相关搜索也很多。常见需求是把标题文字做成从红色渐变到橙色的效果或者让一段大字号变成左右颜色过渡的视觉风格。实现字体渐变的方案有几种我实际工作中最常用的是background-clip: text加color: transparent组合。.gradient-text { background: linear-gradient(90deg, #FF6A00, #FF4081); -webkit-background-clip: text; background-clip: text; color: transparent; }原理是把背景平铺到文字上再将文字颜色设为透明这样背景色就透过文字形状显示出来了。这里有两个容易出问题的地方一是必须有-webkit-background-clip: text前缀某些安卓webview不加就会显示一整块渐变矩形二是color: transparent不能省略否则文字会用默认颜色覆盖在背景上面看起来就像没设渐变一样。另外字体渐变和background-size配合能做动画效果。比如一个背景位置循环移动的渐变文字视觉上像流光扫过常用于banner标题或活动页重点字。具体做法是给背景设一个比较大的线性渐变再配合background-position的过渡动画。3.2 rotate3d与3D翻转卡片CSS3 3D变换是面试里比较惊艳的一题。rotate3d接受三个轴向量加一个角度值比如transform: rotate3d(1, 1, 0, 45deg)表示同时绕X轴和Y轴旋转45度。面试时问这个主要是想看你对三维空间坐标系有没有概念。做翻转卡片时最经典的写法是父容器设置perspective子元素设置transform-style: preserve-3d。很多人会忘记写perspective导致翻转效果怎么看都只有简单的平面缩放没有空间纵深感。.card-wrap { perspective: 800px; } .card { width: 200px; height: 280px; transform-style: preserve-3d; transition: transform 0.6s ease; } .card:hover { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; inset: 0; backface-visibility: hidden; } .card-back { transform: rotateY(180deg); }这段代码里的backface-visibility: hidden决定了翻转后隐藏的内容。很多新手在这个地方被问倒不知道为什么要加也没想过不加会出现什么现象。不加的话翻转后两个面会叠在一起文字交错非常乱。而perspective值越小3D效果越夸张值越大效果越平缓。3.3 涟漪光圈扩散效果怎么做涟漪效果在很多按钮和地图标记里都能看到搜“CSS涟漪光圈扩散”的人也不少。实现原理其实很简单一个不断放大的圆透明度从1衰减到0。传统写法是用keyframes一次性动画但想要循环扩散就要注意动画结束后的状态。.ripple { position: relative; width: 120px; height: 120px; border-radius: 50%; background: rgba(0, 150, 255, 0.3); } .ripple::after { content: ; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.6); animation: ripple 2s infinite; } keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.6); } 100% { box-shadow: 0 0 0 24px rgba(0, 150, 255, 0); } }这里用box-shadow扩散模拟光圈比用transform: scale更省性能因为scale会触发重绘和合成层变化box-shadow只影响绘制效果。不过如果涟漪半径非常大box-shadow扩散范围大时也会有性能压力可以考虑改用border加透明度动画或者干脆用伪元素scale。3.4 波浪效果和金色质感波浪效果常见于页面底部、加载动画和头像装饰。原理基本是用多层的border-radius: 50%旋转失真形成的或者用SVG路径做曲线。纯CSS方案一般这样父容器溢出一半子元素是一个直径两倍的正圆并让它绕着中心循环左右平移看起来就像水面波纹在流动。金光闪闪的效果大家问得也多。如果是要做“文字边缘有金色光点闪烁”的感觉可以叠加多层背景底层用深金色渐变上层用细小的径向渐变点最上层用background-blend-mode做融合。如果只想要简单的“金银渐变字”前面提到的background-clip: text配合一个180度的金银渐变就够了没必要上太复杂的效果。面试官问到这类问题核心是想知道你对background各种属性组合的熟练度而不是真的让你在代码里画出黄金。4. 选择器、伪元素与冷门但好用的CSS技巧4.1 CSS选择器优先级和常用选择器面试必考的选择器优先级网上总结非常多内联样式 ID选择器 类/伪类/属性选择器 标签/伪元素。但实际项目里真正麻烦的是“同样优先级下谁覆盖谁”答案是“后面的覆盖前面的”。这点很多背题的人容易忽略。我遇到过不止一次线上样式冲突的bug原因就是组件A和组件B都在同一个容器下选择器权重一样但引入顺序不同导致某些弹窗样式被冲掉。所以我在整理八股文时写了一条上线前如果有批量引入的页面至少验证一次最终构建产物里的CSS顺序。尤其在scoped样式和全局样式混用时优先级问题会被放大。常用选择器里nth-child和nth-of-type也是一对高频率考点。nth-child关注的是元素在所有兄弟中的次序nth-of-type关注的则是同标签类型中的次序。很多人把这两个用混导致表格斑马纹错位。我的建议是如果列表里会有不同类型的标签交替出现优先用nth-of-type否则老老实实给每个item加类名。4.2 伪元素和CSS变量的高级用法伪元素::before和::after可以说是CSS里最实用的扩展。好处是不需要额外改HTML结构就能插入装饰性内容。做书签、标签、箭头、角标时几乎都会用到。面试官会问它们和普通元素的区别伪元素不是真实DOM节点不能用JS直接获取也不能绑定事件只负责纯视觉装饰。现代CSS开发中CSS变量--main-color同样是高频话题。它能减少重复书写也能配合伪元素实现“运行时换肤”。但如果伪元素里想使用CSS变量有一个很巧妙的点变量定义在父级伪元素可以通过var()继承。比如.card { --badge-bg: #FF6A00; } .card::before { content: NEW; background: var(--badge-bg); }这种写法适合做组件内部不同状态下的角标。缺点是当伪元素的变量值需要根据状态变化时你可能要写两套类名来控制变量。我自己的习惯是需要频繁切换状态的颜色直接写inherit或暴露样式变量入口而不是把变量锁死在组件内部。4.3 text-align、文字竖排和单行省略号文字相关的坑在移动端尤其多。比如CSS里想让一段文字竖排可以用writing-mode: vertical-rl。这在传统中文排版、古籍风格页面里非常好用很多面试官会故意问这个属性看你是不是只局限在“文字都是横排”的思维定式里。.vertical-text { writing-mode: vertical-rl; text-orientation: upright; }text-orientation: upright的用途是让英文字母和数字也保持直立而不是跟着整体旋转90度。对中文来说可以不用写但如果有混合内容建议加上。单行省略号的写法也是经典题目要求“单行显示超出点点点”.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }关键在三点容器必须设置overflow: hiddenwhite-space: nowrap禁止换行text-overflow只是视觉效果。少一个条件省略号都出不来。多行省略号则一般依赖-webkit-line-clamp.multiline-ellipsis { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }其中-webkit-line-clamp的数值表示最大行数两行以上都会截断并显示省略号。需要注意这种写法只在webkit内核浏览器完整支持Firefox旧版不支持所以有时需要配合max-height兜底。4.4 CSS mask与边框盒模型mask这两年也有不少人在问。它可以把一张图片作为遮罩层控制元素的可见区域。最常见的场景是用不规则图形裁剪图片比如圆形头像外圈加光晕、文字填充图片等。.image-mask { -webkit-mask: url(star.svg) center / contain no-repeat; mask: url(star.svg) center / contain no-repeat; }这段代码的意思是用star.svg这个形状作为遮罩图片只有在这个形状内的部分可见。很多浏览器需要-webkit-前缀因为WebKit内核一直是主力。使用mask需要注意的是它和box-shadow一样不会影响元素本身的布局占位非常适合做特效。盒模型里还有一个经典坑就是“CSS加边框盒子不变形”怎么解决。其实很简单把box-sizing设为border-box宽高会包含边框和内边距这样当你在原有宽度上增加边框时不会把内容区挤大变宽。/* 全局统一 */ *, *::before, *::after { box-sizing: border-box; }很多老项目没加这条导致后来加边框时页面布局全乱。我在面试手册里专门记了一笔如果面试官问“盒子模型是什么”或“width到底含不含padding”一定要答清楚content-box和border-box的区别再提一句“全局统一用border-box是团队规范可避免布局偏移”。5. H5与容器交互小程序、公众号、App之间的那些事5.1 微信公众号H5如何打开小程序这个功能在微信公众号生态里很常见尤其是一些服务号做活动落地页需要跳转到品牌小程序。很多前端第一次接触时会以为直接写一个wx.miniProgram.navigateTo就行但其实前提条件是当前页面必须在微信内置浏览器中且引用了官方JS-SDK。具体做法是先引入script srchttps://res.wx.qq.com/open/js/jweixin-1.6.0.js/script然后在JS里判断环境if (typeof wx ! undefined wx.miniProgram) { wx.miniProgram.navigateTo({ url: /pages/activity/index?id123 }); }navigateTo对应的是打开小程序页面并保留当前H5页面redirectTo则是关闭当前H5再打开小程序页面。另外还有一种比较新的方式是通过wx-open-launch-weapp开放标签。这个标签需要满足几个条件H5页面必须要通过微信JS-SDK的配置且配置的JS接口安全域名正确否则标签只会在页面上显示一个空区域或者长按无效。面试时一般不会让你写全套但会问“微信公众号H5跳小程序有哪些条件”。能答出“必须先配置JS-SDK、必须走https、需要绑定域名和AppID”基本就能过关。5.2 微信H5里点击按钮打开小程序在上面提到的基础上wx-open-launch-weapp是更“正规”的打开小程序方式。这个标签最大的特点是可以在H5页面内显示一个按钮或卡片用户点击后直接拉起对应小程序交互体验比JS方式更流畅。它要求你必须在真机微信环境里调试开发者工具里无法做到100%还原。基本用法wx-open-launch-weapp idlaunch-btn usernamegh_xxxxx pathpages/index/index template button打开小程序/button /template /wx-open-launch-weapp需要注意两点username是原始ID不是AppID或微信号path是页面路径不需要开头的/。样式写在template里不能用普通组件的方式绑定事件。实际开发中如果在公众号的菜单里直接打开H5微信环境多半是支持的。但如果是在App内嵌webview里打开同一个H5这个标签就不会生效。5.3 判断H5被嵌在App还是小程序里搜“uniapph5里面怎么判断别人嵌套你的h5是app还是小程序”的人很多这确实是做多端投放时的高频需求。判断的思路核心是“宿主环境暴露了什么全局变量”。在微信小程序web-view里H5的window上会有wx.miniProgram对象同时window.__wxjs_environment可能为miniprogram。在App内嵌webview里如果是自己团队开发的原生App一般会在useragent里注入自定义标识或者通过桥接对象注入window.Android、window.webkit.messageHandlers等。所以判断逻辑可以这样做function getHostEnv() { const ua navigator.userAgent.toLowerCase(); const isWeChat ua.indexOf(micromessenger) -1; const isMiniProgram isWeChat (window.__wxjs_environment miniprogram); if (isMiniProgram) return miniprogram; if (isWeChat) return wechat; if (ua.indexOf(myapp) -1) return app; return h5; }需要特别注意的是window.__wxjs_environment和wx.miniProgram不一定同时存在尤其在老版本微信里wx.miniProgram存在但环境标识未注入。所以稳妥做法是通过延时检查回调判断不推荐在页面加载一瞬间就做出环境结论否则很容易误判。5.4 H5定位、微信内跳App与文件下载移动端H5获取定位是很常见的需求。一般浏览器直接使用navigator.geolocation.getCurrentPosition但在微信内置浏览器里这个接口经常被禁用或者定位不准。微信生态下更可靠的是调用微信JS-SDK里的wx.getLocation需要后端配置签名前端再注入权限。很多开发者用uniapp开发H5时遇到过“getLocation:fail translate coordinate system”这个报错这个报错的关键点是坐标系不匹配。uniapp默认拿到的可能是GCJ-02坐标但你需要在调用参数里指定type: gcj02有些地图SDK需要wgs84传错就会报翻译坐标失败。这个问题在腾讯地图里尤其常见。H5微信浏览器内跳转App通常用“开放标签”或“应用宝链接”来做。单靠前端自己监听浏览器类型去拉起App在iOS和Android上的策略差别很大。iOS需要Universal LinkAndroid需要Scheme意图协议。目前比较流行的做法是用第三方唤起SDK统一封装或者在页面里放一个遮罩提示“请点击右上角在浏览器中打开”再走scheme。文件下载方面企业微信内H5下载文件和普通浏览器下载不一样。普通浏览器直接window.location.href downloadUrl就行但企业微信会拦截部分文件类型尤其exe或压缩包。比较稳妥的方案是走企业微信JS-SDK的下载文件接口或引导用户去浏览器打开。uniapp打包H5后如果是PDF、Word这类在线预览可以用pdf.js或docx-preview实现前端预览而不是直接下载。5.5 微信内打开小程序、支付与分享卡片微信内打开小程序前面已经讲了很多这里说下H5支付和分享卡片。H5支付在微信里的“特别之处”在于微信内置浏览器默认不允许直接跳转收银台很多情况下需要引导用户“在浏览器打开”再拉起微信支付。碰到“鸿蒙微信无法h5支付”这种问题多半是HarmonyOS上的微信版本对默认浏览器唤起策略做了限制只靠前端换一种JS写法解决不了必须先确认当前微信版本是否支持H5支付并在最终落地上提供一个“复制链接到浏览器”的方案兜底。H5分享卡片是指用户在微信里打开H5页面后通过右上角菜单分享给好友时能显示自定义标题、描述和缩略图。实现依赖微信JS-SDK需要在wx.config成功后调用wx.updateAppMessageShareData和wx.updateTimelineShareData。其中imgUrl必须是绝对地址否则Android上经常不显示缩略图。如果只想让“企业微信”里分享卡片可能需要单独在企业微信js-sdk里配置接口名和参数都不同不能直接替换。5.6 腾讯地图定位和uniapp打包H5的几个坑腾讯地图在uniapp H5下的定位问题网上反馈非常多。最典型的报错是“getLocation:fail translate coordinate system”或“getLocation:fail invalid type”。出现这类错误先检查非原生环境下是不是引了不支持的地图SDK再检查参数type是否设置为gcj02。原因一坐标类型设置错误。 解决getLocation({ type: gcj02 }) 原因二H5端未配置腾讯地图key。 解决在uniapp的manifest.json里配置H5 sdk配置填入腾讯地图浏览器端key。 原因三浏览器接口权限被拒。 解决提示用户打开定位权限或改用微信JS-SDK定位。uniapp打包H5还有一个非常经典的坑首页偶尔出现“连接服务器超时点击屏幕重试”的整页错误这个错误通常是前端资源服务器没配好或者路由模式用了history且后端没有做history fallback导致刷新后请求到了一个不存在的路径服务器返回错误页面前端就当作服务超时处理了。解决方案是在manifest.json里将h5.router.mode改成hash或者在nginx层把所有路由都指向index.html让前端自己接管路由。很多项目为了URL好看用history模式但没有配套后端支持上线后就频繁出现这种页面。5.7 H5调用微信扫一扫微信H5里实现扫一扫同样依赖JS-SDK。核心流程是后端生成签名信息前端通过wx.config注入然后在wx.ready回调里调用wx.scanQRCode。wx.config({ debug: false, appId: 你的AppID, timestamp: res.data.timestamp, nonceStr: res.data.nonceStr, signature: res.data.signature, jsApiList: [scanQRCode] }); wx.ready(function () { document.querySelector(#scanBtn).addEventListener(click, function () { wx.scanQRCode({ needResult: 1, scanType: [qrCode, barCode], success: function (res) { const result res.resultStr; } }); }); });needResult: 1表示返回扫码结果scanType可以指定条码类型。这个功能在普通浏览器里无法使用只能在微信环境里调用。另外wx.config如果签名过期wx.ready不会触发需要重新获取签名。6. 组件化开发中的样式隔离与细节处理6.1 scoped样式和deep方法Vue单文件组件里scoped是最常用的样式隔离方式。它通过给元素加上>.parent :deep(.el-input__inner) { border-color: #FF6A00; }这里:deep(.el-input__inner)的意思是从当前组件作用域开始向下穿透到子组件内部的.el-input__inner。注意写法是.parent :deep(...)中间要有空格表示父级在作用域内部目标穿透。面试中常会问“scoped的实现原理是什么”。简单说就是给每个组件的根节点加一个唯一属性再对CSS选择器的最后一个元素加上这个属性选择器。所以如果我们直接操作动态生成的DOM可能会因为少了>.menu-item { transition: visibility 0s linear 0.2s, opacity 0.2s ease; }这里visibility延迟0.2秒切换但透明度动画是立即开始的。两个属性可以使用不同的延迟时间效果比统一延迟更细腻。CSS动画性能方面面试官越来越喜欢问“为什么优先用transform和opacity做动画而不是left/top”。原因是left、top、width这些属性变化会触发布局Layout和绘制Paint而transform、opacity只触发合成Composite合成通常由GPU处理性能高很多。老前端跑活动页时只要动画数量一多直接用left做位移就能让低端机掉帧换成transform: translateX()后立刻流畅。这是性能和体验的差异不是玄学。6.3 CSS中的单行显示、居中与底部适配最后整合一些移动端高频的“小抄”“CSS div固定在底部”是搜索热词基本方式有两种一是固定定位.footer { position: fixed; bottom: 0; left: 0; right: 0; }二是flex布局让底部模块吸底.page { display: flex; flex-direction: column; min-height: 100vh; } .main { flex: 1; } .footer { flex-shrink: 0; }但要小心移动端虚拟键盘弹出时position: fixed底部元素会被顶起造成布局晃动。如果弹窗中有输入框建议把弹窗改成绝对定位并在输入框focus时调整位置或者使用visualViewport监听可视区域高度变化。“调整CSS容器里的文本位置”这个问题非常宽泛。常规手段有text-align控制水平对齐line-height控制单行文本垂直居中padding控制内边距flexalign-items控制多行文本的垂直居中。其中line-height等于容器高度这种方法只适用单行文本多行文本必须避免否则换行后间距会大得离谱。多行文本垂直居中建议用flex布局。小程序苹果底部兼容CSS一般指iPhone X等设备的底部安全区需要用到env(safe-area-inset-bottom).safe-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }新版iOS支持env旧版只需要constant两个都要写上才能覆盖更全面。需要在viewport-fitcover环境下才生效在iPhone底部的横条上不会被内容挡住否则底部栏会被Home Indicator遮挡。7. H5和CSS后续还能怎么扩展我之前独自整理这份手册时发现“八股文”最大的价值不是应付面试而是把实践中的知识点做了一次结构化梳理。今天分享的这些内容覆盖了布局方案、视觉效果、选择器与伪元素、H5容器交互以及组件化样式隔离都是自己真正在项目里遇到最多、踩坑最多的模块。按我的习惯这份手册每过两个月就会更新一轮。比如新增了某个flex布局技巧或者发现了某个旧版浏览器兼容问题就会随手补进去。你现在如果也是靠着零散记忆在做准备我建议可以按我的方法来遇到一个用得不顺的属性或一个线上问题就开一个Markdown文档记下问题背景、解决代码和后续注意点积累一段时间后你会有比任何网上面经都更适合自己的知识库。另外一个可以继续深挖的方向是把CSS动画和H5容器跳转两个模块结合来做比如在微信公众号H5里做扫码引导页在动画结束前逐步引导用户打开小程序或者在企业微信里做安全下载页先展示品牌动效再唤起scheme。这类场景在很多行业都有实际需求值得持续研究。