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

• 半行距的产生与裁剪原理
• text-box-edge 的 trim-both/cap/alphabetic 取值
• 按钮与标题垂直居中的工程收益

字体行盒在字形上方与下方包含半行距，导致按钮、标题等元素内的文本视觉上不垂直居中：文字与背景、边框间距不对称。text-box 用于裁剪该空间，text-box-edge 指定裁剪基准：cap 以上缘大写字母顶线为基准裁掉上方半行距，alphabetic 以基线为基准保留下行部分，trim-both 表示上下都裁。工程价值：按钮文字与背景精确垂直居中、标题与装饰线或图片基线对齐、排版网格行距可预测，避免依赖魔数微调；由于行盒高度变化会影响相邻元素与滚动高度，需整体评估布局影响。该特性仍在实验阶段，使用前需特性检测并保留近似回退。

考察文本排版的新裁剪能力：text-box 裁剪字形上下半行距、text-box-edge 指定裁剪基准，让按钮与标题视觉精确居中并稳定排版网格，需注意兼容性与布局影响。

• field-sizing: content 的行为
• textarea/input/select 的自适应场景
• 与 JS 方案的对比与降级

field-sizing: content 让表单控件尺寸由内容决定：textarea 随输入行数自动增高、select 随所选选项宽度调整、input 随文本宽度伸缩，无需 JS 监听输入事件，且支持 max-height 与 min-height 约束。相比传统 JS 方案（监听 input 事件后把高度设为 scrollHeight），原生方案更简洁、无事件开销、无时序抖动。边界与取舍：field-sizing 默认对部分控件生效，JS 方案兼容性更好、可控性更强，适合需要精细逻辑的场景。工程上可先特性检测，支持时用原生，否则保留 scrollHeight 回退。

考察表单控件自适应尺寸的新能力：field-sizing 让控件按内容伸缩、免去 JS 测量，但需特性检测降级；理解与 scrollHeight 方案的适用边界是表单工程要点，按场景选择。

• 传统无法过渡 auto 高度的原因
• interpolate-size 与 calc-size() 的机制
• @starting-style 定义入场起始样式

CSS 传统上不能对 auto 等内在尺寸插值，折叠面板只能瞬间开合或依赖 JS 测量。interpolate-size: allow-keywords 允许关键字尺寸参与插值，calc-size() 可在 calc 中引用 auto、min-content 等内在尺寸，实现 auto 高度展开收起。@starting-style 定义元素状态切换入场的起始样式，例如面板从隐藏变为显示时定义起始高度并过渡到实际尺寸。组合范式：容器开启 interpolate-size，面板用 calc-size 表达最终尺寸，@starting-style 提供入场起点，形成纯 CSS 折叠动画。

考察内在尺寸动画的三件套：interpolate-size 开放关键字插值、calc-size() 引用内在尺寸、@starting-style 提供入场起点，组合后可替代 JS 高度测量的折叠动画方案，注意兼容。

• box-sizing: border-box 全局化
• 逻辑属性与物理属性的映射
• RTL、纵向书写与第三方样式冲突治理

全局统一 box-sizing: border-box 让 width/height 包含 padding 与 border，避免内容盒加内边距超出预期的经典问题，栅格与组件尺寸更稳定。逻辑属性（margin-inline、inset-inline、inline-size）按书写方向而非物理方向定位，在 RTL 与纵向书写（writing-mode: vertical-rl）下自动镜像。治理第三方样式：全局 reset 设定盒模型基线后，第三方组件可能自带物理属性或覆盖 box-sizing，需用 @layer 或更高优先级分层管理，并把遗留物理属性改为逻辑属性。

考察盒模型治理的两大基线：border-box 全局化统一尺寸计算，逻辑属性适配 RTL 与纵向书写；结合层叠分层与 lint 规范可系统化处理第三方样式叠加，保证布局稳定。

• aspect-ratio 与单一确定尺寸推导另一维
• 占位防 CLS 的应用
• 与 width/height 属性及媒体固有尺寸的优先级

