inline-size 和 block-size 仅在 writing-mode 改变时才真正区别于 width/height；默认 horizontal-tb 下二者等价，vertical-rl 下 inline-size 控制高度方向、block-size 控制宽度方向；direction: rtl 单独使用不触发逻辑轴切换。
能替代，但必须配合 writing-mode 或 direction 使用，否则和 width/height 行为一致，毫无优势。
什么时候 inline-size 和 block-size 才真正起作用
它们只在书写模式（writing-mode）或文本流向（direction）改变时，才表现出与物理属性的本质差异。比如：
-
writing-mode: vertical-rl时，inline-size控制的是“高度方向”的尺寸（即原本height的物理方向），而block-size控制的是“宽度方向”（即原本width的物理方向） -
direction: rtl单独使用时，inline-size/block-size不会变化——因为direction不改变块/内联轴定义，只影响行内元素顺序和对齐；真正触发逻辑轴切换的是writing-mode - 默认
writing-mode: horizontal-tb下，inline-size ≡ width，block-size ≡ height，此时替换纯属冗余
inline-size 和 block-size 的取值限制与常见误用
它们支持的值类型和 width/height 基本一致，但有几点容易踩坑：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
%百分比基准不同：在vertical-rl下，inline-size: 50%是相对于父容器的 高度 而非宽度 -
auto行为依赖布局上下文：Flex/Grid 容器中，block-size: auto可能被拉伸或压缩，和height: auto表现不总等价 - 不支持
max-content/min-content在部分旧版 Safari 中（截至 2026 年初，Safari 17.4 已支持，但 iOS 16.x 仍存在 fallback 问题） - 不要混用：比如
width: 200px; inline-size: 100px同时存在时，inline-size会覆盖width（前提是writing-mode已激活逻辑轴）
实际迁移建议：从 width/height 到逻辑尺寸的三步检查
不是简单全局替换，而是按需重构。操作前确认以下三点：
立即学习“前端免费学习笔记（深入）”；
- 目标元素是否明确需要支持竖排（
vertical-rl）或多语言 RTL 混排？若只是常规网页，没必要动 - 父容器是否设置了
writing-mode？子元素的inline-size/block-size只响应自身或最近祖先的writing-mode，不是全局继承 - 是否已处理好盒模型兼容性？
box-sizing对逻辑属性同样生效，但border-inline/padding-block等配套逻辑属性必须同步改写，否则边框/内边距方向错位
最易被忽略的一点：逻辑尺寸属性本身不“驱动”书写模式切换——它们只是被动响应。想让 inline-size 发挥作用，你得先让 writing-mode 生效；而这个属性在某些 CSS-in-JS 库或框架样式重置中可能被意外覆盖或忽略。
