现代 CSS 排版、盒模型与尺寸新特性

共 21 题
#

1. text-box 与 text-box-edge(leading-trim/text-box-trim 演进,trim-both/cap/alphabetic)在按钮、标题与排版网格中去掉字形上方/下方半行距的工程价值

A text-box-edge 指定裁剪基准,text-box 裁剪字形上下半行距,使按钮标题视觉居中 ✓ 正确答案
B text-box 用于增加文本行距
C text-box 只能裁剪下边距
D text-box 已被废弃
#

2. field-sizing: content 让 textarea/input/select 随内容自动伸缩,与 JS 计算 scrollHeight 自适应方案的对比

A field-sizing 只能用于 input[type=checkbox]
B field-sizing: content 让 textarea 等控件随内容自动伸缩 ✓ 正确答案
C JS scrollHeight 方案比原生方案更简洁
D field-sizing 无法配合 max-height
#

3. interpolate-size: allow-keywords 与 calc-size() 让 height/width 的 auto/min-content/max-content 等内在尺寸参与过渡,与 @starting-style 组合实现折叠面板/手风琴入场动画

A CSS 一直可以对 auto 高度平滑过渡
B calc-size() 只能用于 width
C @starting-style 用于设置字体样式
D interpolate-size: allow-keywords 与 calc-size() 使 auto 等内在尺寸可参与过渡,@starting-style 定义入场起始样式 ✓ 正确答案
#

4. box-sizing 全局统一与逻辑属性(margin-inline、inset-inline、inline-size)在 RTL 与纵向书写模式下的盒模型差异,及第三方样式叠加的治理

A 逻辑属性只能用于横向书写
B box-sizing 只影响 border 颜色
C 使用 border-box 后 padding 不再计入宽度
D 逻辑属性在 RTL 下会自动镜像,适配书写方向 ✓ 正确答案
#

5. aspect-ratio 内在尺寸计算对图片/视频占位与防 CLS 的工程价值,及与 width/height 属性约束的优先级

A 图片设置 width/height 属性或 aspect-ratio 可预留比例空间,显著降低 CLS ✓ 正确答案
B aspect-ratio 无法推导尺寸
C 设置 aspect-ratio 后两维都强制按比例
D width/height 属性在图片加载后才会生效
#

6. container-type/container-name 与 cqw 单位在组件级响应式的应用,及与媒体查询的分工与降级

A cqw 单位相对视口宽度
B 容器查询可以查询 auto 高度内容
C container-type 声明查询容器,cqw 等单位按容器尺寸计算,与媒体查询分工互补 ✓ 正确答案
D 使用容器查询后媒体查询完全失效
#

7. font-size-adjust: from-font 在多字体回退时按 x-height 保持视觉字号一致,避免换字体后的高度跳变与 CLS

A from-font 会忽略首选字体的度量
B from-font 模式所有浏览器都支持
C font-size-adjust 只影响行高不影响字号观感
D font-size-adjust: from-font 按首选字体度量自动调整回退字体视觉尺寸,减少换字体时的高度跳变 ✓ 正确答案
#

8. line-clamp(CSS Overflow 4 标准化)多行文本截断与旧 -webkit-line-clamp 的差异及省略号与 padding 的边界

A -webkit-line-clamp 已是标准语法
B 使用 line-clamp 后容器不能设置 padding
C line-clamp 只能截断单行
D line-clamp 是标准化的多行截断写法,需注意省略号与 padding 的边界问题 ✓ 正确答案
#

9. text-box 与 line-height 的关系,裁剪半行距后行内盒度量变化对相邻元素基线对齐与滚动容器高度的影响

A 裁剪半行距会改变行内盒高度,影响基线对齐与滚动容器高度,需要统一补偿行距 ✓ 正确答案
B text-box 裁剪后行盒高度不变
C text-box 只影响水平间距
D 裁剪后 vertical-align 不再起作用
#

10. scrollbar-width/scrollbar-color 标准化滚动条样式控制与 ::-webkit-scrollbar 的工程取舍

A ::-webkit-scrollbar 是跨浏览器标准方案
B scrollbar-width/scrollbar-color 是标准化基础,::-webkit-scrollbar 提供精细自定义但仅限 WebKit/Blink ✓ 正确答案
C scrollbar-color 只能设置滑块颜色
D scrollbar-width: none 会禁用滚动
#