aspect-ratio 声明元素的宽高比，当只有一维被确定（width 或 height）时，浏览器按比例推导另一维：例如 400px 宽与 16/9 比例推导出高度，加载前即占据正确空间。图片与视频防 CLS 的标准做法：给 img/video 设置 width/height 属性（与资源宽高比一致）即可让浏览器预留比例空间。优先级：显式 width/height 属性约束优先，其次媒体固有尺寸，再其次 aspect-ratio 与自动尺寸推导。工程价值：占位空间稳定，图片加载完成不引起下方内容跳动，CLS 显著下降。

考察内在尺寸与比例占位机制：aspect-ratio 由单维推导另一维，width/height 属性预留空间防 CLS；理解其优先级才能在响应式图片场景正确组合，兼顾布局稳定。

• container-type/container-name 声明容器
• cqw/cqh/cqi 等容器单位
• 与媒体查询的分工与不支持时的降级

组件级响应式通过容器查询实现：在组件根设置 container-type: inline-size（或 size）声明其为查询容器，container-name 命名容器以便多容器区分；容器内子元素可用 cqw（容器宽度 1%）、cqh、cqi 等单位，让字号、间距随容器而非视口变化，实现同一组件在不同容器宽度下自适应。与媒体查询的分工：媒体查询面向视口或设备环境，适合全局布局断点；容器查询面向组件复用，适合卡片、侧栏、嵌入区等局部自适应，二者互补。降级：容器查询在旧浏览器不可用时回退到媒体查询或固定样式；容器尺寸未知（auto 高度）时不能做尺寸查询，需保证容器有确定尺寸。

考察容器查询的应用模型：container-type 声明查询容器、cqw 等单位按容器尺寸取值，与媒体查询按组件与视口分工，需处理不支持浏览器的降级，保证可用性。

• from-font 从首选字体读取度量
• x-height 对齐的机制
• 与防 CLS 的关系

font-size-adjust 的 from-font 取值让浏览器从当前 font-family 列表中第一个可用字体读取其度量（如 x-height 与字号比例），并据此自动调整后续回退字体的渲染尺寸，使回退字体与首选字体的视觉高度一致；而数值模式是手动指定 x-height 与字号的比例，不够自动化。当 Web 字体加载完成、font-family 首选项从回退字体变为 Web 字体时，若两者 x-height 差异大，文本行高与字号观感会突变，可能引发 CLS；from-font 模式在字体切换前后自动维持 x-height 一致，减小视觉跳动。

考察 from-font 的自动化度量对齐：按首选字体读取 x-height 自动缩放回退字体，避免字体交换时的高度跳变与 CLS，比手动数值模式更省心但需注意兼容与列表顺序。

• line-clamp 的标准化语法
• 与 -webkit-line-clamp 的兼容关系
• 省略号位置与 padding 边界问题

多行文本截断长期依赖 -webkit-line-clamp（配合 -webkit-box 与 overflow: hidden），虽被广泛支持但属非标准私有实现，且容器有 padding 时省略号会偏移或与文字重叠。CSS Overflow 4 将其标准化为 line-clamp 简写，可直接使用 line-clamp: 2 实现两行截断。兼容写法上 -webkit- 前缀仍有效，可同时声明；省略号与 padding 的边界问题在两种实现中都存在，实践中把 padding 放外层、内层做 clamp，并预留 min-height 空间。

考察多行截断的标准化演进：line-clamp 取代 -webkit-line-clamp 私有写法，但省略号与 padding 的边界问题仍要结构性规避，理解兼容写法是兼容性工程的关键，保证视觉一致。

• 裁剪后行内盒高度的重新计算
• 基线对齐与相邻元素
• 滚动容器高度与行间距的一致性

行内盒的度量由字体上升下降与 line-height 决定，line-height 大于字形自然高度时上下各分得半行距，造成文本上下留白。text-box 裁剪后，行内盒的有效高度按裁剪基准重新计算，行盒高度随之变化，元素实际占位小于 line-height 声明值。影响：相邻元素基线对齐更可控，标题、图标与相邻行的对齐更一致；滚动容器高度减小——多行文本容器高度更接近字形实际高度，滚动范围更精确，但行间距也相应减少，若行距过密需额外用 margin 或 line-height 补偿；行内对齐属性 vertical-align 的基准也随之变化。工程上需在裁剪文本的容器内统一设置。

