CSS如何设置盒模型的逻辑尺寸以支持垂直书写_应用logical-properties标准-css教程-PHP中文网

box-sizing 与 writing-mode 冲突表现为 width/height 语义反转却仍按物理轴计算尺寸，导致 padding/border 方向错位；应改用 inline-size/block-size 等逻辑属性配合 box-sizing: border-box 实现正确映射。

css如何设置盒模型的逻辑尺寸以支持垂直书写_应用logical-properties标准

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，无需手动换算。

示例：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.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;
  }
}