11. CSS 数学函数(round/mod/rem/abs/sign/sin/cos/tan/atan2/pow/sqrt/hypot/log/exp)在时钟表盘、波浪、比例网格等纯 CSS 图形与间距计算的工程边界

A CSS 数学函数可以完美替代 canvas 绘制任意图形
B 数学函数不受浏览器兼容影响
C round/mod 只能用于颜色计算
D sin/cos 等数学函数可用于纯 CSS 表盘、波浪等场景,但复杂图形仍需 JS 或 canvas ✓ 正确答案
#

12. @position-try 与 position-area 结合,锚点定位浮层越界时的多位置回退与 position-try-fallbacks 声明顺序

A position-area 定义初始方位,position-try-fallbacks 按声明顺序尝试候选直到不越界 ✓ 正确答案
B position-try-fallbacks 的候选位置随机尝试
C flip-block 表示左右镜像
D 候选全部越界时浏览器会报错
#

13. ::details-content 伪元素配合 interpolate-size 实现 <details>/<summary> 展开收起动画,与 content-visibility 的协作

A ::details-content 只能设置颜色
B details 动画必须用 JavaScript 测量
C ::details-content 配合 interpolate-size 可实现 details 展开收起动画,与 content-visibility 协作需注意渲染跳过的影响 ✓ 正确答案
D interpolate-size 只影响字体
#

14. text-autospace(Baseline)与 text-spacing-trim(Chromium 推进中)在 CJK 中西文自动间距与标点收紧的原生排版价值,替代 pangu.js 后处理的边界

A text-autospace 在汉字与西文之间自动插入间距,text-spacing-trim 收紧标点间距 ✓ 正确答案
B text-autospace 会修改 DOM 文本内容
C 这两项属性在所有浏览器都已稳定支持
D text-spacing-trim 用于设置字体大小
#

15. @media (scripting) 媒体查询在无 JS 环境与降级场景的渐进增强判断

A scripting: none 表示脚本正在执行
B noscript 可以表达脚本不可用时的样式分支
C initial-only 表示脚本永远可用
D @media (scripting: none) 可针对完全无脚本环境提供降级样式 ✓ 正确答案
#

16. white-space-collapse 与 text-wrap-mode 对空白折叠与换行模式的精细控制,与 text-wrap: balance/pretty/nowrap 的协作边界

A white-space-collapse 控制空白折叠,text-wrap-mode 控制换行模式,text-wrap: balance 均衡标题行宽 ✓ 正确答案
B white-space-collapse 控制是否允许换行
C text-wrap: pretty 与 balance 可以同时生效
D nowrap 对长文本没有任何风险
#

17. scrollbar-gutter 预留滚动条空间避免布局抖动,与 overlay 滚动条及经典滚动条占位的差异

A overlay 滚动条也占用布局空间
B scrollbar-gutter 只影响滚动条颜色
C scrollbar-gutter: stable 无论是否溢出都预留沟槽,可避免 classic 滚动条出现或消失引发的抖动 ✓ 正确答案
D classic 滚动条从不占用空间
#

18. CSS @custom-media 自定义媒体查询别名(CSS Conditional 5,实验性)与 Sass 变量/PostCSS 插件的差异

A @custom-media 只能在编译期展开
B @custom-media 已完全替代 Sass 变量
C @custom-media 在浏览器中解析媒体查询别名,Sass/PostCSS 在构建期处理,兼容性不同 ✓ 正确答案
D @custom-media 只能用于打印媒体
#

19. margin-trim 在列表/卡片布局中去除首末项外边距的提案状态与应用边界

A margin-trim 已经全浏览器支持
B margin-trim 可裁剪容器边缘子项的外边距,解决列表首末项留白,但支持有限需回退 ✓ 正确答案
C margin-trim 用于裁剪元素自身边框
D margin-trim 与 gap 完全等价
#

20. baseline-source(CSS Inline Layout 4)控制 inline 元素基线与 first/last 行对齐的现代应用

A baseline-source 控制字体大小
B baseline-source 影响行高计算
C 基线对齐总是使用最后一行
D baseline-source 可指定用第一行或最后一行基线参与对齐,优化多行文本与相邻元素的对齐 ✓ 正确答案
#

21. box-decoration-break 的 slice/clone 对 inline 元素跨行背景、边框与内边距渲染的差异

A slice 模式下每行都有独立圆角
B 默认值是 clone
C box-decoration-break 只影响文字颜色
D box-decoration-break: clone 让每个跨行片段独立渲染背景与边框,适合行内高亮徽章 ✓ 正确答案