考察 text-box 对行内盒度量的连锁影响：裁剪半行距会改变行盒高度，进而影响基线对齐与滚动容器高度；应用时需统一补偿行距并回归相邻布局，保证视觉一致，防止间距失衡。

• scrollbar-width 的 auto/thin/none
• scrollbar-color 的双色设置
• 与 WebKit 伪元素方案的取舍

scrollbar-width 控制滚动条宽度策略：auto 默认、thin 细滚动条、none 隐藏（内容仍可滚动）；scrollbar-color: thumb track 用两个颜色值设置滑块与轨道。::-webkit-scrollbar 系列伪元素提供更细粒度的自定义，但仅 WebKit/Blink 支持。取舍：以 scrollbar-width/scrollbar-color 为跨浏览器基线，需要精细视觉时再叠加 ::-webkit-scrollbar 并用 @supports 包裹；避免纯依赖 WebKit 导致 Firefox 无样式。

考察滚动条样式的标准化路径：scrollbar-width 与 scrollbar-color 是跨浏览器基础，::-webkit-scrollbar 提供精细自定义但仅限 WebKit/Blink，用特性检测包裹并配合 gutter 稳定布局。

• 数值/三角/指数函数的分类
• 极坐标转直角坐标绘制表盘
• 与 JS/canvas 的边界与性能

CSS Values 4 扩充了数学函数：round/mod/rem 做取整与取模，abs/sign 取绝对值与符号，sin/cos/tan/atan2 三角函数，pow/sqrt/hypot 幂与距离，log/exp 对数指数，均可用于 calc 表达式。纯 CSS 应用：时钟表盘用 sin/cos 把角度转成刻度坐标，波浪用 sin 生成起伏背景或路径，比例网格用 mod/round 计算对齐间距。工程边界：三角函数精度有限，复杂路径与物理模拟仍由 JS、SVG 或 canvas 更合适；数学函数在 calc 中嵌套过深影响可读性与性能；浏览器支持需检测，旧浏览器回退到预计算或 JS。

考察 CSS 数学函数的能力边界：三角与数值函数让表盘、波浪等纯 CSS 成为可能，但复杂图形与物理模拟仍需 JS 或 canvas，需注意精度、可读性与兼容降级，合理选用。

• position-area 定义初始方位
• @position-try 定义候选位置
• 回退顺序与碰撞检测

锚点定位中，position-area（inset-area）声明浮层相对锚点的方位，浏览器按此放置；当浮层超出视口或容器边界时，position-try-fallbacks 列出候选位置，浏览器按声明顺序依次尝试，直到找到不越界的方案：flip-block 与 flip-inline 是自动镜像候选（上下、左右翻转），@position-try 命名的自定义候选可精细调整（含尺寸、margin、对齐）。声明顺序即优先级：排在前面的候选先被尝试，满足不越界即采用，因此要把最期望的降级位置放前面。工程应用：tooltip、下拉菜单、弹层在视口边缘自动换向；注意支持仍在推进，需降级方案。

考察锚点浮层越界回退机制：position-area 定初始方位、position-try-fallbacks 按声明顺序尝试候选位置；理解顺序即优先级，才能设计出可靠的浮层换向策略，避免遮挡内容。

• ::details-content 定位内容区
• interpolate-size 实现高度过渡
• content-visibility 的渲染优化与协作

::details-content 是 details 内容区的伪元素，可针对展开区域设置样式与动画。实现展开动画：details[open] 时高度从 0 过渡到 auto，传统无法对 auto 插值，需容器声明 interpolate-size: allow-keywords，配合其过渡属性计算中间值，实现平滑开合。与 content-visibility 协作：对长内容设置 content-visibility: auto 可跳过屏外渲染并提供占位尺寸，但跳过渲染会影响高度动画测量，需在动画期间临时关闭或分层使用。

