box-sizing 与 writing-mode 冲突表现为 width/height 语义反转却仍按物理轴计算尺寸，导致 padding/border 方向错位；应改用 inline-size/block-size 等逻辑属性配合 box-sizing: border-box 实现正确映射。
box-sizing 与 writing-mode 冲突时的实际表现
设置 writing-mode: vertical-rl 后，width 和 height 的语义会反转：原本控制水平方向的 width 实际影响垂直尺寸，height 反而控制水平方向。但 box-sizing 默认仍按物理轴（physical axes）计算 —— 即 border-box 中的 width 依然包含左右 padding 和左右 border，而垂直书写下“左右”已变成“上下”。这会导致尺寸预期完全错位。
例如：.card { width: 200px; padding: 10px; box-sizing: border-box; writing-mode: vertical-rl; }，你本意是让卡片“高度”（即文字流方向）为 200px，但浏览器仍把 padding: 10px 当作水平内边距处理，实际在垂直流中撑开的是上下方向，结果总尺寸远超 200px。
用 logical properties 替代物理属性定义盒模型尺寸
要真正匹配垂直书写逻辑，必须放弃 width/height、padding-left/padding-right 等物理属性，改用逻辑映射：
-
inline-size代替width（文字流方向的尺寸） -
block-size代替height（垂直于文字流的方向） -
padding-inline-start/padding-inline-end代替padding-left/padding-right -
padding-block-start/padding-block-end代替padding-top/padding-bottom -
border-inline/border-block系列用于边框
关键点：box-sizing 对 inline-size 和 block-size 同样生效，且此时的“包含关系”自动适配书写模式 —— box-sizing: border-box 下，inline-size 包含该方向的 padding-inline 和 border-inline，无需手动换算。
立即学习“前端免费学习笔记（深入）”；
示例：
.card {
inline-size: 200px;
block-size: 120px;
padding-inline: 16px;
padding-block: 12px;
border-inline: 2px solid #ccc;
border-block: 1px solid #eee;
box-sizing: border-box;
writing-mode: vertical-rl;
}
logical properties + border-box 的组合兼容性陷阱
并非所有浏览器对 inline-size/block-size 与 box-sizing 的联动都支持完善：
- Chrome 105+、Firefox 100+、Safari 16.4+ 支持完整行为
- Safari 15.6 及更早版本中，
inline-size设为border-box时可能忽略border-inline，导致实际尺寸偏小 - 部分旧版 Edge（基于 EdgeHTML）不支持
inline-size作为box-sizing的基准尺寸，回退到物理width
应对策略：用 @supports 检测并提供降级：
.card {
width: 200px;
height: 120px;
padding: 12px 16px;
border: 2px solid #ccc;
box-sizing: border-box;
}
@supports (inline-size: 100px) and (box-sizing: border-box) {
.card {
inline-size: 200px;
block-size: 120px;
padding-inline: 16px;
padding-block: 12px;
border-inline: 2px solid #ccc;
border-block: 1px solid #eee;
}
}
margin 不参与 box-sizing，但 logical margin 仍需对齐书写流
margin 本身不被 box-sizing 影响，但它在垂直书写中同样需要逻辑化表达，否则外边距方向会错乱：
- 错误写法：
margin-left: 20px→ 在vertical-rl下变成“向上推”，违背设计意图 - 正确写法：
margin-inline-start: 20px→ 始终对应内容起始侧（垂直时为顶部） -
margin-block控制垂直于文字流方向的外边距（即水平方向），适合控制行间距或卡片横向间隔
注意：margin 的逻辑属性不会改变其“不增加元素自身尺寸”的本质，但它决定了空白出现在哪一侧 —— 这直接影响布局对齐和相邻元素的相对位置，尤其在多语言混排或 RTL/vertical 切换场景中极易出错。
