space-between 和 space-around 怎么分主轴剩余空间？
三张定宽卡片排成一行时，先扣除卡片和固定沟槽，剩余空间才交给不同的分布方式。用具体间隔说明两端贴边与四周留白的差别，并解释项目变宽或没有正向余量时为什么看不到预期效果。
核心关键词justify-content space-between space-around
面试知识索引 · 分类、标签与搜索
CSS面试题，240 道完整答案
CSS面试题第 4 页，显示第 151–200 题，共找到 240 道完整解析，可继续按分类、标签与关键词缩小范围。
240筛选结果
52技术分类
178检索标签
5索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 4 页
本页面试问题
按稳定语义路径排序
- 0151
- 0152
Flex 的 main-start 和 main-end 由什么决定？
横向 Flex 导航切换到 RTL 或反向排列后，主轴起点不一定是物理左侧。依次检查方向、书写模式和反向值，确定主轴及交叉轴在屏幕上的位置，再解释为什么同一对齐声明会把项目推向不同的边。
核心关键词flex main-start main-end - 0153
Flex 项设 margin: auto，为什么能在两个方向居中？
单张空状态卡片四边自动外边距能够居中，是因为主轴和交叉轴都有可分配的正向余量。通过改变容器高度和项目数量，观察自动边距怎样分配空白，以及内容过大或没有明确高度时为什么会失效。
核心关键词flex margin auto center - 0154
Flex 项的 margin-left: auto 为什么能把它推到右边？
导航栏要把登录按钮与左侧链接分组，可让按钮前方的自动边距吸收剩余主轴空间。说明它比整行两端分散更适合单项推开，也说明多个自动边距会平分余量，以及横向方向改变时物理边距可能带来的问题。
核心关键词flex margin-left auto - 0155
纵向 Flex 布局里，子项为何设了滚动仍撑高容器？
固定页头下的长列表设为弹性增长，仍可能把页面整体撑长而不出现内部滚动。沿纵向 Flex 的祖先链检查高度约束和自动最小高度，找出应允许收缩的那一层，并把滚动交给真正的内容区域。
核心关键词min-height auto flex column - 0156
Flex 项默认的 min-width: auto 到底会算成多少？
代码预览区把侧栏挤出视口时，横向 Flex 项的自动最小宽度可能由不可断内容决定。对比普通段落与长代码的断行机会，分清项目盒无法收缩和内部内容越界，再按层级选择零最小宽度与局部滚动。
核心关键词min-width auto flex - 0157
怎样让 Flex 项缩到比内容还窄？min-width: 0 有什么代价？
标题盒设置零最小宽度后，盒子可以低于内容的自然宽度，长文字却仍可能画出边界。分别检查收缩因子、项目最小尺寸和内容显示规则，说明单行省略为什么还需要不换行、裁剪和溢出提示。
核心关键词min-width 0 flex 收缩 - 0158
Flex 里的文本为什么设置了省略号还会撑开容器？
评论长链接不出现省略号，可能是直接参与 Flex 的外层项目没有真正变窄，而非文本溢出规则失效。沿父子层级定位尺寸瓶颈，先让项目盒可收缩，再检查文本节点是否满足单行、省略和裁剪条件。
核心关键词flex text-overflow min-width - 0159
Flex 项缩不动时，怎样分辨是内容还是 min-width 限制？
两栏布局中的代码块越过视口，可能是右栏 Flex 项被自动最小宽度卡住，也可能只是代码在已缩小的盒子内溢出。利用开发工具逐层查看盒子边界，分别用零最小宽度和局部横向滚动解决两种不同现象。
核心关键词flex 溢出诊断 min-content min-width - 0160
Flex 项隐藏后还占位置吗？order 会怎样算？
导航项目隐藏后是否留下空位，由它是否继续生成 Flex 布局盒子决定。比较不生成盒子与只隐藏可见内容的两种方式，再结合排序属性说明视觉排列、文档节点和交互顺序之间的关系。
核心关键词flex display none visibility hidden order - 0161
flex-wrap: nowrap 下，项目总宽度超了会怎样？
手机页头限定单行时，搜索框可能先收缩，按钮碰到最小尺寸后整行才出现溢出。按基础尺寸、收缩权重和项目下限分析这个过程，并与允许换行时先分线后逐线伸缩的计算顺序对比。
核心关键词flex-wrap nowrap 溢出 - 0162
wrap-reverse 到底反转了 Flex 的什么方向？
多行标签启用反向换行，改变的是交叉轴上各条线出现的方向，不是每行项目的主轴顺序。通过固定容器宽高观察第二条线与对齐属性的变化，并区分它与反向主轴排列及 DOM 阅读顺序。
核心关键词flex-wrap wrap-reverse - 0163
中文竖排时，Flex 的主轴还一定是横向吗？
竖排书写模式下，横向名称的 Flex 行主轴可能落在屏幕竖直方向，列主轴则沿块方向。以竖排文字容器为例判断两条逻辑轴，再推导方向反转、主轴对齐和交叉轴对齐在物理屏幕上的表现。
核心关键词flex writing-mode 竖排 - 0164
Grid 的 auto-fill 和 auto-fit 什么时候看出区别？
自适应卡片网格能容纳的列数多于卡片数时，保留空重复轨道与折叠空轨道会得到不同宽度。通过逐步减少卡片数量观察已有卡片是否拉宽，并说明重复轨道最小尺寸和容器宽度怎样决定差异是否显现。
核心关键词CSS Grid auto-fill与auto-fit区别 - 0165
Grid 自动放置会避开手动定位的项目吗？
总览卡片显式占据网格单元后，普通卡片由自动放置游标寻找剩余可用区域。区分完整自动定位、只指定一个轴及两个轴都写死的项目，解释跨列占位、密集回填和显式项目相互重叠的边界。
核心关键词CSS Grid 自动放置避开显式定位项目 - 0166
Grid 列宽用 1fr 和百分比，差别在哪里？
两列卡片加上沟槽后，两个百分比轨道可能直接超出容器，而两个弹性份额会参与剩余空间分配。用已知容器宽度手算两种轨道，再考虑长内容带来的自动最小尺寸，避免把弹性份额误认成固定百分比。
核心关键词CSS Grid fr单位与百分比轨道尺寸区别 - 0167
Grid 容器没设高度，行轨道会怎么长？
文章卡片网格里，某张摘要变长会抬高所在行的轨道，但其他行未必同步等高。区分内容决定的容器高度与显式固定高度，并说明项目拉伸、跨行贡献和内容对齐分别在什么条件下影响视觉结果。
核心关键词CSS Grid 行轨道高度自适应内容 - 0168
Grid 轨道的 fit-content() 和 auto 有什么区别？
详情页标签列需要随内容增长，又不希望无限挤压正文时，可比较自动轨道和带限制的内容适应轨道。通过短标签、长标签与不可断字符串观察上限和最小内容贡献的关系，说明轨道限制不等于强制裁剪内容。
核心关键词CSS Grid fit-content()与auto轨道区别 - 0169
Grid 的 fr 单位是怎样分配剩余宽度的？
用固定列加弹性列解释 Grid 怎样计算 fr：先扣掉固定轨道和间距，再按系数分配可用空间。还会说明内容的自动最小尺寸为什么可能撑开 1fr，以及如何用 minmax(0, 1fr) 处理长内容。
核心关键词CSS Grid fr单位分配剩余空间 - 0170
Grid 的 gap 是加在轨道之间，还是项目之间？
解释 Grid 中 gap 的真正位置：它位于相邻行轨或列轨之间，跨格项目内部不会再插入间距。通过显式与隐式轨道的例子，说明新增轨道为什么会多出一道 gap，以及 gap 与项目 margin 的区别。
核心关键词CSS Grid gap属性与隐式轨道空间 - 0171
grid-area 的四个位置参数分别指定什么？
拆解 grid-area 的四段式写法，按行起点、列起点、行终点、列终点定位项目，并解释数字网格线与命名区域的两种用法。还会区分 span 与终点线，避免把网格格子编号当成网格线编号。
核心关键词CSS Grid grid-area简写同时指定行列 - 0172
grid-auto-flow 的 row、column 和 dense 分别怎么排项目？
说明 Grid 自动放置项目时的扫描方向与回填规则。row 沿行推进，column 沿列推进，dense 会尝试回填早先留下的空位；同时指出视觉顺序可能和 DOM 顺序不同，避免把 dense 用在必须保持阅读顺序的界面。
核心关键词CSS Grid grid-auto-flow属性row column dense - 0173
写了 grid 简写后，为什么隐式轨道设置会失效？
解释 grid 是同时覆盖显式和隐式网格设置的简写属性。即使只写了行列模板，未写出的 grid-auto-rows、grid-auto-columns 与 grid-auto-flow 也会被重置；通过声明顺序例子说明如何避免响应式样式中的意外覆盖。
核心关键词CSS Grid grid简写重置隐式属性问题 - 0174
多个 Grid 项目能使用同一个命名区域吗？
命名网格区域是一组放置坐标，并不限制只能放一个项目。多个元素使用同一个 grid-area 会叠在一起，绘制顺序、z-index 和命中测试决定谁在上面；背景装饰、徽标覆盖等场景可借此省去额外定位。
核心关键词CSS Grid 多个项目引用同一命名区域 - 0175
命名区域和命名网格线有什么区别？
用页面主栏说明 grid-template-areas 与方括号命名线的关系：区域描述矩形，线描述边界；命名区域会自动生成名称带 start 和 end 的边界线。还会指出显式线名可能影响同名解析。
核心关键词CSS Grid grid-template-areas与命名网格线 - 0176
Grid 固定列和 fr 列怎样计算可用宽度？
从容器内容盒、固定长度轨道与列间距出发，推导弹性列能拿到的空间。说明 px、百分比和 minmax 对计算的不同影响，并解释容器宽度不确定时百分比为何不能简单按视口宽度套算。
核心关键词CSS Grid 固定长度轨道与自由空间计算 - 0177
grid-template 简写包括哪些属性，能写 subgrid 吗？
grid-template 组合显式行、列和命名区域，grid 简写还可能重置自动轨道相关设置。subgrid 用于子网格的行或列轨道列表，让子项沿父网格对应跨度对齐；它不是一个可单独铺在任意容器上的区域名。
核心关键词CSS Grid grid-template简写属性分解 - 0178
用 Grid 的命名区域怎样写圣杯布局？
页头、页脚、双侧栏和主内容可用 grid-template-areas 写成直观的区域矩阵，窄屏时再换成单列布局。主内容轨道要允许收缩，防止长文本撑开页面；视觉重排只改变位置，不改变 DOM 与键盘阅读顺序。
核心关键词CSS Grid grid-template-areas圣杯布局 - 0179
grid-auto-flow: column 时，隐式列怎样生成？
解释自动放置沿列推进时，超出已有显式轨道的项目如何促使 Grid 新建隐式列。结合固定行数的卡片排布，说明 grid-auto-columns 控制新增列宽，而容器缩放不会自行把既有项目改成新的响应式列数。
核心关键词CSS Grid 容器尺寸变化隐式轨道自适应 - 0180
Grid 的隐式轨道从哪里来，尺寸怎么控制？
说明显式模板之外的行列并非布局错误：自动放置项目、显式项目越过已有网格线都可能创建隐式轨道。用 grid-auto-rows 与 grid-auto-columns 控制新增轨道尺寸，并解释 auto、固定值和 minmax 的取舍。
核心关键词CSS Grid 隐式网格与grid-auto-rows设置 - 0181
Grid 的 min-content 尺寸为什么会影响整列？
从不可断开的内容入手解释 Grid 的 min-content 尺寸参与轨道下限计算。澄清“Grid Level 2 改进算法”不能被概括为所有内容都会自动收缩，具体布局还要看跨度、自动最小尺寸与溢出设置。
核心关键词CSS Grid 2 min-content尺寸算法改进 - 0182
网格项的 min-width: auto 为什么会撑宽列？
网格项的自动最小尺寸可能让单条 1fr 轨道无法缩窄，长文本或不可换行内容便把整列撑开。min-width: 0 与 minmax(0, 1fr) 分别作用于项目和轨道；即使列能收缩，内容本身仍可能需要换行、裁剪或滚动。
核心关键词CSS Grid 网格项min-width auto最小尺寸 - 0183
网格项超出轨道时，Grid 会把轨道撑大吗？
区分网格轨道扩张与项目内容溢出两个现象。自动或弹性轨道可能受项目最小贡献影响而扩大；固定尺寸轨道则不会仅因内容过宽就改变声明的宽度，内容可能覆盖邻格。文中给出逐层排查方法。
核心关键词CSS Grid 网格项超出轨道尺寸表现 - 0184
Grid 的 justify-items 和 align-items 默认怎么对齐？
justify-items 与 align-items 控制网格项目在各自区域中的行内轴、块轴对齐，通常默认表现为拉伸。图片等有固有尺寸或纵横比的项目可能不按预期拉满；start、center、baseline 处理的是项目本身，不能代替整组轨道的对齐属性。
核心关键词CSS Grid justify-items与align-items默认值 - 0185
Grid 网格线的 -1 从哪一边开始数？
解释负网格线编号从显式网格末端反向计数：-1 是终点线，-2 是倒数第二条线。通过跨全宽项目说明 grid-column: 1 / -1 的含义，并指出隐式轨道与书写方向会让视觉上的左右直觉失效。
核心关键词CSS Grid 网格线负索引用法 - 0186
Masonry 瀑布流和 subgrid 分别解决什么问题？
对比两种经常被混淆的 Grid 能力：瀑布流用堆叠算法填充高低不同的卡片，subgrid 让嵌套网格沿用父级轨道。说明普通 Grid 的 dense 不是瀑布流，并提醒原生 masonry 相关语法仍在演进，生产使用要查兼容性。
核心关键词CSS Grid masonry瀑布流与subgrid区别 - 0187
Grid 轨道的 min-content 和 max-content 有什么区别？
用可换行标题解释两种内容固有尺寸：min-content 尽量在允许处换行，max-content 尽量保留不软换行所需宽度。说明它们作为 Grid 轨道尺寸时如何受长词、图片与容器宽度影响，并给出与 minmax 组合的实际场景。
核心关键词CSS Grid min-content与max-content轨道尺寸 - 0188
minmax(auto, 1fr) 的 auto 最小值怎么算？
解释 minmax 中作为下限的 auto 会取轨道内网格项目的自动最小尺寸贡献，而不是无条件等于 0 或 min-content。通过长 URL 撑宽弹性列的场景，说明它与 minmax(0, 1fr) 的区别及内容溢出的后续处理。
核心关键词CSS Grid minmax() auto最小值与内容 - 0189
minmax(0, 1fr) 与 minmax(auto, 1fr) 差在哪？
比较两种常见弹性轨道写法的最小值差异。0 允许轨道缩到内容最小尺寸以下，auto 则可能保留项目的自动最小贡献；通过长文本解释轨道被撑开与内容越界是两个独立问题。
核心关键词CSS Grid minmax(0,1fr)与minmax(auto,1fr)区别 - 0190
子网格怎样使用父网格的命名线？
解释 grid-template-columns: subgrid 如何让嵌套网格沿用父项目跨过的列轨与命名线。说明子网格内部线号重新从自身范围计算，但继承的线名可直接引用；还可以在子网格上添加局部线名。
核心关键词CSS Grid subgrid继承父网格命名线 - 0191
网格轨道比容器小时，多余空间怎么分配？
说明当显式轨道总尺寸小于容器时，可用 justify-content 与 align-content 移动或分散整组轨道。对比 start、center、space-between 和 stretch，并解释 fr 轨道已吃掉自由空间时为什么看不出这些属性的效果。
核心关键词CSS Grid 网格小于容器时的空间对齐 - 0192
怎样用 Grid 把两个项目叠在同一个区域？
展示 Grid 的重叠布局：让图片、遮罩与标题使用相同的 grid-area 或相同网格线，就能占据同一块区域。说明重叠不改变 DOM 顺序，项目层级、指针事件和可访问性仍需明确处理。
核心关键词CSS Grid 网格区域实现重叠布局 - 0193
align-content、justify-content 和 place-content 怎么分工？
对比 Grid 容器的三种轨道组对齐属性：align-content 沿块轴，justify-content 沿行内轴，place-content 是两者的简写。解释它们只有在轨道组与容器间存在额外空间时才明显，并区分对齐轨道与对齐项目。
核心关键词CSS Grid align-content与justify-content轨道对齐 - 0194
Grid 项目设置 order 后，自动放置和阅读顺序会怎样？
Grid 自动放置会考虑 order 调整后的项目顺序，但屏幕位置变化不会改动 DOM、键盘焦点或辅助技术的阅读顺序。卡片装饰性重排可以这样处理；有操作步骤的表单或导航应让结构顺序本身合理，显式定位与自动放置混用时还要检查空位和重叠。
核心关键词CSS Grid order属性与自动放置顺序 - 0195
Grid 的 repeat() 怎样生成重复轨道，auto-fit 又有什么用？
用三列卡片解释 repeat() 的固定重复次数、轨道列表和 auto-fit 自适应写法，说明 minmax() 如何设定列的下限与剩余空间分配，并辨析 auto-fill 在空轨道上的差别。进一步比较固定列数与自动填充在卡片数量变化时的表现，说明什么时候会保留空列、什么时候会拉伸已有列。
核心关键词CSS Grid repeat()函数生成轨道模式 - 0196
Grid 能把页面内容顺序和视觉布局分开吗？
Grid 的网格线、区域命名与自动放置允许同一份 HTML 在宽窄屏中重新排布，例如文章与侧栏互换位置。视觉顺序不会改变 DOM 顺序，也不会自动改变读屏和键盘焦点路径；交互内容重排时必须检查阅读顺序是否仍合理。
核心关键词CSS Grid 内容与视觉布局解耦 - 0197
为什么只写 subgrid，却没设置 display: grid 时不会生效？
解释 subgrid 是网格项目在某个轴上继承父轨道的取值，前提是元素本身也是网格容器。结合卡片内部标题与按钮对齐的例子，说明 display: grid、跨轨道范围以及 align-self 的不同职责。并辨析拉伸对齐只是改变项目在单个网格区域内的位置，不等于让多张卡片共用一组行轨道。
核心关键词CSS Grid subgrid需设置display grid原因 - 0198
subgrid 和普通嵌套 Grid 在轨道对齐上差在哪？
比较子网格继承父级轨道与独立嵌套网格各自计算轨道的结果，解释为什么子网格适合跨卡片对齐标题和按钮，同时说明它受父级所占网格线范围、轴向与间距规则限制。通过长短标题不同的卡片对比两种轨道计算方式，并说明子网格的轴向、跨越范围与间距为什么会限制对齐效果。
核心关键词CSS Grid subgrid与嵌套grid对齐区别 - 0199
子网格里的项目怎么对准父网格的轨道？
解释子网格项目在父级跨越若干行列后，内部项目如何用局部网格线定位。通过跨三行卡片示例辨析 grid-row、span、父级线号与子网格本地线号，避免误以为子项可以直接定位到父网格任意轨道。还会解释三条轨道与四条网格线的关系，避免把父级线号直接照搬到子网格内部而定位错误。
核心关键词CSS Grid subgrid子项相对父轨道定位 - 0200
Grid 如何同时用行和列把元素放到指定位置？
说明 grid-row 与 grid-column 使用网格线定义起止位置，如何组合成二维区域，以及 span 的含义。通过主内容跨列示例解释显式定位、自动放置与项目重叠之间的关系。示例会把导航和正文放入不同的矩形区域，并说明显式定位冲突时项目可能重叠，以及断点变化时如何避免意外的隐式轨道。
核心关键词CSS Grid grid-row grid-column二维定位