考察 details 动画的新基建：::details-content 定位内容区、interpolate-size 支持 auto 高度过渡、@starting-style 提供入场起点；与 content-visibility 协作时需注意渲染跳过对动画测量的影响。

• text-autospace 自动处理中西文间距
• text-spacing-trim 收紧标点
• 与 JS 后处理方案对比

中文排版中，中英文混排通常需要在汉字与拉丁字母、数字之间插入约四分之一 em 的间距，传统做法是用 pangu.js 等 JS 在文本中插入空格或处理 DOM，属于后处理且会污染文本内容（复制、搜索、翻译受影响）。text-autospace 让浏览器按书写规则自动在汉字与西文之间添加间距，无需改动文本；text-spacing-trim 用于收紧全角标点相邻时的多余间距，使标点排版符合 CJK 网格规范。边界：两项仍处于标准推进与实验支持阶段，生产环境需特性检测并保留 pangu.js 或正则后处理回退；自动间距基于字体与排版引擎，无法处理特殊品牌文案的精细控制。

考察 CJK 排版的浏览器原生方案：text-autospace 处理中西文自动间距、text-spacing-trim 收紧标点间距，取代 JS 后处理但支持未普及，需检测降级并防止间距叠加，按场景取舍。

• scripting 的 none/initial-only/enabled 取值
• 无 JS 环境的降级样式
• 与 noscript 方案的对比

@media (scripting) 反映当前文档脚本可用性：enabled 表示脚本可用；initial-only 表示页面初始加载时脚本不可用；none 表示脚本完全不可用。用途：无 JS 环境下，CSS 可据此降级——例如脚本驱动的折叠菜单在 scripting: none 时默认展开显示，避免内容不可达；依赖 JS 的控件样式在 enabled 时才应用。与 noscript 对比：noscript 只能插入静态 HTML 片段，而 scripting 媒体查询可在同一份样式表内按能力分支，颗粒度更细。工程上应把无 JS 也可用作为基线，再在 enabled 分支叠加增强样式。

考察脚本可用性的媒体查询：scripting 三值区分完全无脚本与初始无脚本，支持按能力分支降级样式，比 noscript 更细粒度，是无障碍渐进增强的基础，避免内容不可达。

• white-space 的拆解（collapse 与 wrap 模式）
• text-wrap-mode 的 wrap/nowrap
• text-wrap-style 的 balance/pretty 与边界

CSS Text 4 把传统 white-space 拆成两个独立属性：white-space-collapse 控制空白折叠，text-wrap-mode 控制换行模式（wrap/nowrap）。text-wrap-style 进一步控制换行质量：text-wrap: balance 让标题或短文本每行长度均衡，pretty 优化段落最后一行。协作边界：balance 只对有限行数的块文本有意义，对长正文有性能开销；pretty 主要改善段落级排版，二者不能同时使用；white-space-collapse: preserve 与 nowrap 组合时需注意内容溢出与可访问性。

考察空白与换行属性的拆解：white-space-collapse 管折叠、text-wrap-mode 管换行、text-wrap-style 管换行质量；理解分工才能精细控制标题均衡与段落排版的边界，兼顾性能与可访问性。

• classic 滚动条的占位特性
• overlay 滚动条悬浮不占位
• scrollbar-gutter: stable/auto 的差异

经典（classic）滚动条占据布局空间：内容溢出时出现、不溢出时消失，导致内容宽度变化引发布局抖动；overlay 滚动条悬浮在内容之上，不占用布局空间，因此不存在占位抖动，但可能与内容重叠、暗色下可见性差。scrollbar-gutter 提供跨平台的占位控制：auto 按平台默认（classic 显示时占位、overlay 不占位）；stable 无论是否溢出都预留滚动条宽度的沟槽，内容不因滚动条出现或消失而移位；stable both-edges 两侧对称预留，适合居中布局。工程注意：overlay 环境设置 stable 会无谓预留空间；预留沟槽可通过 margin 平衡视觉。

