在 Flex 容器中，要让子项文本溢出显示省略号，需要如何设置 min-width 或 overflow？
围绕“在 Flex 容器中，要让子项文本溢出显示省略号，需要如何设置 min-width 或 overflow”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 flex 项 min-width:auto 阻止收缩导致溢出，需设置 min-width:0 等，并说明与块级的不同。
核心关键词flex 子项 text-overflow min-width 省略
面试知识索引 · 分类、标签与搜索
CSS · 容器化面试题，41 道完整答案
CSS · 容器化面试题第 1 页，显示第 1–41 题，共找到 41 道完整解析，可继续按分类、标签与关键词缩小范围。
41筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
为什么对 inline-block 元素设置 text-overflow: ellipsis 通常无效？请分析原因并给出解决办法。
围绕“为什么对 inline-block 元素设置 text-overflow: ellipsis 通常无效？请分析原因并”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 text-overflow 适用于块容器，inline-block 需要 overflow hidden 与 white-sp。
核心关键词inline-block text-overflow 无效 解决 - 0003
如何设计一个既响应式又具有最大宽度的容器？max-width 与 width 结合使用时有什么注意事项？
围绕“如何设计一个既响应式又具有最大宽度的容器？max-width 与 width 结合使用时有什么注意事项”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须给出 max-width: 100% 或固定值加 margin:auto 的方案，并说明 margin 与百分比的关系。
核心关键词max-width 响应式 最大宽容器 - 0004
给块级元素设置 overflow: auto 后会产生哪些布局副作用？（例如创建 BFC、裁剪内容、生成滚动容器）
围绕“给块级元素设置 overflow: auto 后会产生哪些布局副作用？（例如创建 BFC、裁剪内容、生成滚动容器）”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须列出创建滚动容器与 BFC、裁剪溢出内容、影响 sticky 定位等至少三个副作用。
核心关键词overflow auto 副作用 BFC 滚动容器 - 0005
overflow: clip 与 overflow: hidden 在滚动与裁剪方面有什么关键区别？
围绕“overflow: clip 与 overflow: hidden 在滚动与裁剪方面有什么关键区别”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须明确 clip 禁止程序化滚动且不建立格式化上下文，hidden 允许 JS 滚动且可能产生滚动容器。
核心关键词overflow clip 与 hidden 区别 - 0006
为什么 position: sticky 在设置了 overflow: hidden 的父元素中可能失效？应如何修复？
本文解释 position: sticky 在 overflow: hidden 父元素中失效的机制，即 overflow 创建滚动容器使 sticky 参照改变，并提供具体修复方案与边界条件。
核心关键词sticky 失效 overflow hidden 修复 - 0007
sticky 定位元素在哪些条件下会“粘住”，又会在什么时候随页面滚动离开？请给出一个典型实现方案。
围绕“sticky 定位元素在哪些条件下会“粘住”，又会在什么时候随页面滚动离开？请给出一个典型实现方案”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 top 等阈值与父容器边界的限制，并给出实现导航吸顶的例子。
核心关键词position sticky 粘性定位 触发条件 - 0008
实现单行文本溢出显示省略号需要哪些 CSS 属性，为什么这些属性缺一不可？
围绕“实现单行文本溢出显示省略号需要哪些 CSS 属性，为什么这些属性缺一不可”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖必须列出 white-space, overflow, text-overflow 以及块容器约束，并解释各属性作用。
核心关键词单行文本省略号 text-overflow 属性 - 0009
::first-line 伪元素能对哪些类型的元素生效？为什么对块级和行内元素会有差异？
围绕“::first-line 伪元素能对哪些类型的元素生效？为什么对块级和行内元素会有差异”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需指出只对块容器内第一行有效，但 flex 和 grid 容器中不起作用，说明理由。
核心关键词CSS ::first-line pseudo-element applicability - 0010
Flex 容器中的绝对定位子项会对 flex 布局产生什么影响？它的 static position 如何确定？
围绕“Flex 容器中的绝对定位子项会对 flex 布局产生什么影响？它的 static position 如何确定”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需说绝对定位项不参与 flex 布局，但 static position 参照对齐属性和容器边，但不要提 fixed。
核心关键词flex 绝对定位子项 static position - 0011
在单行 flex 容器中，align-content 是否有效？为什么弹性盒规范将它设计为不影响单行场景？
围绕“在单行 flex 容器中，align-content 是否有效？为什么弹性盒规范将它设计为不影响单行场景”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 no wrap 且单行时 align-content 无效，不同于 grid，但不要引申到 flex-wrap 默认。
核心关键词align-content single line - 0012
align-content: space-between 在多行 flex 容器中如何分配行间距？如果只有一行结果会怎样？
围绕“align-content: space-between 在多行 flex 容器中如何分配行间距？如果只有一行结果会”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需描述将行间空白均匀分配，单行时无效，但避免深入各浏览器差异。
核心关键词align-content space-between rows - 0013
当 flex 容器发生多行包裹时，align-content 如何分配各 flex line 在交叉轴上的空间？与 align-items 有何分工？
围绕“当 flex 容器发生多行包裹时，align-content 如何分配各 flex line 在交叉轴上的空间？与 ”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 align-content 作用于 flex line 之间的空间分配，而 align-items 作用于行内项，但避免过深的。
核心关键词align-content multi-line flex - 0014
align-self 可以覆盖父容器的 align-items，但它在交叉轴上如何与 justify-content 交互？
围绕“align-self 可以覆盖父容器的 align-items，但它在交叉轴上如何与 justify-content”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需单独说明 align-self 覆盖 align-items 且影响交叉轴，与主轴的 justif-content 无关，不要讨论 m。
核心关键词align-self override - 0015
在 align-items: center 的 flex 容器中，margin: auto 如何影响交叉轴？它与自动外边距居中为何有时会互相覆盖？
围绕“在 align-items: center 的 flex 容器中，margin: auto 如何影响交叉轴？它与自动”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 auto 外边距同时吸收该轴剩余空间，与 align 冲突时结果，但不扩大范围。
核心关键词flex margin auto cross-axis - 0016
在 column 方向且容器有固定高度、flex-wrap: wrap 时，若 align-content: stretch 能否让每一列的宽度同时等分？
围绕“在 column 方向且容器有固定高度、flex-wrap: wrap 时，若 align-content: str”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需分析多行在 column 下交叉轴为水平，stretch 影响 col width 分配，但不要深入复杂算法。
核心关键词align-content stretch column wrap - 0017
具体讲一个常见布局：使用 column wrap 实现瀑布流或分列时，为何各列高度相等？如何利用 align-content 控制列间隙？
围绕“具体讲一个常见布局：使用 column wrap 实现瀑布流或分列时，为何各列高度相等？如何利用 align-con”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需分析当容器高度固定或 item 高度 auto 时列高的表现，但避免过度优化瀑布流。
核心关键词flex column wrap 等高列 瀑布流 - 0018
当一个多行 flex 容器没有显式高度时，各行如何分布？为什么说 flex line 的高度是内容高度而不是平均分配？
围绕“当一个多行 flex 容器没有显式高度时，各行如何分布？为什么说 flex line 的高度是内容高度而不是平均分配”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明在 auto 高度下多行紧贴内容，align-content 不产生拉伸，但可配合 stretch 行为区分。
核心关键词flex 多行容器 无显式高度 行高 - 0019
flex-basis 设置为百分比时，它的相对基准是什么？在无显式宽度时如何解析？
本文解释 flex-basis 百分比的解析基准：主轴内部尺寸，并说明容器主轴尺寸不确定时的回退行为，通过对比 0 和 0% 的差异揭示机制。
核心关键词flex-basis percentage - 0020
flex-shrink: 0 会导致 flex 容器溢出吗？实际布局中如何预防？
围绕“flex-shrink: 0 会导致 flex 容器溢出吗？实际布局中如何预防”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明关闭收缩后内容可溢出，并给出 min-width 等应对方式，但不要跳到 flex-wrap。
核心关键词flex-shrink 0 overflow - 0021
flex-wrap: wrap 在什么条件下触发换行？换行后每一行（flex line）的尺寸如何确定？
围绕“flex-wrap: wrap 在什么条件下触发换行？换行后每一行（flex line）的尺寸如何确定”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明容器宽度不足时子项换到新行，行高由最高项决定，但不要深入 align-content 对齐。
核心关键词flex-wrap wrap flex line - 0022
在 column 方向的 flex 容器中，min-height: auto 如何影响子项收缩？与 row 方向有何不同？
围绕“在 column 方向的 flex 容器中，min-height: auto 如何影响子项收缩？与 row 方向有何”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释在 column 下 min-height 类似 min-width 的角色，但注意对齐方式等，不要延伸至整体尺寸计算。
核心关键词min-height auto flex column - 0023
flex 容器中的文本过长无法截断（text-overflow）失败，与 min-width: auto 有什么关系？该如何修复？
围绕“flex 容器中的文本过长无法截断（text-overflow）失败，与 min-width: auto 有什么关系”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需诊断是因默认 min-width 导致子项不能收缩，给出 min-width:0 和 overflow 结合方案，但不要推广到 gri。
核心关键词flex text-overflow min-width - 0024
flex-wrap: nowrap 下，当所有项总 flex-basis 超过容器时会发生什么？与 wrap 的表现有何本质区别？
围绕“flex-wrap: nowrap 下，当所有项总 flex-basis 超过容器时会发生什么？与 wrap 的表现”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需描述项尽力收缩或溢出，而 wrap 则会换行，比较两者行为，但避免讨论 align 方式。
核心关键词flex-wrap nowrap 溢出 - 0025
CSS Grid 容器没有显式高度时，行轨道如何自适应内容？
围绕“CSS Grid 容器没有显式高度时，行轨道如何自适应内容”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 auto 行会扩大以内容最大项，且容器高度为所有行总和。
核心关键词CSS Grid 行轨道高度自适应内容 - 0026
CSS Grid 中 fr 单位如何分配剩余空间？
围绕“CSS Grid 中 fr 单位如何分配剩余空间”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 fr 基于网格容器的自由空间按比例分配，且受 minmax 影响；不与其他单位比较。
核心关键词CSS Grid fr单位分配剩余空间 - 0027
CSS Grid 中 gap 属性在什么情况下会产生额外的轨道空间，以及它如何影响隐式网格尺寸？
围绕“CSS Grid 中 gap 属性在什么情况下会产生额外的轨道空间，以及它如何影响隐式网格尺寸”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 gap 作用于相邻轨道，并影响容器的最小尺寸；不扩大到 margin/padding 对比。
核心关键词CSS Grid gap属性与隐式轨道空间 - 0028
CSS Grid 中轨道尺寸使用带单位长度时如何计算容器自由空间？
围绕“CSS Grid 中轨道尺寸使用带单位长度时如何计算容器自由空间”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明固定长度（px、em）轨道是否参与 fr 分配，以及剩余空间计算方式。
核心关键词CSS Grid 固定长度轨道与自由空间计算 - 0029
CSS Grid 当容器改变大小时，已放置的项目和隐式轨道如何自适应？
围绕“CSS Grid 当容器改变大小时，已放置的项目和隐式轨道如何自适应”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需区分显式轨道（如 1fr）随容器变化，隐式轨道则可能固定或由 auto-flow 决定；不深入到媒体查询。
核心关键词CSS Grid 容器尺寸变化隐式轨道自适应 - 0030
CSS Grid 2 中改进的 min-content 尺寸算法解决了什么问题？
围绕“CSS Grid 2 中改进的 min-content 尺寸算法解决了什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明 grid 容器是 block 时如何考虑块级内容和滚动条。
核心关键词CSS Grid 2 min-content尺寸算法改进 - 0031
CSS Grid 中当显式网格小于容器时，如何使用对齐属性实现空间分配？
围绕“CSS Grid 中当显式网格小于容器时，如何使用对齐属性实现空间分配”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要说明容器总尺寸与轨道尺寸的关系，使用 align-content 等来分布轨道。
核心关键词CSS Grid 网格小于容器时的空间对齐 - 0032
CSS Grid 的子网格元素为什么必须设置 display: grid 才能生效？
围绕“CSS Grid 的子网格元素为什么必须设置 display: grid 才能生效”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需强调 subgrid 是适用于网格容器的 display 值，且父项必须本身是网格项。
核心关键词CSS Grid subgrid需设置display grid原因 - 0033
container-name 属性的作用是什么？多个具有不同 name 的容器如何影响查询精度？
围绕“container-name 属性的作用是什么？多个具有不同 name 的容器如何影响查询精度”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖解释命名容器与匿名容器的区别，不偏离查询用法。
核心关键词CSS container-name 命名容器 作用 - 0034
如何在同一规则中同时使用容器查询与媒体查询？两种条件同时满足时如何书写？
围绕“如何在同一规则中同时使用容器查询与媒体查询？两种条件同时满足时如何书写”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖给出正确语法。
核心关键词CSS container queries media queries combination - 0035
使用容器查询前必须设置哪些属性？为什么必须指定 container-type？其取值与影响有哪些？
围绕“使用容器查询前必须设置哪些属性？为什么必须指定 container-type？其取值与影响有哪些”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖专讲建立容器所需属性。
核心关键词CSS container-type 容器查询 设置方法 - 0036
什么是 CSS 容器查询？它与媒体查询在响应式设计中的定位有何不同？
围绕“什么是 CSS 容器查询？它与媒体查询在响应式设计中的定位有何不同”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比二者响应对象，不深入语法细节。
核心关键词CSS 容器查询 container queries 与媒体查询区别 - 0037
容器查询是否可以嵌套？嵌套时容器单位（cqw 等）的解析基准是什么？
围绕“容器查询是否可以嵌套？嵌套时容器单位（cqw 等）的解析基准是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖明确嵌套容器的尺寸计算原则。
核心关键词CSS container queries nesting resolution - 0038
哪些现代浏览器支持容器查询？如何在低版本中使用回退方案？
围绕“哪些现代浏览器支持容器查询？如何在低版本中使用回退方案”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕只基于“特性支持”做设计决策，不写具体 JS 检测代码。
核心关键词CSS 容器查询 浏览器支持 回退方案 - 0039
容器查询如何根据自定义属性（custom properties）进行样式查询？该项技术的限制是什么？
围绕“容器查询如何根据自定义属性（custom properties）进行样式查询？该项技术的限制是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖只讲 `@container style()` 语法，不混杂尺寸查询。
核心关键词CSS style queries container queries - 0040
容器查询单位（cqw、cqh）与视口单位（vw、vh）有何异同？在响应式组件中如何选择？
围绕“容器查询单位（cqw、cqh）与视口单位（vw、vh）有何异同？在响应式组件中如何选择”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要对比计算基准与应用场景。
核心关键词CSS container query units vs viewport units - 0041
在响应式设计中如何配合使用 rem 与视口/容器单位？它们各自解决什么问题？
围绕“在响应式设计中如何配合使用 rem 与视口/容器单位？它们各自解决什么问题”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要比较相对单位的适用性，不深入字体策略。
核心关键词响应式设计 rem 与 vw 单位配合使用