北京
你很可能写过这样的 CSS：给侧边栏设置 margin-right: 1.5rem 来推开主内容，按钮用 padding-left: 1rem 防止文字贴边。粘性头部固定在视口左侧，导航指示器靠一条左边框来装饰。在英语、法语、德语这些从左向右书写的语言中，这一切毫无问题。
但如果页面切换到阿拉伯语、希伯来语或波斯语——文字从右向左流动——所有这些基于物理方向的“左”“右”值就全错了。侧边栏应该出现在右侧，按钮的内边距该放在右边，粘性元素应固定在右侧，导航指示器也该出现在右边。
常见的补救措施是写一个 [dir="rtl"] 选择器块，为从右向左文档把每个物理属性都镜像一份。这样一来，每个布局规则都要维护两套副本，它们会渐渐不一致，也容易被遗漏。CSS 逻辑属性在属性层面解决了这个问题，它不再依赖物理方向，而是以书写模式为准。
物理 CSS 映射到视口的四个方向：上、右、下、左。逻辑 CSS 则映射到书写模式，围绕两个轴展开：内联轴是文字流动的方向，英语中由左到右，阿拉伯语中由右到左；块轴是块级元素堆叠的方向，在大多数文字中从上向下。逻辑属性用 inline 表示内联方向，block 表示块方向。浏览器根据元素计算出的 writing-mode 和 direction，自动将逻辑属性解析为正确的物理方向。
具体映射上，外边距和内边距从熟悉的 margin-left、padding-top 变成了 margin-inline-start、padding-block-start。简写形式 margin-inline 和 padding-block 可以同时覆盖两端，而 margin-block: 1.5rem 0 则分别设置块首和块尾。
定位方面，inset-inline-start 取代了物理方向的 left，inset-block-start 取代 top，四值简写 inset 等价于同时设置上下左右。边框上，原来作为左侧装饰的 border-left 用 border-inline-start 代替。尺寸方面，inline-size 在水平书写时等于宽度，block-size 等于高度。
文本对齐是最容易被遗漏的改动。text-align: left 始终钉在物理左边缘；而 text-align: start 则对齐内联轴的起点。在英文界面中两者效果一致，可一旦在 元素上设置了 dir="rtl"，start 会自动右对齐，而物理左值依旧保持在左边缘，完全无视阅读方向。
以一个同时支持双向文本的侧边栏布局为例：旧写法需要完整的 [dir="rtl"] 覆盖块，先定义侧边栏宽度和右侧外边距，再在 RTL 选择器里把物理右外边距改成左外边距，文本对齐也得分别写两个方向的值。
换成逻辑属性后，只需要声明 inline-size 设定内联尺寸，margin-inline-end 留出间距，text-align: start 让浏览器决定何时靠左、何时靠右，不再需要任何额外的方向检测代码。一套规则即可覆盖所有语言，既省掉了维护成本，也避免了因两套样式不同步导致的布局错乱。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