考察滚动条占位模型：classic 占位引发抖动、overlay 悬浮不占位、scrollbar-gutter 强制预留沟槽；理解三者的占位差异才能在稳定布局与空间利用间取舍，合理配置。

• @custom-media 的语法与作用
• 运行时可用性与静态编译的差异
• 与 Sass/PostCSS 生态的取舍

@custom-media 允许在 CSS 中定义媒体查询别名，定义后可直接在 @media 中使用，别名可在样式表间复用，是浏览器原生的媒体查询变量，处于 CSS Conditional 5 规范、实验性支持。与 Sass 变量对比：Sass 变量在编译期做文本替换，产物是展开后的媒体查询，修改别名需重新编译，且运行时无法动态改变；@custom-media 在浏览器中解析，可被 DevTools 识别。与 PostCSS 插件对比：插件在构建期展开别名，兼容性好、产物确定，但失去运行时语义；工程上常先用插件保证兼容，再在支持环境切换到原生。

考察媒体查询别名的原生方案：@custom-media 提供浏览器端别名复用，与 Sass 编译期替换、PostCSS 构建期展开在运行时能力与兼容性上各有取舍，需按工程选型。

• margin-trim 去除容器边缘的子项外边距
• block/inline 裁剪维度
• 提案状态与替代方案

列表或网格布局中，子项的外边距会在容器边缘造成不对称留白。margin-trim 让容器裁剪其边缘处子项的外边距：margin-trim: block 裁掉首个子项上边距与末个子项下边距，inline 裁掉行首与行尾边距，使子项间距均匀且首末项与容器边缘对齐，语义清晰。当前状态：该属性在规范中多次调整，主流浏览器支持有限，处于提案或实验阶段，生产环境不可依赖。应用边界与替代：暂可用 :first-child 与 :last-child 归零、gap 网格、负 margin 包裹层等成熟方案；margin-trim 适合统一组件间距规范，需特性检测并保留回退。

考察边缘外边距治理：margin-trim 让容器自动裁剪首末项外边距，解决列表与卡片布局边缘留白不对称；因浏览器支持有限，目前仍需用 gap、伪类归零等成熟方案回退，按需选用。

• baseline-source 的 auto/first/last
• 多行文本基线的对齐语义
• 图标与按钮对齐场景

多行文本或块级元素参与基线对齐时，浏览器默认使用其第一行的基线作为对齐基准；baseline-source 允许显式选择对齐基准行：auto 由浏览器决定，first 使用第一行基线，last 使用最后一行基线。典型应用：按钮与多行标题并排时可设置 baseline-source: last/first，对齐最后一行或第一行；图标与多行文本行内对齐也依赖该属性。配合 vertical-align: baseline 与 inline-block 布局，baseline-source 提供比整体盒子对齐更精确的排版控制。当前该属性处于 CSS Inline Layout 4，支持有限需特性检测。

考察基线对齐的精细控制：baseline-source 选择 first 或 last 行作为对齐基准，解决多行文本与按钮、图标等相邻元素的基线对齐问题，属实验性能力需检测支持，合理应用。

• slice 跨行共享装饰
• clone 每行独立渲染
• 高亮文本、行内徽章的工程应用

当 inline 元素（或分页、分栏中的块元素）被拆分成多行或多页时，box-decoration-break 决定其装饰（背景、边框、内边距、圆角、阴影）如何渲染：slice 为默认值，把装饰切片铺满整个元素矩形，跨行处背景连续但每行没有独立圆角，边框在断行处不闭合；clone 让每个片段独立渲染装饰，每行都有完整的背景、边框、圆角与 padding。典型应用：行内高亮标签（跨行时行首行尾圆角完整）、行内按钮或徽章（每行都有边框包裹）。工程注意：clone 会因每行都渲染背景与 padding 使视觉更厚重，需权衡行间距。

考察跨行装饰渲染的差异：slice 共享整块装饰、clone 每行独立绘制；理解其差异才能正确实现跨行高亮、行内徽章与打印分页的装饰效果，按场景选择，保证视觉一致。