Flex 子项里的长文本写了省略号样式，为什么还是把容器撑破了？
Flex 子项默认的自动最小宽度可能保留内容的最小尺寸，长单词或 nowrap 文本于是撑开容器，省略号始终没有溢出空间。给正确层级的子项设置 min-width: 0 或适当 overflow 才能允许收缩；多层嵌套和 Grid 轨道也有类似约束。
核心关键词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 因而看不到效果。限定 width 或 max-width 后还要设置不换行与溢出裁剪；纯 inline 元素无法按同样方式指定宽度，表格单元格又受列布局影响。
核心关键词inline-block text-overflow 无效 解决 - 0003
页面主体想在大屏上限宽居中、小屏上铺满，容器该怎么写？
限宽容器常用 max-width 限制大屏宽度、margin-inline: auto 居中，再留出小屏内边距。width: 100% 与 padding 叠加可能溢出，min-width 又可能压过最大宽度；Flex 子项中的自动最小尺寸也会影响容器能否真正缩窄。
核心关键词max-width 响应式 最大宽容器 - 0004
给一个块加上 overflow: auto，除了出滚动条还会带来哪些副作用？
overflow: auto 不只是按需显示滚动条，它还会建立滚动容器和 BFC，裁剪溢出，并改变 sticky 的滚动参照。Flex 子项使用时还可能改变自动最小尺寸；弹层被裁掉或吸顶失效时，应先检查祖先是否设置了它。
核心关键词overflow auto 副作用 BFC 滚动容器 - 0005
overflow: clip 和 overflow: hidden 看起来一样，到底差在哪？
overflow: hidden 和 clip 都能裁剪内容，但 hidden 仍可通过脚本或焦点滚动，并会建立滚动容器；clip 不提供这类滚动行为。sticky 参照、BFC 与单轴裁剪因此会不同，overflow-clip-margin 还可调整 clip 的裁剪边界。
核心关键词overflow clip 与 hidden 区别 - 0006
父元素加了 overflow hidden，sticky 为什么就不吸顶了？
sticky 元素会以最近的滚动容器为参照；祖先的 overflow: hidden 可能让它盯着一个并不滚动的容器，页面滚动时自然不吸顶。单轴 overflow 也可能触发类似效果；可按需求调整容器、改用 clip 或移动吸顶元素。
核心关键词sticky 失效 overflow hidden 修复 - 0007
sticky 元素什么时候粘住，什么时候又被带走？吸顶导航怎么写？
吸顶导航何时开始停住，取决于 top 等偏移阈值与最近的滚动容器；到达包含块边界后又会被带走。通讯录分组标题会依次接替吸附位置，若 sticky 完全不生效，应检查滚动容器、可滚动距离及父元素尺寸。
核心关键词position sticky 粘性定位 触发条件 - 0008
单行文本超出显示省略号要写哪几行 CSS，少一行为什么就不行？
单行省略需要元素确实发生水平方向溢出，再配合 white-space: nowrap、裁剪和 text-overflow: ellipsis 才能显示省略号。Flex 子项的最小宽度、纯行内元素没有可用宽度或声明写在错误层级，都会让文本继续撑开容器。
核心关键词单行文本省略号 text-overflow 属性 - 0009
first-line 伪元素能用在哪些元素上？
::first-line 选择块容器实际排版后的第一行文字，容器宽度变化、字体加载或内容改动都可能改变被选中的字符。它只支持部分文本相关属性，不适用于普通行内盒或 Flex、Grid 容器；不能把它当作固定的首句选择器。
核心关键词CSS ::first-line pseudo-element applicability - 0010
flex 容器里放一个绝对定位的子元素，布局会怎样？
flex 容器里的绝对定位子项不参与弹性布局，不占空间也不被 flex-grow 分配。但容器加了 position: relative 后仍然是它的包含块，定位坐标从容器 padding 边开始算。
核心关键词flex 绝对定位子项 static position - 0011
单行 flex 容器里 align-content 为什么不生效？
默认不换行的 Flex 容器只有一条 flex 行，align-content 没有可分配的行间空间，设置它通常看不到效果。单行子项的交叉轴位置由 align-items 控制；多行容器还需有多余的交叉轴空间才能体现行组对齐。
核心关键词align-content single line - 0012
align-content 设成 space-between 后行间距是怎么分的？
多行 Flex 容器只有交叉轴留有空白时，线与线之间的剩余空间才会被分散；只有一行或容器高度随内容增长时，改这个值可能看不到效果。通过固定高度的两行卡片对照项目对齐和线组对齐。
核心关键词align-content space-between rows - 0013
align-content 和 align-items 到底怎么分工？
align-content 管的是多条 flex line 之间的交叉轴空间分配，align-items 管的是每条 line 内部子项的对齐。两者作用层级不同，必须配合 flex-wrap: wrap 才能看到 align-content 的效果。
核心关键词align-content multi-line flex - 0014
align-self 怎么覆盖 align-items 的效果？
align-self 让单个 flex 子项覆盖容器的 align-items 设定，独立控制自己在交叉轴上的对齐方式。它和 justify-content 互不干扰，一个管交叉轴，一个管主轴。
核心关键词align-self override - 0015
flex 子项在交叉轴上用 margin auto 会怎样？
flex 子项在交叉轴方向设 margin auto 会吸收行内所有剩余空间，效果相当于覆盖了 align-items。比如 margin-top: auto 把子项推到底部，比 align-self: flex-end 优先级更高。
核心关键词flex margin auto cross-axis - 0016
column 方向下 align-content stretch 能让各列等宽吗？
flex-direction: column 加 flex-wrap: wrap 时，align-content: stretch 会让各列在交叉轴（水平方向）上等分容器宽度。每列分到相同的宽度，子项在各自列里占满这个宽度。
核心关键词align-content stretch column wrap - 0017
column wrap 布局各列为什么等高？能做瀑布流吗？
纵向排列的 Flex 项要换列，容器必须提供可用的主轴高度；每列的项目按这个高度分组，而列宽取决于项目与剩余横向空间。对比固定高度分栏和真正瀑布流，说明为何列底会留白、默认拉伸也不保证各列等宽。
核心关键词flex column wrap 等高列 瀑布流 - 0018
多行 flex 容器没设高度时，行高是怎么算的？
多行 flex 容器没有显式高度时，容器高度由内容撑开。每行的高度等于行内最高子项的高度，行与行紧挨着排列，没有多余空间给 align-content 分配。 同时说明未限定高度时为何通常只随内容增长。
核心关键词flex 多行容器 无显式高度 行高 - 0019
flex-basis 的百分比是相对谁算的？
flex-basis 百分比相对容器的主轴内部尺寸计算。容器没有明确尺寸时百分比回退为 content。还要注意 flex-basis: 0 和 flex-basis: 0% 的区别：0 不会触发百分比解析，0% 会。
核心关键词flex-basis percentage - 0020
flex-shrink: 0 一定会让 Flex 容器溢出吗？
工具栏按钮设置不收缩后，是否溢出仍取决于容器余量、其他项目的收缩能力和最小尺寸。用由宽到窄的过程观察负空间怎样转移，区分按钮保宽、搜索框收缩和最终横向滚动三个阶段。
核心关键词flex-shrink 0 overflow - 0021
flex-wrap: wrap 什么时候换行？每一行又怎么排？
响应式卡片使用 Flex 换行时，项目先分到不同的线，每条线再独立计算伸缩与剩余空间。解释为什么最后一排只有一张卡片时可能突然拉宽，并说明需要严格跨行列对齐时应该怎样选择布局方式。
核心关键词flex-wrap wrap flex line - 0022
纵向 Flex 布局里，子项为何设了滚动仍撑高容器？
固定页头下的长列表设为弹性增长，仍可能把页面整体撑长而不出现内部滚动。沿纵向 Flex 的祖先链检查高度约束和自动最小高度，找出应允许收缩的那一层，并把滚动交给真正的内容区域。
核心关键词min-height auto flex column - 0023
Flex 里的文本为什么设置了省略号还会撑开容器？
评论长链接不出现省略号，可能是直接参与 Flex 的外层项目没有真正变窄，而非文本溢出规则失效。沿父子层级定位尺寸瓶颈，先让项目盒可收缩，再检查文本节点是否满足单行、省略和裁剪条件。
核心关键词flex text-overflow min-width - 0024
flex-wrap: nowrap 下，项目总宽度超了会怎样？
手机页头限定单行时，搜索框可能先收缩，按钮碰到最小尺寸后整行才出现溢出。按基础尺寸、收缩权重和项目下限分析这个过程，并与允许换行时先分线后逐线伸缩的计算顺序对比。
核心关键词flex-wrap nowrap 溢出 - 0025
Grid 容器没设高度，行轨道会怎么长？
文章卡片网格里，某张摘要变长会抬高所在行的轨道，但其他行未必同步等高。区分内容决定的容器高度与显式固定高度，并说明项目拉伸、跨行贡献和内容对齐分别在什么条件下影响视觉结果。
核心关键词CSS Grid 行轨道高度自适应内容 - 0026
Grid 的 fr 单位是怎样分配剩余宽度的？
用固定列加弹性列解释 Grid 怎样计算 fr：先扣掉固定轨道和间距，再按系数分配可用空间。还会说明内容的自动最小尺寸为什么可能撑开 1fr，以及如何用 minmax(0, 1fr) 处理长内容。
核心关键词CSS Grid fr单位分配剩余空间 - 0027
Grid 的 gap 是加在轨道之间，还是项目之间？
解释 Grid 中 gap 的真正位置：它位于相邻行轨或列轨之间，跨格项目内部不会再插入间距。通过显式与隐式轨道的例子，说明新增轨道为什么会多出一道 gap，以及 gap 与项目 margin 的区别。
核心关键词CSS Grid gap属性与隐式轨道空间 - 0028
Grid 固定列和 fr 列怎样计算可用宽度？
从容器内容盒、固定长度轨道与列间距出发，推导弹性列能拿到的空间。说明 px、百分比和 minmax 对计算的不同影响，并解释容器宽度不确定时百分比为何不能简单按视口宽度套算。
核心关键词CSS Grid 固定长度轨道与自由空间计算 - 0029
grid-auto-flow: column 时，隐式列怎样生成？
解释自动放置沿列推进时，超出已有显式轨道的项目如何促使 Grid 新建隐式列。结合固定行数的卡片排布，说明 grid-auto-columns 控制新增列宽，而容器缩放不会自行把既有项目改成新的响应式列数。
核心关键词CSS Grid 容器尺寸变化隐式轨道自适应 - 0030
Grid 的 min-content 尺寸为什么会影响整列？
从不可断开的内容入手解释 Grid 的 min-content 尺寸参与轨道下限计算。澄清“Grid Level 2 改进算法”不能被概括为所有内容都会自动收缩，具体布局还要看跨度、自动最小尺寸与溢出设置。
核心关键词CSS Grid 2 min-content尺寸算法改进 - 0031
网格轨道比容器小时，多余空间怎么分配？
说明当显式轨道总尺寸小于容器时，可用 justify-content 与 align-content 移动或分散整组轨道。对比 start、center、space-between 和 stretch，并解释 fr 轨道已吃掉自由空间时为什么看不出这些属性的效果。
核心关键词CSS Grid 网格小于容器时的空间对齐 - 0032
为什么只写 subgrid，却没设置 display: grid 时不会生效？
解释 subgrid 是网格项目在某个轴上继承父轨道的取值，前提是元素本身也是网格容器。结合卡片内部标题与按钮对齐的例子，说明 display: grid、跨轨道范围以及 align-self 的不同职责。并辨析拉伸对齐只是改变项目在单个网格区域内的位置，不等于让多张卡片共用一组行轨道。
核心关键词CSS Grid subgrid需设置display grid原因 - 0033
container-name 怎么避免组件查错容器？
说明未命名容器查询如何选择最近的合格祖先，以及 container-name 如何把查询限定到指定祖先。通过卡片嵌套在侧栏中的例子解释名称匹配、容器类型与局部组件复用。同时解释容器名称只筛选目标元素的祖先，不会跨页面查找同名元素，也不能单独开启尺寸查询。
核心关键词CSS container-name 命名容器 作用 - 0034
容器查询和媒体查询要同时满足，该怎么写？
通过外层 @media、内层 @container 的写法，解释视口条件与组件容器条件如何共同限制样式。说明查询作用对象、嵌套时的逻辑与、层叠顺序，以及为什么不能用一个条件代替另一个。示例展示宽视口里的窄侧栏卡片为什么仍应保持单栏，并说明两种条件命中后还会继续参与正常的 CSS 层叠。
核心关键词CSS container queries media queries combination - 0035
要让元素成为尺寸查询容器，container-type 该怎么设？
说明 container-type 的 normal、inline-size 与 size 有何区别，为什么尺寸查询需要限制被查询尺寸受后代影响，并用可复用卡片例子展示容器创建、后代查询和常见失效原因。同时说明查询规则作用于容器后代，以及为什么只给容器命名或把类型写在目标元素自身，都不能得到预期的宽度判断。
核心关键词CSS container-type 容器查询 设置方法 - 0036
容器查询和媒体查询分别解决什么问题？
通过同一张卡片在主栏与侧栏中宽度不同的例子解释容器查询的基准，比较媒体查询针对视口与容器查询针对祖先容器的职责，并说明尺寸查询的创建方式及适用场景。进一步说明如何创建尺寸容器、无名查询怎样寻找最近祖先，以及页面骨架和局部卡片分别适合交给哪种规则控制。
核心关键词CSS 容器查询 container queries 与媒体查询区别 - 0037
容器查询可以嵌套吗，cqw 到底参考哪一层？
解释 @container 嵌套时外层与内层条件都要成立，可能分别匹配不同祖先；再区分容器查询单位 cqw、cqi 的最近合格尺寸容器基准，提醒不要把规则命中的命名容器与单位换算基准混为一谈。通过区块与卡片两层容器展示嵌套条件的实际命中方式，并解释找不到尺寸容器时容器单位的回退结果。
核心关键词CSS container queries nesting resolution - 0038
容器查询不受支持时，组件该怎样回退？
给出容器查询的渐进增强写法：先提供可读的默认单栏，再在支持 @container 的环境中根据容器宽度升级布局。说明为什么无需硬记浏览器版本号，以及如何用真实目标浏览器测试功能与回退。还会区分尺寸查询和其他容器查询能力的兼容性，说明为什么桌面浏览器能用仍需要检查项目实际运行的内嵌浏览器。
核心关键词CSS 容器查询 浏览器支持 回退方案 - 0039
容器样式查询怎样根据自定义属性切换样式？
解释 @container style(--theme: dark) 读取祖先容器计算后的自定义属性，再给后代应用规则。说明继承、精确值匹配、无需尺寸容器以及普通 CSS 属性样式查询的实现限制。通过卡片主题状态展示样式查询的写法，并区分查询祖先当前样式与检测浏览器是否支持某条声明这两种问题。
核心关键词CSS style queries container queries - 0040
cqw 和 vw 各按谁的尺寸计算，组件该用哪个？
比较容器查询单位 cqw、cqh、cqi 与视口单位 vw、vh 的尺寸基准，说明嵌套组件为何更适合容器单位、找不到合格容器时怎样回退，以及容器过窄时如何防止字体和间距缩得过小。还会解释行内轴单位与物理宽度单位在竖排时的差别，以及如何限制字体和内边距在极端容器宽度下的变化。
核心关键词CSS container query units vs viewport units - 0041
响应式字号和间距该怎么搭配 rem、em 与视口单位？
rem 以根元素字号为基准，适合全站字号和间距尺度；em 以当前元素相关的字体尺寸为基准，适合组件内部跟随文字缩放；vw 等视口单位直接随视口变化。需要流体字号时可用 clamp() 给视口部分设上下限，避免小屏过小、大屏过大。
核心关键词响应式设计 rem 与 vw 单位配合使用