上周帮同事做模拟面试她做了快两年的后台管理系统自认CSS闭眼写。我问了一个看起来很简单的问题position: sticky和filter: grayscale(1)哪个是CSS2就有的能力她想了半天给出的答案跟大部分人一样——sticky算是CSS3吧。严格讲这两个都不是CSS2.1里的东西但一个属于Position布局规范一个属于Filters滤镜规范全都是独立推进的模块。这就是CSS2到CSS3之间最容易被忽略的事实它不是一个大版本升级而是整个规范体系的运转方式变了。这篇文章我想针对前端-CSS2-3这个主题把版本演变的真相、CSS2打下的核心地基、CSS3带来的能力跃迁以及2026年会问到的面试考点一次梳理清楚。适合三类人刚入门的新手想系统补一遍基础写了两年以上但对版本边界依然模糊的开发者以及正在准备前端面试、想拿下一整套CSS答题框架的人。1. 面试官一问CSS2和CSS3你的答案能拿几分1.1 真正的CSS2其实叫CSS2.1先说结论我们今天说的CSS2绝大多数场景下指的是CSS2.1而不是1998年发布的那个CSS2。当年W3C发布CSS2之后实际推广非常不顺利。规范里有许多不切实际的功能比如复杂的字体排版模型、更复杂的语音样式加上那个年代浏览器大战打得正凶各大厂商各做各的导致同一份CSS在不同浏览器里的呈现差异巨大。于是W3C在2002年前后启动CSS2.1修订把规范里那些不现实的部分删掉再用一个稳定、可实现的基线约束浏览器厂商的行为。CSS2.1直到2011年才成为正式的W3C推荐标准这个版本就是现代浏览器CSS渲染的基础。所以面试里如果被问到CSS2和CSS3的区别别急着背属性清单先补一句日常说的CSS2其实是CSS2.1它定义了排版引擎中最核心的渲染规则这会让面试官知道你对版本历史有概念。CSS2.1负责的领域非常多选择器、层叠与优先级、盒模型、display体系和position体系、浮动与清除、字体和文本属性、列表和表格样式、伪类和伪元素全部靠它统一。可以这么说今天是CSS3时代的项目但每个页面至少有百分之七八十的样式规则底层仍然由CSS2.1的规则在解释。1.2 CSS3不是版本号而是一堆异步推进的模块1998年之后W3C发现如果把所有新能力堆在一起做一个CSS3那这个版本可能永远发不出来。于是他们改变了路线把CSS拆成几十个独立模块各自维护各自的版本号。比如选择器有Selectors Level 3、Selectors Level 4布局有Flexbox、Grid视觉效果有Transitions、Animations、Filters、Transforms。每个模块的成熟时间完全不同浏览器对每个模块的支持进度也完全独立。这个机制带来一个很现实的影响兼容性碎片化。同一个时间点可能grid已经很好用但backdrop-filter还要加各种前缀也可能flexbox已经稳定但某个老浏览器只支持2009年的旧语法。所以现在判断一个CSS特性能不能用不应该再问这是不是CSS3而应该打开caniuse看它属于哪个模块、各浏览器的支持情况。网上流传的各种CSS标签大全本质就是把CSS2.1的属性表加上各CSS3模块的新特性拼到一起版本感本来就是模糊的不用把它当权威。2. CSS2打下的地基选择器、盒模型、定位与浮动2.1 选择器优先级十几年前定下的层叠算术CSS2.1确立的那套选择器一直到今天都在用。简单选择器有标签、类、ID、通配符组合和扩展有后代选择器、子选择器、相邻兄弟选择器、属性选择器还有:link、:visited、:hover、:active、:first-child这些伪类以及:before、:after这两个伪元素。这些都写在CSS2.1里并不是CSS3的产物。优先级计算是经典考点内联样式优先级永远是第一梯队然后从高到低大致是ID选择器、类/属性/伪类、标签/伪元素。我用这个简易写法给团队新人讲内联style权重相当于(1,0,0,0)ID相当于(0,1,0,0)类、属性、伪类相当于(0,0,1,0)标签、伪元素相当于(0,0,0,1)通配符*和继承来的样式权重为0十个class叠一起也压不过一个ID这个结论很反直觉但规则就是这样。需要注意!important是单独一层带!important的声明覆盖同优先级下所有不带它的声明多个!important之间再按来源和优先级比。我自己的经验是!important日常别碰只在覆盖第三方组件库、或者写调试样式时偶尔用因为一旦用了它后续想覆盖就要再叠一个!important维护成本非常高。一个隐藏的易错点:hover必须写在:link和:visited之后否则鼠标移上去hover不会生效。原因是相同优先级下后面的声明覆盖前面的如果:link写在:hover后面未访问链接会一直保持link状态的颜色。常见的记忆方法是LVHA顺序。还有一个更隐蔽的区分:first-child要求元素必须是父元素的第一个子元素而:first-of-type只看父元素中该类型的第一个混合标签结构下结果往往不同。2.2 盒模型与position体系布局绕不开的两块基石CSS2.1定义了标准盒模型内容(content)、内边距(padding)、边框(border)、外边距(margin)。标准模型里width只指content宽度padding和border再往外加而老IE的模型是width直接包含padding和border也就是今天box-sizing: border-box的样子。现代项目几乎都会在全局设置* { box-sizing: border-box; }这不是什么CSS3先进能力而是业务实战逼出来的选择大多数情况下给一个容器设置宽度时你希望这个宽度包含内边距和边框这样不管padding怎么改整体尺寸不会突然膨胀。很多新手布局老是算不对宽度十有八九就是盒模型没切过来。position体系也是CSS2.1打的地基。relative相对自身原位置偏移不脱离文档流absolute脱离文档流参照最近的position: static以外的祖先定位fixed默认参照视口但这里有个近几年的新坑如果祖先里有transform、filter这些会创建包含块的属性fixed会变成参照那个祖先页面滚动时表现完全超出直觉sticky是CSS Position Level 3的补充它介于relative和fixed之间滚动到阈值后吸顶实现吸顶导航的时候非常好用。2.3 清除浮动为什么这道过时的题还在被问float本身是CSS2.1里用来做图文混排的让图片左浮或右浮、文字环绕在周围。后来大家发现用float可以排两栏、三栏布局于是它被硬生生跨界成了布局工具伴随而来的是经典的高度塌陷问题子元素浮动了高度不再计算进父容器父容器高度变成0。解法经历了四代演变。最早在浮动子元素后面加一个带clear: both的额外标签然后是父元素伪元素方案——::after { content:; display:block; clear:both; }再后来发现给父元素设置overflow: hidden也能解决因为overflow非visible会创建BFCBFC会把浮动子元素包裹进来计算高度现在其实还有一个更干净的方案直接给父元素display: flow-root专门用来创建BFC不再需要伪元素。面试还问它不是因为大家真的还在用float搭页面而是因为它背后藏着BFC块级格式化上下文这个概念。BFC的触发条件包括浮动、overflow非visible、display为inline-block/flex/grid/flow-root、position为absolute或fixed。BFC能解释清楚三件事包含浮动子元素、阻止相邻兄弟的margin折叠、形成隔离区域避免外边距穿透。把BFC理解透了清除浮动的所有方案都是顺水推舟的事。2.4 文本自留地换行省略、字体和删除线CSS2.1里文本排版相关的基础属性也都是地基。字体方面font-family、font-size、font-weight、line-height这些从第一天就在用。换行和中英文混排的规则也在这里white-space控制空白符处理方式word-break控制单词折断overflow-wrap曾用名word-wrap控制是否允许一个长单词在任意位置断开。单行文本省略大家都会写那三件套white-space: nowrap; overflow: hidden; text-overflow: ellipsis;。注意text-overflow: ellipsis其实是CSS Overflow Level 3模块里的能力但这个三件套早就是业界的标配写法了。多行省略则是另一个故事标准写法应该是line-clamp目前主流实现还是display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;这个组合虽然带-webkit前缀但是被广泛支持的日常项目里完全能用。和高频热词里的CSS删除线有关的属性是text-decoration设置text-decoration: line-through就是删除线下划线是underline。别小看这些基础属性面试官经常在场景题里临时要求给这段文字加删除线这个链接去掉下划线文本超出一行显示省略号答得干脆利落很加分。3. CSS3重构了布局方式flex、grid与响应式3.1 flex与grid的定位差异一维和二维的分工flexbox和grid是CSS3模块里给布局带来最大改变的两个能力。我的比喻是flex是能自由伸缩的钢筋适合做一维排列grid是精确打格的砖墙适合做二维平面。flex的核心是主轴与交叉轴。容器上设display: flex后子项会沿主轴排列justify-content控制主轴方向的对齐align-items控制交叉轴方向的对齐。新手最常踩的坑是记不住默认值align-items的默认值是stretch所以所有子项高度会被拉成最高的一项flex-direction默认是row从左往右排。flex: 1这个简写应该拆开看它就是flex-grow: 1; flex-shrink: 1; flex-basis: 0%;意思是剩余空间全分给我空间不够时我也可以收缩。这是实现等分布局、弹性布局最常用的一个值。如果在colume排列的容器里想让某个元素吸到另一侧可以给它margin-left: autoauto外边距会自动吃掉剩余空间这个技巧在导航栏布局里非常实用。grid则完全不同它在容器上声明行和列的轨道grid-template-columns: 200px 1fr;就是两列左边固定200px右边占剩余宽度grid-template-columns: repeat(12, 1fr);就是经典的12栅格。gap属性同时管行距和列距这个属性后来backported到了flex上所以你会在flex里也看到gap的用法。我的选型经验是组件内部的东西比如按钮组、表单行、卡片头部优先flex页面的整体骨架比如侧边栏加内容区、三栏结构、仪表盘式的大屏优先grid。flex处理一排东西怎么站队很强但真要规划二维区域时grid会让代码可读性好太多。3.2 五种布局方式的对比与取舍html css 五种布局方式这个问题很多新手会搜我觉得值得给一个清晰的对比表布局方式核心机制适用场景当前定位文档流布局block/inline/inline-block自然排列文章内容、表单、列表默认基础永远存在浮动布局float让元素左/右浮动图文混排、老项目两栏已过时明白原理即可定位布局relative/absolute/fixed/sticky浮层、吸顶、遮罩、角标不可替代的辅助方案flex布局一维弹性排列导航、组件内部、居中现代主力之一grid布局二维网格排列页面骨架、栅格系统、大屏现代主力之一这张表看完很多人会意识到没有哪个时代是完全告别CSS2的。文档流和position到现在依然是布局的基础逻辑float虽然不再用来搭页但老项目里还是会碰到。我处理旧系统时的原则是能用flex和grid表达新需求就用遇到确实没法动的老代码能读懂、能局部修复就已经是合格的维护者了。3.3 媒体查询与功能单位响应式从碎屏适配开始媒体查询是CSS3 Media Queries模块的产物media (min-width: 768px)这种写法应该刻进DNA里。移动端优先和桌面端优先是两种思路我更推荐内容性质本身就是小屏优先的页面用移动端优先先写基础样式再用min-width逐级增强。效果是CSS文件更简洁且不会在小屏上为桌面视觉做一堆补偿。CSS3往后响应式越来越依赖功能单位。rem相对根字号vw/vh相对视口。大屏可视化项目里通常做一套1920宽的设计稿然后通过scale或者vw整体缩放到实际屏幕这里有个细节缩放容器时需要配合transform-origin: left top否则缩放中心默认在中心其它屏幕下位置会偏。2026年的前端响应式其实更应该用clamp()这一族函数了font-size: clamp(14px, 2vw, 20px)直接在一个声明里限定最小值、期望值、最大值比手写一段媒体查询精简便携得多。4. CSS3动效与视觉核心transform、动画、渐变和滤镜4.1 transform/transition/animation三件套怎么配合CSS3的动效三件套分工其实很明确。transform负责静态的位移、旋转、缩放、斜切它是动画的结果值transition负责属性值变化时的过渡过程适合hover、状态切换这类一次性的动画animation配合keyframes关键帧适合循环动画、多阶段动画、进入退出动画。我见过很多新人把transition写得很啰嗦其实它核心就是四个子属性transition-property指定要过渡的属性transition-duration是时长timing-function是缓动曲线transition-delay是延迟。写动画时有个性能原则尽量只动transform和opacity不要动left、top、width这种layout属性。因为transform和opacity变化走的是合成器不太触发重排和重绘而left从100px改到200px每一帧浏览器都要重新计算布局帧率很容易掉到30帧以下。还要点破一个概念混淆CSS里是没有鼠标移入事件的那是JS的onmouseenter。CSS里能做到的是:hover这个伪类加上transition视觉上模拟出移入时变化。很多刚入门的朋友搜css鼠标移入事件搜到的其实是.box:hover { ... }这个思路没错但脑子里要清楚CSS是声明式的不是事件驱动。4.2 rotateY(60deg) translateZ(300px)在浏览器里到底长什么样这个组合在网上经常被搜因为它非常反直觉。我建议先建立一个坐标系概念CSS里X轴向右、Y轴向下、Z轴向屏幕外朝观察者方向。translateZ(300px)就是把元素向屏幕外推近300px元素会变大rotateY(60deg)是绕竖直的Y轴旋转60度。然后是最关键的顺序问题。CSS的multiple transform是从右向左执行的也就是说transform: rotateY(60deg) translateZ(300px)里先执行的是translateZ(300px)再执行rotateY(60deg)。所以整个效果是卡片先朝观察者推近300px然后把这块已经变大的卡片绕屏幕中心竖直轴转60度。用肉眼描述就是一张卡片悬浮在你面前右侧边缘往屏幕里收左侧边缘往你面前探像一个斜着打开的牌面。加上透视属性perspective之后近大远小会更明显左半部分看起来更大更近。如果反过来写translateZ(300px) rotateY(60deg)执行顺序是先旋转后平移效果会完全不同卡片先被转成斜侧姿态再整体向屏幕外推300px它不会停留在以原点为中心的圆柱面上。很多新手写的3D翻转效果总是跟预期不一样就是没搞清楚变换列表从右往左生效这个顺序规则。也正因如此3D旋转木马相册的写法经常是rotateY(角度) translateZ(半径)因为可以先统一把图推到圆周上再按各自角度分列圆周不同位置。4.3 3D旋转正负判断的核心规则css 3d旋转正负判断核心规则这个问题我直接给一套可以落地的记忆方法变换轴正方向正角度效果从屏幕正面看rotateXX轴向右上边缘向后倒下边缘向前翘rotateYY轴向下右边缘向后撤左边缘向前靠rotateZZ轴向屏幕外在屏幕平面内顺时针旋转统一规则是在CSS使用的左手坐标系里从坐标轴的正方向往原点看正角度都是顺时针。这条规则对X、Y、Z三条轴都成立。如果记不住抽象规则就按表里的效果直接推演比如想做一个卡片从正面翻到背面的效果实际上要用rotateY(180deg)因为右缘后撤、左缘前靠凑够180度后整张卡片背面朝向你。实际动手的时候还有个技巧把perspective放在父元素上子元素做3D变换这样整个空间的透视关系才正确。很多新人在同一个元素上同时写transform: perspective(800px) rotateY(...)那种写法不是不行但每个元素各有各的透视原点整体空间感是乱的。4.4 涟漪光圈与3D相册两个纯CSS案例热词里出现css涟漪光圈扩散和css动态相册纯代码这两个都是拿CSS3能力做小效果的代表直接看代码。涟漪光圈的核心是box-shadow的spread扩散加透明度衰减.ripple { width: 60px; height: 60px; border-radius: 50%; animation: ripple 2s ease-out infinite; } keyframes ripple { 0% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.5); } 100% { box-shadow: 0 0 0 40px rgba(24, 144, 255, 0); } }原理很简单阴影从无到有扩散到40px半径同时颜色逐步透明看起来就像水波一圈圈荡开。挂在按钮上做点击反馈或者做雷达扫描效果都可以。注意如果容器面积大、动画时间长box-shadow的扩散运算有一定开销别在页面里放几十个。3D旋转木马相册需要配合perspective和transform-stylediv classstage div classcards div style--i:11/div div style--i:22/div !-- 一直到10 -- /div /div.stage { perspective: 1200px; } .cards { transform-style: preserve-3d; animation: spin 20s linear infinite; } .cards div { position: absolute; transform: rotateY(calc(var(--i) * 36deg)) translateZ(300px); } keyframes spin { to { transform: rotateY(360deg); } }10张卡片每张绕Y轴旋转36度的整数倍再向外推300px就均匀分布在以中心为圆心的圆柱面上。这里必须加transform-style: preserve-3d否则子元素的3D空间会被压平加了之后旋转整个容器相册就像旋转木马一样转起来。想加交互可以给.cards:hover设置animation-play-state: paused这就是伪类和动画配合的典型用法。5. 工程实战旧项目兼容、样式组织和性能取舍5.1 样式引入方式与file://下加载CSS的报错CSS样式引入方式老生常谈但真的值得重新排一遍外链link、import、style标签、内联style属性、还有现代构建工具里的CSS Modules和CSS-in-JS。外链link是性能最优的主流方案CSS文件独立缓存浏览器可以并行下载多个import这个写法从CSS2.1就有了但它必须写在CSS文件最前面并且会阻塞后续资源的并行加载现代项目里基本可以当它不存在。一个特别常见的报错是Access to CSS stylesheet at file:///c:/users/...很多新人在本地直接双击HTML文件时遇到。这个报错不是代码问题是浏览器的本地文件安全策略在拦截file协议下加载外部CSS。解决方案很简单起一个本地服务器比如在项目目录运行python -m http.server或者用VS Code的Live Server、npx serve。只要改成http://localhost访问报错立刻消失。这个坑我见太多人卡过值得记一笔。CSS文件的放置位置也有讲究外链样式要放在head里避免页面先渲染出无样式内容再突然闪样式。写在body里的样式或脚本在性能分析里往往会造成额外的渲染阻塞。5.2 IE11与前缀兼容性策略不是全用CSS2html网页 ie11打开css样式失效是热词里出现的真实场景。直到今天确实还有企业内网、嵌入式终端、政务类系统跑着IE11。IE11对CSS3的很多能力支持不完整grid基本废、CSS变量不支持、clamp()不支持、aspect-ratio不支持flexbox虽然能用但bug很多比如经典的flex子项min-width问题。遇到这种环境我的策略不是所有样式退回CSS2而是渐进增强先用CSS2时代的稳妥方案做一版基础布局再通过supports (display: grid) { ... }把新能力叠加进去。supports本身就是CSS3的Conditional Rules模块它让浏览器在运行时代替我们做能力检测。现代工程里Autoprefixer会自动根据配置的浏览器范围补-webkit-、-ms-这些前缀配合PostCSS一起用团队基本不需要手写前缀。但前提是设计上要有降级可用的意识——基础功能不依赖新特性增强功能才用到新特性。5.3 原子化CSS现代团队怎么写样式原子性css最近热度一直不低它本质上是把样式拆到最小粒度一个类只干一件事.flex管display:flex.mt-4管margin-top:1rem.text-center管text-align:center。Tailwind CSS和UnoCSS是这一派最出名的代表。原子化CSS的好处非常明显不用费心想类名了组件的样式天然收敛在HTML里不会出现改一个类全局崩掉的情况坏处也明显HTML会变长新人对这套CSS的字典有个学习成本还有人担心它不够语义化。我的态度是它和组件库并不冲突团队里如果组件库已经做得比较重定制样式再用原子类会省很多事如果项目本身就很小直接写普通的类选择器也完全没问题。现代样式的工程化少不了一个东西CSS自定义属性也就是CSS变量。:root里定义--primary-color、--spacing-base主题切换时只要改根变量整个组件库的颜色全变。这也是CSS3的Custom Properties模块给前端工程化带来的最实际收益之一。6. 2026前端的CSS面试题高频清单和答题思路6.1 高频考点与答题要点把每年都会出现、2026年依然会考的CSS题目收成一张清单每题给一个答题锚点题目答题要点CSS选择器优先级内联ID类/属性/伪类标签/伪元素!important单独一层什么是BFC块级格式化上下文触发条件能包裹浮动、隔离margin折叠盒模型区别content-box的width只算contentborder-box包含padding和border水平垂直居中flexmargin autoabsolutetransformgrid place-items清除浮动方案clear:both、伪元素、overflow、flow-root记原理position: sticky滚动吸顶需要配top/left父容器overflow和高度有限制flex: 1的含义grow 1、shrink 1、basis 0%剩余空间均分3D旋转方向左手坐标系从轴正方向看正角度顺时针动画性能优化只动transform和opacity减少layout属性变更响应式方案媒体查询clamp()em/rem/vw组合6.2 那些容易答错的细节默认值、覆盖和坐标系很多人在八股上栽跟头不是不知道概念而是栽在细节默认值上。flex的align-items默认是stretch很多人都记成了centergrid和flex里的gap默认是0position: sticky必须给一个top或bottom才会生效animation-fill-mode默认是none动画结束会跳回初始状态想保持在终点要设forwards或both。transform-origin也是容易被忽视的一个属性它默认是center center改到底部或左上角后旋转和缩放的锚点会完全变化。比如给卡片做从底部展开的动画就要把transform-origin: bottom center。还有margin塌陷相邻兄弟的垂直margin取大值父子之间如果父元素没有padding、border或BFC子元素的margin可能会透传到父元素外面。这些细节面试官特别爱深挖。坐标系问题上文已经讲透了但面试里值得再背一遍CSS是左手系X向右、Y向下、Z朝观察者rotateY(60deg) translateZ(300px)先推近再旋转。把顺序规则、正负规则、两个案例都讲出来这道题基本就过关了。6.3 两个高频场景题垂直居中与两栏/三栏布局垂直居中大概是前端面试出现频率最高的CSS题。我给一个排序flex方案最通用display: flex; align-items: center; justify-content: center;五行搞定grid方案更短display: grid; place-items: center;绝对定位加transform: translate(-50%, -50%)适合不知道容器宽高的情况老式的line-height: 容器高度只适合单行文本不适合复杂内容。两栏布局也就是左边固定侧边栏、右边内容区最直观的是flex容器display: flex;左边固定宽度右边flex: 1;grid写法更简洁grid-template-columns: 200px 1fr;还自带gap控制间距。三栏布局flex让中间栏flex: 1;grid写grid-template-columns: 1fr 2fr 1fr;。这些题表面看是布局实际考察你对两种现代布局工具的熟悉程度。我的建议是flex和grid都要能徒手写出来 2026年再只会float怕是不太好混了。我个人在实际操作里的体会是CSS2到CSS3的跨度太大想靠一份笔记从头背到尾不现实但有两条路径非常有效。第一条是把版本和模块的边界理清楚遇到陌生属性先建立这是CSS2.1的地基还是某个CSS3模块的能力的直觉第二条是浏览器里改参数把rotateY、translateZ、perspective这些值挨个动一遍看过真实渲染结果之后理解3D变换的难度会瞬间降低一大截。把这些基础打扎实后面不管用什么花活心里都稳得很。