父元素高度是 auto，为什么撑不开绝对定位的子元素？
height: auto 只根据参与普通流的内容决定父元素高度，绝对定位子元素不在其中，因此父盒可能包不住它。需要内容撑高时可改回普通流或用 Grid 叠放；确实必须测量浮层时，才考虑脚本同步父级尺寸。
核心关键词height auto 包含绝对定位子元素
面试知识索引 · 分类、标签与搜索
CSS · CSS Grid面试题，47 道完整答案
CSS · CSS Grid面试题第 1 页，显示第 1–47 题，共找到 47 道完整解析，可继续按分类、标签与关键词缩小范围。
47筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
卡片标题最多显示两行、超出打省略号，CSS 怎么写？
多行省略依赖纵向的旧版 WebKit 盒布局、行数限制和溢出裁剪共同作用，与单行的 text-overflow 不是同一套机制。内边距可能露出额外文字，构建工具也可能处理掉必要前缀；出现多一行或完全不截断时，要逐项检查这些声明。
核心关键词-webkit-line-clamp 多行文本省略 - 0003
first-line 伪元素能用在哪些元素上？
::first-line 选择块容器实际排版后的第一行文字，容器宽度变化、字体加载或内容改动都可能改变被选中的字符。它只支持部分文本相关属性，不适用于普通行内盒或 Flex、Grid 容器；不能把它当作固定的首句选择器。
核心关键词CSS ::first-line pseudo-element applicability - 0004
为什么 height 从 0 到 auto 不能做过渡？怎么实现平滑展开收起？
height 从 0 到 auto 通常缺少可直接插值的明确终点，展开面板需要选择替代策略。max-height 技巧会让时长随内容变化，Grid 行高方案依赖布局结构；支持 interpolate-size 的环境可直接处理固有尺寸，但仍要考虑兼容性。
核心关键词CSS transition height auto 平滑展开收起 - 0005
单行 flex 容器里 align-content 为什么不生效？
默认不换行的 Flex 容器只有一条 flex 行，align-content 没有可分配的行间空间，设置它通常看不到效果。单行子项的交叉轴位置由 align-items 控制；多行容器还需有多余的交叉轴空间才能体现行组对齐。
核心关键词align-content single line - 0006
flex-flow 的常见组合在移动端布局里怎么用？
移动端导航使用不同的方向与换行组合，会决定项目是水平换行还是纵向换列。结合固定高度、收缩因子和沟槽计算，说明默认单行布局为何仍可缩小，以及响应式卡片一行三列时如何准确扣除两道间距。
核心关键词flex-flow row column wrap - 0007
flex-direction 的 row 和 column 有什么区别？
flex-direction: row 让子项水平排列，column 让子项垂直排列。切换方向后 justify-content 和 align-items 管的方向也跟着翻转。column 下子项的宽度默认填满容器，高度由内容决定。
核心关键词flex-direction row column 主轴 - 0008
order 改了 Flex 项的显示顺序，键盘顺序也会变吗？
购买按钮用排序属性提前显示，视觉位置会改变，但 DOM、读屏和键盘焦点顺序不会跟着重排。结合相同排序值、换行时的项目分组和交互路径，判断哪些装饰性调整可以用排序属性，哪些必须调整源顺序。
核心关键词flex order accessibility - 0009
Grid 的 auto-fill 和 auto-fit 什么时候看出区别？
自适应卡片网格能容纳的列数多于卡片数时，保留空重复轨道与折叠空轨道会得到不同宽度。通过逐步减少卡片数量观察已有卡片是否拉宽，并说明重复轨道最小尺寸和容器宽度怎样决定差异是否显现。
核心关键词CSS Grid auto-fill与auto-fit区别 - 0010
Grid 自动放置会避开手动定位的项目吗？
总览卡片显式占据网格单元后，普通卡片由自动放置游标寻找剩余可用区域。区分完整自动定位、只指定一个轴及两个轴都写死的项目，解释跨列占位、密集回填和显式项目相互重叠的边界。
核心关键词CSS Grid 自动放置避开显式定位项目 - 0011
Grid 列宽用 1fr 和百分比，差别在哪里？
两列卡片加上沟槽后，两个百分比轨道可能直接超出容器，而两个弹性份额会参与剩余空间分配。用已知容器宽度手算两种轨道，再考虑长内容带来的自动最小尺寸，避免把弹性份额误认成固定百分比。
核心关键词CSS Grid fr单位与百分比轨道尺寸区别 - 0012
Grid 容器没设高度，行轨道会怎么长？
文章卡片网格里，某张摘要变长会抬高所在行的轨道，但其他行未必同步等高。区分内容决定的容器高度与显式固定高度，并说明项目拉伸、跨行贡献和内容对齐分别在什么条件下影响视觉结果。
核心关键词CSS Grid 行轨道高度自适应内容 - 0013
Grid 轨道的 fit-content() 和 auto 有什么区别？
详情页标签列需要随内容增长，又不希望无限挤压正文时，可比较自动轨道和带限制的内容适应轨道。通过短标签、长标签与不可断字符串观察上限和最小内容贡献的关系，说明轨道限制不等于强制裁剪内容。
核心关键词CSS Grid fit-content()与auto轨道区别 - 0014
Grid 的 fr 单位是怎样分配剩余宽度的？
用固定列加弹性列解释 Grid 怎样计算 fr：先扣掉固定轨道和间距，再按系数分配可用空间。还会说明内容的自动最小尺寸为什么可能撑开 1fr，以及如何用 minmax(0, 1fr) 处理长内容。
核心关键词CSS Grid fr单位分配剩余空间 - 0015
Grid 的 gap 是加在轨道之间，还是项目之间？
解释 Grid 中 gap 的真正位置：它位于相邻行轨或列轨之间，跨格项目内部不会再插入间距。通过显式与隐式轨道的例子，说明新增轨道为什么会多出一道 gap，以及 gap 与项目 margin 的区别。
核心关键词CSS Grid gap属性与隐式轨道空间 - 0016
grid-area 的四个位置参数分别指定什么？
拆解 grid-area 的四段式写法，按行起点、列起点、行终点、列终点定位项目，并解释数字网格线与命名区域的两种用法。还会区分 span 与终点线，避免把网格格子编号当成网格线编号。
核心关键词CSS Grid grid-area简写同时指定行列 - 0017
grid-auto-flow 的 row、column 和 dense 分别怎么排项目？
说明 Grid 自动放置项目时的扫描方向与回填规则。row 沿行推进，column 沿列推进，dense 会尝试回填早先留下的空位；同时指出视觉顺序可能和 DOM 顺序不同，避免把 dense 用在必须保持阅读顺序的界面。
核心关键词CSS Grid grid-auto-flow属性row column dense - 0018
写了 grid 简写后，为什么隐式轨道设置会失效？
解释 grid 是同时覆盖显式和隐式网格设置的简写属性。即使只写了行列模板，未写出的 grid-auto-rows、grid-auto-columns 与 grid-auto-flow 也会被重置；通过声明顺序例子说明如何避免响应式样式中的意外覆盖。
核心关键词CSS Grid grid简写重置隐式属性问题 - 0019
多个 Grid 项目能使用同一个命名区域吗？
命名网格区域是一组放置坐标，并不限制只能放一个项目。多个元素使用同一个 grid-area 会叠在一起，绘制顺序、z-index 和命中测试决定谁在上面；背景装饰、徽标覆盖等场景可借此省去额外定位。
核心关键词CSS Grid 多个项目引用同一命名区域 - 0020
命名区域和命名网格线有什么区别？
用页面主栏说明 grid-template-areas 与方括号命名线的关系：区域描述矩形，线描述边界；命名区域会自动生成名称带 start 和 end 的边界线。还会指出显式线名可能影响同名解析。
核心关键词CSS Grid grid-template-areas与命名网格线 - 0021
Grid 固定列和 fr 列怎样计算可用宽度？
从容器内容盒、固定长度轨道与列间距出发，推导弹性列能拿到的空间。说明 px、百分比和 minmax 对计算的不同影响，并解释容器宽度不确定时百分比为何不能简单按视口宽度套算。
核心关键词CSS Grid 固定长度轨道与自由空间计算 - 0022
grid-template 简写包括哪些属性，能写 subgrid 吗？
grid-template 组合显式行、列和命名区域，grid 简写还可能重置自动轨道相关设置。subgrid 用于子网格的行或列轨道列表，让子项沿父网格对应跨度对齐；它不是一个可单独铺在任意容器上的区域名。
核心关键词CSS Grid grid-template简写属性分解 - 0023
用 Grid 的命名区域怎样写圣杯布局？
页头、页脚、双侧栏和主内容可用 grid-template-areas 写成直观的区域矩阵，窄屏时再换成单列布局。主内容轨道要允许收缩，防止长文本撑开页面；视觉重排只改变位置，不改变 DOM 与键盘阅读顺序。
核心关键词CSS Grid grid-template-areas圣杯布局 - 0024
grid-auto-flow: column 时，隐式列怎样生成？
解释自动放置沿列推进时，超出已有显式轨道的项目如何促使 Grid 新建隐式列。结合固定行数的卡片排布，说明 grid-auto-columns 控制新增列宽，而容器缩放不会自行把既有项目改成新的响应式列数。
核心关键词CSS Grid 容器尺寸变化隐式轨道自适应 - 0025
Grid 的隐式轨道从哪里来，尺寸怎么控制？
说明显式模板之外的行列并非布局错误：自动放置项目、显式项目越过已有网格线都可能创建隐式轨道。用 grid-auto-rows 与 grid-auto-columns 控制新增轨道尺寸，并解释 auto、固定值和 minmax 的取舍。
核心关键词CSS Grid 隐式网格与grid-auto-rows设置 - 0026
Grid 的 min-content 尺寸为什么会影响整列？
从不可断开的内容入手解释 Grid 的 min-content 尺寸参与轨道下限计算。澄清“Grid Level 2 改进算法”不能被概括为所有内容都会自动收缩，具体布局还要看跨度、自动最小尺寸与溢出设置。
核心关键词CSS Grid 2 min-content尺寸算法改进 - 0027
网格项的 min-width: auto 为什么会撑宽列？
网格项的自动最小尺寸可能让单条 1fr 轨道无法缩窄，长文本或不可换行内容便把整列撑开。min-width: 0 与 minmax(0, 1fr) 分别作用于项目和轨道；即使列能收缩，内容本身仍可能需要换行、裁剪或滚动。
核心关键词CSS Grid 网格项min-width auto最小尺寸 - 0028
网格项超出轨道时，Grid 会把轨道撑大吗？
区分网格轨道扩张与项目内容溢出两个现象。自动或弹性轨道可能受项目最小贡献影响而扩大；固定尺寸轨道则不会仅因内容过宽就改变声明的宽度，内容可能覆盖邻格。文中给出逐层排查方法。
核心关键词CSS Grid 网格项超出轨道尺寸表现 - 0029
Grid 的 justify-items 和 align-items 默认怎么对齐？
justify-items 与 align-items 控制网格项目在各自区域中的行内轴、块轴对齐，通常默认表现为拉伸。图片等有固有尺寸或纵横比的项目可能不按预期拉满；start、center、baseline 处理的是项目本身，不能代替整组轨道的对齐属性。
核心关键词CSS Grid justify-items与align-items默认值 - 0030
Grid 网格线的 -1 从哪一边开始数？
解释负网格线编号从显式网格末端反向计数：-1 是终点线，-2 是倒数第二条线。通过跨全宽项目说明 grid-column: 1 / -1 的含义，并指出隐式轨道与书写方向会让视觉上的左右直觉失效。
核心关键词CSS Grid 网格线负索引用法 - 0031
Masonry 瀑布流和 subgrid 分别解决什么问题？
对比两种经常被混淆的 Grid 能力：瀑布流用堆叠算法填充高低不同的卡片，subgrid 让嵌套网格沿用父级轨道。说明普通 Grid 的 dense 不是瀑布流，并提醒原生 masonry 相关语法仍在演进，生产使用要查兼容性。
核心关键词CSS Grid masonry瀑布流与subgrid区别 - 0032
Grid 轨道的 min-content 和 max-content 有什么区别？
用可换行标题解释两种内容固有尺寸：min-content 尽量在允许处换行，max-content 尽量保留不软换行所需宽度。说明它们作为 Grid 轨道尺寸时如何受长词、图片与容器宽度影响，并给出与 minmax 组合的实际场景。
核心关键词CSS Grid min-content与max-content轨道尺寸 - 0033
minmax(auto, 1fr) 的 auto 最小值怎么算？
解释 minmax 中作为下限的 auto 会取轨道内网格项目的自动最小尺寸贡献，而不是无条件等于 0 或 min-content。通过长 URL 撑宽弹性列的场景，说明它与 minmax(0, 1fr) 的区别及内容溢出的后续处理。
核心关键词CSS Grid minmax() auto最小值与内容 - 0034
minmax(0, 1fr) 与 minmax(auto, 1fr) 差在哪？
比较两种常见弹性轨道写法的最小值差异。0 允许轨道缩到内容最小尺寸以下，auto 则可能保留项目的自动最小贡献；通过长文本解释轨道被撑开与内容越界是两个独立问题。
核心关键词CSS Grid minmax(0,1fr)与minmax(auto,1fr)区别 - 0035
子网格怎样使用父网格的命名线？
解释 grid-template-columns: subgrid 如何让嵌套网格沿用父项目跨过的列轨与命名线。说明子网格内部线号重新从自身范围计算，但继承的线名可直接引用；还可以在子网格上添加局部线名。
核心关键词CSS Grid subgrid继承父网格命名线 - 0036
网格轨道比容器小时，多余空间怎么分配？
说明当显式轨道总尺寸小于容器时，可用 justify-content 与 align-content 移动或分散整组轨道。对比 start、center、space-between 和 stretch，并解释 fr 轨道已吃掉自由空间时为什么看不出这些属性的效果。
核心关键词CSS Grid 网格小于容器时的空间对齐 - 0037
怎样用 Grid 把两个项目叠在同一个区域？
展示 Grid 的重叠布局：让图片、遮罩与标题使用相同的 grid-area 或相同网格线，就能占据同一块区域。说明重叠不改变 DOM 顺序，项目层级、指针事件和可访问性仍需明确处理。
核心关键词CSS Grid 网格区域实现重叠布局 - 0038
align-content、justify-content 和 place-content 怎么分工？
对比 Grid 容器的三种轨道组对齐属性：align-content 沿块轴，justify-content 沿行内轴，place-content 是两者的简写。解释它们只有在轨道组与容器间存在额外空间时才明显，并区分对齐轨道与对齐项目。
核心关键词CSS Grid align-content与justify-content轨道对齐 - 0039
Grid 项目设置 order 后，自动放置和阅读顺序会怎样？
Grid 自动放置会考虑 order 调整后的项目顺序，但屏幕位置变化不会改动 DOM、键盘焦点或辅助技术的阅读顺序。卡片装饰性重排可以这样处理；有操作步骤的表单或导航应让结构顺序本身合理，显式定位与自动放置混用时还要检查空位和重叠。
核心关键词CSS Grid order属性与自动放置顺序 - 0040
Grid 的 repeat() 怎样生成重复轨道，auto-fit 又有什么用？
用三列卡片解释 repeat() 的固定重复次数、轨道列表和 auto-fit 自适应写法，说明 minmax() 如何设定列的下限与剩余空间分配，并辨析 auto-fill 在空轨道上的差别。进一步比较固定列数与自动填充在卡片数量变化时的表现，说明什么时候会保留空列、什么时候会拉伸已有列。
核心关键词CSS Grid repeat()函数生成轨道模式 - 0041
Grid 能把页面内容顺序和视觉布局分开吗？
Grid 的网格线、区域命名与自动放置允许同一份 HTML 在宽窄屏中重新排布，例如文章与侧栏互换位置。视觉顺序不会改变 DOM 顺序，也不会自动改变读屏和键盘焦点路径；交互内容重排时必须检查阅读顺序是否仍合理。
核心关键词CSS Grid 内容与视觉布局解耦 - 0042
为什么只写 subgrid，却没设置 display: grid 时不会生效？
解释 subgrid 是网格项目在某个轴上继承父轨道的取值，前提是元素本身也是网格容器。结合卡片内部标题与按钮对齐的例子，说明 display: grid、跨轨道范围以及 align-self 的不同职责。并辨析拉伸对齐只是改变项目在单个网格区域内的位置，不等于让多张卡片共用一组行轨道。
核心关键词CSS Grid subgrid需设置display grid原因 - 0043
subgrid 和普通嵌套 Grid 在轨道对齐上差在哪？
比较子网格继承父级轨道与独立嵌套网格各自计算轨道的结果，解释为什么子网格适合跨卡片对齐标题和按钮，同时说明它受父级所占网格线范围、轴向与间距规则限制。通过长短标题不同的卡片对比两种轨道计算方式，并说明子网格的轴向、跨越范围与间距为什么会限制对齐效果。
核心关键词CSS Grid subgrid与嵌套grid对齐区别 - 0044
子网格里的项目怎么对准父网格的轨道？
解释子网格项目在父级跨越若干行列后，内部项目如何用局部网格线定位。通过跨三行卡片示例辨析 grid-row、span、父级线号与子网格本地线号，避免误以为子项可以直接定位到父网格任意轨道。还会解释三条轨道与四条网格线的关系，避免把父级线号直接照搬到子网格内部而定位错误。
核心关键词CSS Grid subgrid子项相对父轨道定位 - 0045
Grid 如何同时用行和列把元素放到指定位置？
说明 grid-row 与 grid-column 使用网格线定义起止位置，如何组合成二维区域，以及 span 的含义。通过主内容跨列示例解释显式定位、自动放置与项目重叠之间的关系。示例会把导航和正文放入不同的矩形区域，并说明显式定位冲突时项目可能重叠，以及断点变化时如何避免意外的隐式轨道。
核心关键词CSS Grid grid-row grid-column二维定位 - 0046
什么时候该用 Grid 的二维布局，而不是 Flexbox？
比较 Grid 同时管理行列与 Flexbox 主要沿主轴排列的能力，结合商品卡片和工具栏例子解释跨行对齐、轨道占位、换行后的尺寸关系以及两者组合使用的常见方式。还会解释 Flex 换行后各行独立计算空间的结果，帮助你按实际对齐需求选择布局，而不是只看界面上是否有多行。
核心关键词CSS Grid二维布局与flexbox一维布局区别 - 0047
Flexbox 和 Grid 里怎么用逻辑属性，真的有 gap-inline 吗？
Flexbox、Grid 的行列布局与文字书写轴是两套概念，逻辑边距按书写模式映射，gap、row-gap 和 column-gap 按布局结构产生间隔。列向 Flex 容器里，inline-size 也未必就是视觉上的宽；不存在可通用替代它们的 gap-inline 属性。
核心关键词CSS logical properties flex grid gap