当关键帧中设置了不可插值属性（如 display）时，浏览器如何处理？
围绕“当关键帧中设置了不可插值属性（如 display）时，浏览器如何处理”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释不可插值属性会在关键帧处跳变，不覆盖自定义动画属性。
核心关键词CSS keyframes 不可插值属性 display 处理
面试知识索引 · 分类、标签与搜索
CSS面试题，240 道完整答案
CSS面试题第 3 页，显示第 101–150 题，共找到 240 道完整解析，可继续按分类、标签与关键词缩小范围。
240筛选结果
52技术分类
178检索标签
5索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 3 页
本页面试问题
按稳定语义路径排序
- 0101
- 0102
当元素同时使用 translate, scale, rotate 等多个变换时，它们应用的先后顺序如何影响最终结果？
围绕“当元素同时使用 translate, scale, rotate 等多个变换时，它们应用的先后顺序如何影响最终结果”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明书写顺序从右到左影响矩阵组合，不推导矩阵数学具体表达式。
核心关键词CSS transform 多函数顺序与矩阵乘法 - 0103
如何用 background-clip: text 为文字施加渐变颜色？有哪些兼容性注意事项？
围绕“如何用 background-clip: text 为文字施加渐变颜色？有哪些兼容性注意事项”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 clip 原理与需要加前缀或 fallback。
核心关键词CSS background-clip text 渐变文字 - 0104
在使用 prefers-reduced-motion 媒体查询覆盖动画时，为什么建议保留原样式而不直接删除 transition/animation？
围绕“在使用 prefers-reduced-motion 媒体查询覆盖动画时，为什么建议保留原样式而不直接删除 tran”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖从渐进增强角度解释提供静止替代方案，而不是简单禁用所有动效。
核心关键词prefers-reduced-motion 覆盖动画 可访问性 - 0105
radial-gradient 如何设置椭圆的中心与形状？ellipse 和 circle 的区别是什么？
围绕“radial-gradient 如何设置椭圆的中心与形状？ellipse 和 circle 的区别是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比两个形状关键字及大小参数，不覆盖色标细节。
核心关键词CSS radial-gradient ellipse 与 circle 区别 - 0106
除了 transition 和 animation，如何将 prefers-reduced-motion 用于优化滚动行为或 JS 动画？
围绕“除了 transition 和 animation，如何将 prefers-reduced-motion 用于优化滚”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明在 CSS scroll-behavior 和 JS 中的联合使用，不覆盖完整媒体查询用法。
核心关键词prefers-reduced-motion 优化滚动与 JS 动画 - 0107
用 animation 实现打字机效果时，关键帧 steps() 与线性 transition 有什么核心区别？
围绕“用 animation 实现打字机效果时，关键帧 steps() 与线性 transition 有什么核心区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释 steps 提供离散跳变，不覆盖具体打字效果代码。
核心关键词CSS steps() 打字机效果 - 0108
CSS 中 perspective 与 perspective-origin 对 3D 变换的可视效果有何影响？
围绕“CSS 中 perspective 与 perspective-origin 对 3D 变换的可视效果有何影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明观察点与消失点如何影响三维效果。
核心关键词CSS perspective 与 perspective-origin 3D 效果 - 0109
transform-origin 如何影响 rotate 或 scale 的变换效果？请用示例说明。
围绕“transform-origin 如何影响 rotate 或 scale 的变换效果？请用示例说明”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释 transform-origin 如何作为变换的参考点。
核心关键词CSS transform-origin 对 rotate scale 的影响 - 0110
父元素 transform 会影响其子元素的固定定位或绝对定位吗？为什么？
围绕“父元素 transform 会影响其子元素的固定定位或绝对定位吗？为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 transform 使父级成为子元素的包含块，不覆盖 position 常规规则。
核心关键词CSS transform 父元素 fixed 定位包含块 - 0111
transform-style: preserve-3d 与 flat 对嵌套 3D 元素的呈现有什么不同？
围绕“transform-style: preserve-3d 与 flat 对嵌套 3D 元素的呈现有什么不同”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比子元素 3D 空间是否共享,不涉及 backface-visibility。
核心关键词CSS transform-style preserve-3d 与 flat 区别 - 0112
CSS 独立属性 rotate、scale、translate 与 transform 中的对应函数有何区别？如何优先选择？
围绕“CSS 独立属性 rotate、scale、translate 与 transform 中的对应函数有何区别？如何优”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要比较独立属性的书写顺序与变换覆盖行为。
核心关键词CSS rotate scale translate 独立属性与 transform 函数 - 0113
用百分比设置 translate 时，百分比是相对于元素自身尺寸还是父元素尺寸？
围绕“用百分比设置 translate 时，百分比是相对于元素自身尺寸还是父元素尺寸”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖确定百分比参考自身宽高。
核心关键词CSS translate 百分比 相对自身还是父元素 - 0114
在 transitionend 事件中，如何区分是哪个属性结束？如果过渡被取消会怎样？
围绕“在 transitionend 事件中，如何区分是哪个属性结束？如果过渡被取消会怎样”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖指出 propertyName 可区分，cancel 事件会触发，但不覆盖所有事件特性。
核心关键词CSS transitionend 事件 propertyName 判断 - 0115
如何让元素在其内容高度已知和未知时都能平滑展开/收起（transition height）？
本文解释CSS高度过渡的原理，对比已知高度与未知高度方案：固定height精确、max-height近似有计时误差、grid行技巧可自适应内容，并讨论min-height默认值阻止收缩、内容动态变化等边界。
核心关键词CSS transition height auto 平滑展开收起 - 0116
当元素在 transition 进行中又被修改时，浏览器如何计算新目标值？
围绕“当元素在 transition 进行中又被修改时，浏览器如何计算新目标值”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明从当前插值点继续过渡而非重启。
核心关键词CSS transition 中断时如何计算目标值 - 0117
如何让元素的 width 与 opacity 在 transition 中分别使用不同的时长与缓动？
围绕“如何让元素的 width 与 opacity 在 transition 中分别使用不同的时长与缓动”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕演示用 transition 简写或长写按逗号分组实现独立控制，不比较动画关键帧的复杂情形。
核心关键词CSS transition 多属性不同时长缓动 - 0118
CSS transition 中 transition-property: all 与只列具体属性在性能上有何不同？
对比 transition-property 取 all 与显式列出属性的真实性能差异：浏览器按变更属性创建过渡，开销接近，差异在意外的过渡触发、时长不可拆分与维护风险。
核心关键词CSS transition-property all 性能差异 - 0119
如何在 CSS 中自定义 transition 或 animation 的速度曲线？cubic-bezier 的关键点数量有什么限制？
本文讲解 cubic-bezier 四个参数如何决定缓动曲线形状，包括 x 范围限制、y 可超出范围引起回弹，以及如何根据效果选择参数，避免常见误区。
核心关键词CSS cubic-bezier 自定义缓动曲线 - 0120
transition 只在哪些属性值变化时触发？请说明 display 从 none 到 block 是否过渡。
围绕“transition 只在哪些属性值变化时触发？请说明 display 从 none 到 block 是否过渡”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕限定可插值与不可插值属性，并解释 display 的切换行为常配合其他方式模拟。
核心关键词CSS transition 触发条件 display none 过渡 - 0121
如何利用 transition 结合 visibility 实现元素淡入淡出时可点击区域的延迟挂载？
围绕“如何利用 transition 结合 visibility 实现元素淡入淡出时可点击区域的延迟挂载”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 visibility 在过渡期间的可延迟特性，不覆盖其他不影响布局的属性。
核心关键词CSS transition visibility 淡入淡出 延迟挂载 - 0122
给一个按钮添加悬停微交互，选择用 transition 还是 animation？你基于什么判断？
围绕“给一个按钮添加悬停微交互，选择用 transition 还是 animation？你基于什么判断”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖从触发方式、控制能力等角度对比。
核心关键词CSS transition 与 animation 如何选择 - 0123
Flex 容器中的绝对定位子项会对 flex 布局产生什么影响？它的 static position 如何确定？
围绕“Flex 容器中的绝对定位子项会对 flex 布局产生什么影响？它的 static position 如何确定”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需说绝对定位项不参与 flex 布局，但 static position 参照对齐属性和容器边，但不要提 fixed。
核心关键词flex 绝对定位子项 static position - 0124
在单行 flex 容器中，align-content 是否有效？为什么弹性盒规范将它设计为不影响单行场景？
围绕“在单行 flex 容器中，align-content 是否有效？为什么弹性盒规范将它设计为不影响单行场景”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 no wrap 且单行时 align-content 无效，不同于 grid，但不要引申到 flex-wrap 默认。
核心关键词align-content single line - 0125
align-content: space-between 在多行 flex 容器中如何分配行间距？如果只有一行结果会怎样？
围绕“align-content: space-between 在多行 flex 容器中如何分配行间距？如果只有一行结果会”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需描述将行间空白均匀分配，单行时无效，但避免深入各浏览器差异。
核心关键词align-content space-between rows - 0126
当 flex 容器发生多行包裹时，align-content 如何分配各 flex line 在交叉轴上的空间？与 align-items 有何分工？
围绕“当 flex 容器发生多行包裹时，align-content 如何分配各 flex line 在交叉轴上的空间？与 ”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 align-content 作用于 flex line 之间的空间分配，而 align-items 作用于行内项，但避免过深的。
核心关键词align-content multi-line flex - 0127
在 column 方向下，align-items: center 对齐的是子项的水平方向还是垂直方向？为什么？
围绕“在 column 方向下，align-items: center 对齐的是子项的水平方向还是垂直方向？为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明在 column 下交叉轴是水平，故中心对齐是指水平居中，不要与 justify-content 混淆。
核心关键词align-items center column - 0128
align-items: stretch 在 flex 布局中如何决定交叉轴尺寸？如果子项设置了固定高度/宽度会发生什么？
围绕“align-items: stretch 在 flex 布局中如何决定交叉轴尺寸？如果子项设置了固定高度/宽度会发生”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明默认 stretch 在交叉轴上延伸，但若子项有显式尺寸或 auto 高度则影响不同，但不要深入 align-content。
核心关键词align-items stretch flex - 0129
align-self 可以覆盖父容器的 align-items，但它在交叉轴上如何与 justify-content 交互？
围绕“align-self 可以覆盖父容器的 align-items，但它在交叉轴上如何与 justify-content”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需单独说明 align-self 覆盖 align-items 且影响交叉轴，与主轴的 justif-content 无关，不要讨论 m。
核心关键词align-self override - 0130
在 align-items: center 的 flex 容器中，margin: auto 如何影响交叉轴？它与自动外边距居中为何有时会互相覆盖？
围绕“在 align-items: center 的 flex 容器中，margin: auto 如何影响交叉轴？它与自动”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 auto 外边距同时吸收该轴剩余空间，与 align 冲突时结果，但不扩大范围。
核心关键词flex margin auto cross-axis - 0131
flex 项同时设置 flex-grow: 1 和 margin: auto 时，它们对剩余空间的使用有何冲突？优先级如何？
围绕“flex 项同时设置 flex-grow: 1 和 margin: auto 时，它们对剩余空间的使用有何冲突？优先”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需区分剩余空间先被 auto 外边距吸收，再被 grow 分配，否则空间不足时表现差异，但不要深入计算过程。
核心关键词flex-grow margin auto conflict - 0132
align-items: baseline 在 Flex 中如何对齐不同字号的文本？它与 stretch 的主要区别是什么？
围绕“align-items: baseline 在 Flex 中如何对齐不同字号的文本？它与 stretch 的主要区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明基于首行文本基线对齐，适合按钮或导航，但避免在纵向书写下细分。
核心关键词align-items baseline flex - 0133
CSS Flex 布局中主轴（main axis）和交叉轴（cross axis）分别如何确定？与书写模式有什么关系？
解释 CSS Flex 布局中主轴由 flex-direction 决定、交叉轴垂直于主轴的机制，以及 writing-mode 和 direction 如何改变两轴的物理指向，附竖排场景与判断方法。
核心关键词flex 主轴交叉轴 书写模式 - 0134
在 column 方向且容器有固定高度、flex-wrap: wrap 时，若 align-content: stretch 能否让每一列的宽度同时等分？
围绕“在 column 方向且容器有固定高度、flex-wrap: wrap 时，若 align-content: str”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需分析多行在 column 下交叉轴为水平，stretch 影响 col width 分配，但不要深入复杂算法。
核心关键词align-content stretch column wrap - 0135
具体讲一个常见布局：使用 column wrap 实现瀑布流或分列时，为何各列高度相等？如何利用 align-content 控制列间隙？
围绕“具体讲一个常见布局：使用 column wrap 实现瀑布流或分列时，为何各列高度相等？如何利用 align-con”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需分析当容器高度固定或 item 高度 auto 时列高的表现，但避免过度优化瀑布流。
核心关键词flex column wrap 等高列 瀑布流 - 0136
当一个多行 flex 容器没有显式高度时，各行如何分布？为什么说 flex line 的高度是内容高度而不是平均分配？
围绕“当一个多行 flex 容器没有显式高度时，各行如何分布？为什么说 flex line 的高度是内容高度而不是平均分配”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明在 auto 高度下多行紧贴内容，align-content 不产生拉伸，但可配合 stretch 行为区分。
核心关键词flex 多行容器 无显式高度 行高 - 0137
CSS Flex 中交叉轴（cross axis）一定垂直于主轴吗？在 row 和 column 下分别对应哪条几何轴？
本题明确交叉轴与主轴垂直，并详解 row 与 column 下交叉轴的几何方向，强调书写模式的影响，帮助开发者准确判断并应用 Flex 交叉轴相关属性。
核心关键词flex 交叉轴 垂直 - 0138
flex-flow: row wrap 与 flex-flow: column wrap 在移动端导航布局中的换行行为有何不同？
围绕“flex-flow: row wrap 与 flex-flow: column wrap 在移动端导航布局中的换行行”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需判断主轴方向改变导致换行沿不同轴发生，并给出常见移动端导航做法，但不要覆盖 grid。
核心关键词flex-flow row column wrap - 0139
flex-basis: auto 与 flex-basis: content 有何区别？在何种场景下适用？
本文对比flex-basis: auto与content的解析差异：auto先查width并回退到内容，content直接基于内容而不看width。附兼容性判断和具体工程选择建议，帮助避免尺寸异常。
核心关键词flex-basis auto content - 0140
flex-basis 设置为百分比时，它的相对基准是什么？在无显式宽度时如何解析？
本文解释 flex-basis 百分比的解析基准：主轴内部尺寸，并说明容器主轴尺寸不确定时的回退行为，通过对比 0 和 0% 的差异揭示机制。
核心关键词flex-basis percentage - 0141
flex-direction: row 与 column 分别改变主轴方向，它们对子项尺寸和换行有什么不同影响？
围绕“flex-direction: row 与 column 分别改变主轴方向，它们对子项尺寸和换行有什么不同影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需明确主轴方向变化导致宽度/高度分别被视为主轴尺寸，影响 flex-basis 等计算，但不展开 grid。
核心关键词flex-direction row column 主轴 - 0142
flex-grow 数值在多个 flex 项之间如何分配剩余空间？比例计算的具体公式是什么？
围绕“flex-grow 数值在多个 flex 项之间如何分配剩余空间？比例计算的具体公式是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖能给出基于 flex-grow 权重分配剩余空间的算法，但避免讨论 flex-shrink 的收缩算法。
核心关键词flex-grow 分配公式 - 0143
当 flex-grow 为 0 时，flex 项是否可能仍然生长？在哪些情况下会？
围绕“当 flex-grow 为 0 时，flex 项是否可能仍然生长？在哪些情况下会”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明显式 grow 为 0 时所有项不会增长，但 auto 的 margin 或 stretch 等可能影响，但不要引入 flex-。
核心关键词flex-grow 0 表现 - 0144
flex-shrink 如何在空间不足时收缩 flex 项？它与 flex-basis 的具体关系是什么？
围绕“flex-shrink 如何在空间不足时收缩 flex 项？它与 flex-basis 的具体关系是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需描述按 shrink 比例加权 factor 并基于 flex-basis 的收缩过程，但避免深入 min-width 覆盖。
核心关键词flex-shrink 计算 - 0145
为什么有时即使设置 flex-shrink 很大，flex 项也不收缩？最小尺寸（min-width: auto）如何影响？
围绕“为什么有时即使设置 flex-shrink 很大，flex 项也不收缩？最小尺寸（min-width: auto）如”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需指出默认 min-width: auto 因内容阻止收缩，可覆盖为 0 等，但不要展开对 min-height 的讨论。
核心关键词flex-shrink min-width auto - 0146
flex-shrink: 0 会导致 flex 容器溢出吗？实际布局中如何预防？
围绕“flex-shrink: 0 会导致 flex 容器溢出吗？实际布局中如何预防”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明关闭收缩后内容可溢出，并给出 min-width 等应对方式，但不要跳到 flex-wrap。
核心关键词flex-shrink 0 overflow - 0147
flex-wrap: wrap 在什么条件下触发换行？换行后每一行（flex line）的尺寸如何确定？
围绕“flex-wrap: wrap 在什么条件下触发换行？换行后每一行（flex line）的尺寸如何确定”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明容器宽度不足时子项换到新行，行高由最高项决定，但不要深入 align-content 对齐。
核心关键词flex-wrap wrap flex line - 0148
flex 项的 order 属性如何改变视觉顺序？它与 DOM 顺序在键盘导航上有什么需要注意的？
围绕“flex 项的 order 属性如何改变视觉顺序？它与 DOM 顺序在键盘导航上有什么需要注意的”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 order 只改视觉顺序，不改变 tab 顺序，影响可访问性，但不要谈及 grid order。
核心关键词flex order accessibility - 0149
justify-content: flex-start 与 flex-end 如何依赖 flex-direction？在 RTL 下又有什么变化？
围绕“justify-content: flex-start 与 flex-end 如何依赖 flex-direction”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 start/end 随主轴方向变化，与 direction 无关，但不要延伸到逻辑属性。
核心关键词justify-content flex-start flex-end RTL - 0150
justify-content 的 safe 关键字有什么作用？在什么情况下会触发回退对齐？
围绕“justify-content 的 safe 关键字有什么作用？在什么情况下会触发回退对齐”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 safe 防止溢出时对齐造成的内容不可见，进而回退到 start，但不要介绍 unsafe。
核心关键词justify-content safe