使用 inline-size 和 block-size 替代传统的 width/height 或 min-width/min-height，即可实现跨书写模式（如横写 ltr/rtl 与竖写 tb-rl）的自适应盒模型。浏览器会根据当前元素的 writing-mode 自动将逻辑属性映射到物理尺寸：在默认横写模式下，inline-size 对应水平宽度，block-size 对应垂直高度；而在竖写模式下，两者方向互换，无需额外媒体查询或条件判断。
逻辑属性与传统物理属性的映射关系是什么
在 CSS 中，inline-size 和 block-size 是逻辑尺寸属性，它们不绑定于屏幕的物理坐标轴，而是绑定于文本流的逻辑方向。inline-size 始终沿着文本行的延伸方向（内联方向），而 block-size 始终沿着块级元素堆叠的方向（块方向）。这种映射机制确保了当书写模式改变时，布局容器能自动适应新的主轴方向。
/* 基础样式定义 */
.container {
writing-mode: vertical-rl; /* 模拟竖写模式 */
inline-size: 300px; /* 在竖写模式下，这控制的是高度 */
block-size: 500px; /* 在竖写模式下，这控制的是宽度 */
border: 2px solid blue;
}
上述代码展示了一个竖写模式下的容器。在默认的 horizontal-tb 模式下，inline-size 为 300px 表示宽度，block-size 为 500px 表示高度。但在 vertical-rl 模式下，inline-size 变为垂直方向的长度（即视觉上的高度），block-size 变为水平方向的长度（即视觉上的宽度）。这种动态映射消除了针对不同书写模式编写不同 CSS 规则的需求。
如何在实际布局中处理边界间距与对齐
除了尺寸属性，逻辑边距（如 margin-inline、margin-block）和对齐方式（如 justify-content、align-items）也遵循相同的映射逻辑。margin-inline 控制内联方向的间距，margin-block 控制块方向的间距。在 Flexbox 或 Grid 布局中，justify-content 沿内联方向排列项目，align-items 沿块方向排列项目。这种一致性使得复杂的多语言布局变得简单。
.flex-container {
display: flex;
writing-mode: vertical-lr;
inline-size: 400px;
block-size: 600px;
justify-content: space-between; /* 沿内联方向（垂直）分布 */
align-items: center; /* 沿块方向（水平）居中 */
}
在上面的 Flexbox 示例中，justify-content: space-between 会在垂直方向上均匀分布子元素，因为 vertical-lr 的内联方向是垂直的。而 align-items: center 则会在水平方向上居中对齐子元素。这种基于逻辑属性的布局方式，使得同一套 CSS 代码能够无缝适配横写和竖写两种截然不同的排版需求，极大地提高了样式的可维护性和跨平台兼容性。
当容器内容超出逻辑尺寸时会发生什么
当容器内的内容体积超过设定的 inline-size 或 block-size 时，浏览器的行为取决于 overflow 属性的设置。如果未设置 overflow，内容通常会溢出容器边界，可能导致布局破坏。若设置了 overflow: hidden，超出部分将被裁剪；若设置为 scroll，则会出现滚动条。重要的是，这些溢出行为也是基于逻辑尺寸的：在竖写模式下，水平方向的溢出由 block-size 限制，垂直方向的溢出由 inline-size 限制。
.scrollable-box {
writing-mode: vertical-rl;
inline-size: 200px;
block-size: 200px;
overflow: auto;
}
在上述代码中，如果内容在垂直方向（内联方向）上超过了 200px，或者在水平方向（块方向）上超过了 200px，滚动条将根据 overflow: auto 的设置出现。在竖写模式下，垂直滚动条通常出现在左侧或右侧（取决于书写模式的具体实现），而水平滚动条出现在顶部或底部。这种基于逻辑维度的溢出处理，确保了无论书写模式如何变化，开发者都能通过统一的属性名来控制内容的可见性与交互方式，避免了因物理坐标轴变化而导致的溢出计算错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
