← 首页 / CSS 逻辑属性 · 把上下左右换成 block / inline 待审核 5 页

CSS 逻辑属性 · 把上下左右换成 block / inline

物理属性 margin-top、left、width 把方位与尺寸钉在屏幕坐标上;一旦界面要支持阿拉伯语(rtl)或竖排(vertical-rl),就得为镜像方向另写一套覆盖。逻辑属性(CSS Logical Properties)改用两条随书写方向旋转的轴:block 轴(行依次堆叠的方向)与 inline 轴(同一行内文字推进的方向),每条轴有 start / end 两端。于是 margin-top 变 margin-block-start、width 变 inline-size、left 变 inset-inline-start——一套写法在所有书写方向下都指向语义上正确的那一侧。

五页层层展开:先建立轴模型(谁映射到谁),再依次过盒模型(margin/padding/border)、定位(inset)、尺寸(inline-size/block-size)、文本与对齐(start/end 关键字)。每页都把逻辑属性设到真实元素上,再用 getComputedStyle 读回浏览器解析后的物理 longhand——映射不是查表背诵,而是当场实测。

快速定位: 先搞懂 block / inline 两轴怎么贴到物理四边 → 轴模型;间距与边框(含 border-block / border-inline 简写)→ 盒模型;绝对定位偏移 → 定位;宽高 → 尺寸;文字对齐与浮动的 start / end → 文本与对齐。 model · 轴模型

轴模型：从上下左右到 block / inline

逻辑坐标系的地基：block 轴 = 行堆叠方向，inline 轴 = 行内推进方向，各有 start / end 两端。改 writing-mode × direction，用罗盘看四条逻辑边当前各钉在哪条物理边，并附 3×2 全组合实测速查表。关键规律：block 轴只受 writing-mode,inline 轴还要再叠加 direction。

 box · 盒模型

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

margin-top → margin-block-start、border-left-width → border-inline-start-width，外加二值简写 margin-block / padding-inline / border-block。选属性、拖四条逻辑边，实测各自落到的物理 longhand。辨析一个常见坑：margin-inline 接受 start end 两个值，而 border-inline 简写只设「两端相同」的一条边框。

 inset · 定位

定位：inset 取代 top / right / bottom / left

绝对定位偏移的逻辑版：inset-block-start / inset-inline-start 等，简写 inset-block / inset-inline，以及语法同 margin 的 inset。只给两条 start 偏移，盒子锚在「block × inline 起始角」，翻转书写方向看这个角在物理四角间迁移——弹层 / 徽标钉「内容起始角」而非「左上角」。

 size · 尺寸

尺寸：inline-size / block-size 取代 width / height

inline-size 沿 inline 轴度量、block-size 沿 block 轴度量（含 min- / max-）。同一个 inline-size 值，横排是宽、竖排变高——尺寸只受 writing-mode 影响，与 direction 无关。max-inline-size: 60ch 约束的是「行长」而非屏幕宽度。

 flow · 文本与对齐

文本与对齐：start / end 与 inline 浮动

一批早于逻辑属性模块就接受流向关键字的属性：text-align: start | end、float: inline-start | inline-end、margin-inline: auto 居中、caption-side: inline-start。把逻辑与物理关键字并排，翻转 direction 时只有逻辑那侧镜像。并点明 Flexbox / Grid 的对齐生来就是逻辑的。

 何时仍用物理属性: 逻辑属性的价值在「相对书写方向」的场景(组件、排版、双向文本)。但当某个值确实绑定物理设备约束(如「不超过视口高度」用 max-height: 100dvh),继续用物理属性才正确。判断标准只有一句:这个值到底相对谁——相对文字流,用逻辑;相对屏幕,用物理。

相关链接

📐 规范 / 文档

  • 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 longhand 与简写、inline-size / block-size、流向关键字 start / end,以及与物理属性的对应表与浏览器兼容性。
  • MDN · writing-mode developer.mozilla.org 决定 block 轴朝向的属性:horizontal-tb / vertical-rl / vertical-lr 等取值的含义,以及它与 direction 共同确定 inline 轴方向的机制——本系列罗盘的两个输入。
  • Can I use · CSS Logical Properties caniuse.com margin-block / inline-size / inset-inline 等逻辑属性的实时浏览器支持矩阵。

📖 延伸阅读