← 首页 / CSS 逻辑属性 · Logical Properties 已审核 5 页

CSS 逻辑属性 · Logical Properties

物理属性如 margin-top、left、width，用固定的物理方向描述方位与尺寸，与书写模式无关。一旦界面要支持阿拉伯语（rtl）或竖排（vertical-rl），就得为镜像后的方向另写一套覆盖。

逻辑属性[logical properties]改用两条轴描述方位：block 轴（块级盒依次堆叠的方向）与 inline 轴（行内内容推进的方向），每条轴有 start / end 两端。轴的朝向由 writing-mode 决定，direction 再决定 inline 轴的哪一端是 start。于是在 horizontal-tb 与 ltr 下，margin-top 对应 margin-block-start、width 对应 inline-size、left 对应 inset-inline-start；换成其他书写模式，同一套声明自动落到语义相同的另一侧。

内容按属性族展开：先建立轴模型，明确逻辑边与物理边的映射，再依次过盒模型（margin / padding / border）、定位偏移（inset）、尺寸（inline-size / block-size）与文本与对齐（start / end 逻辑值）。每页都把逻辑属性设到真实元素上，再用 getComputedStyle 读回浏览器解析后的物理属性，以实测结果核验映射关系。

model · 轴模型

轴模型：从物理方向到 block / inline

block 轴与 inline 轴及其 start / end 两端。用 writing-mode × direction 的 3×2 组合实测逻辑边到物理边的映射。

 box · 盒模型

盒模型：margin / padding / border 的 block 与 inline

margin / padding / border 四条边的逻辑写法与轴向简写。辨析 margin-inline 与 border-inline 展开维度的不同。

 inset · 定位

定位：inset-block / inset-inline 与 inset

定位偏移的逻辑版 inset-block / inset-inline，以及物理简写 inset。含 inline 轴过约束的判定与 margin 为 auto 的分支。

 size · 尺寸

尺寸：inline-size 与 block-size

inline-size 与 block-size 沿轴度量（含 min- / max-）。轴向只由 writing-mode 决定，与 direction 无关。

 flow · 文本与对齐

文本与对齐：text-align / float 的逻辑值

不新增属性、只补充逻辑值的一类：text-align: start、float: inline-start。翻转 direction 时只有逻辑值镜像。另辨析 Flex / Grid 对齐关键字的三类界线。

 何时仍用物理属性。 逻辑属性适用于随书写模式变化的布局关系，如双向文本与竖排排版。当约束绑定的是物理方向本身（如「不超过视口高度」），应继续用 max-height: 100dvh；若该约束也应随书写模式转向，则连单位一起换成逻辑视口单位，写 max-block-size: 100dvb。判断依据是这个值描述的是书写方向，还是固定的物理方向与尺寸。

相关链接

📐 规范 / 文档

  • CSS Logical Properties and Values Module Level 1 drafts.csswg.org · CSSWG CSSWG Editor’s Draft：flow-relative 与 line-relative 两套坐标的定义、逻辑与物理的解析规则，以及各属性按元素 writing-mode / direction 求得物理边的精确算法。
  • MDN · CSS logical properties and values developer.mozilla.org 逻辑属性与值的总览：全部 -block / -inline 子属性与简写、inline-size / block-size、逻辑值 start / end, 以及与物理属性的对应表与浏览器兼容性。
  • MDN · writing-mode developer.mozilla.org 决定两条轴朝向的属性：horizontal-tb / vertical-rl / vertical-lr 等取值的含义，以及它与 direction 共同确定 inline 轴 start 端的机制——本系列映射关系的两个输入。
  • Can I use · CSS Logical Properties caniuse.com margin-block / inline-size / inset-inline 等逻辑属性的实时浏览器支持矩阵。

📖 延伸阅读