必须将width/height替换为inline-size/block-size，并配套使用padding-inline/padding-block等逻辑属性，否则在vertical-rl或dir="rtl"下因物理属性语义锁定导致布局崩塌。
vertical-rl 或 dir="rtl" 下布局崩塌的必要操作。
width/height 必须替换成 inline-size/block-size
浏览器对 width 和 height 的解析永远绑定物理轴：哪怕写了 writing-mode: vertical-rl，width 仍算水平方向，height 仍算垂直方向——但此时“水平”视觉上是上下，“垂直”反而是左右。结果就是 padding-top 被加在物理左/右，而 box-sizing: border-box 还从 width 里扣减它，总高度远超预期。
-
width→inline-size（文字流方向的尺寸） -
height→block-size（垂直于文字流方向的尺寸） - 二者必须配套使用
padding-inline/padding-block，混用即失效 - Safari ≤15.6 中
inline-size+box-sizing: border-box会忽略border-inline，需用@supports (inline-size: 100px)降级 - 旧版 Edge（EdgeHTML）完全不支持
inline-size作为box-sizing基准，静默回退到width
margin/padding 必须用 inline-start/block-end 等逻辑方位
写 margin-left 在 dir="rtl" 下不会自动变成右，它永远钉左；而 margin-inline-start 才真正表示“内容起始侧”，LTR 下是左，RTL 下是右，vertical-rl 下则是顶部。
-
margin-left/margin-right→margin-inline-start/margin-inline-end -
margin-top/margin-bottom→margin-block-start/margin-block-end -
padding-inline是双值简写：padding-inline: 8px 12px=start8px +end12px；不支持三值或四值写法 - 若只需起始侧留白（如图标左侧），直接写
padding-inline-start更清晰，避免简写歧义 - 伪元素定位也得改：
right: 0在 RTL 下仍钉右，应换为inset-inline-end: 0
grid 和 flex 布局中逻辑属性容易被覆盖
grid-column-start: 1 是物理列号，固定不变；想按逻辑起点定位，必须写 grid-column-start: start。同理，flex-basis 是物理尺寸，inline-size 在 flex 容器里常被主轴覆盖，优先用 min-inline-size 或 flex-basis 配合逻辑单位。
-
justify-content: left→justify-content: start（随dir自动切换对齐基准） -
grid-template-areas字符串不自动翻转，别指望改字符串适配 RTL，靠justify-content或为[dir="rtl"]单独重定义区域 -
grid-auto-flow: row在vertical-rl下实际是从上到下填格子，不是从右到左；判断依据是getComputedStyle(el).writingMode，不是direction -
gap没有逻辑方向概念，它只是轨道间距，不能替代margin-inline-start
dir 属性不是装饰，是逻辑计算的触发开关
dir 不是“标记语言”，而是告诉浏览器这块内容的默认文本流方向，从而决定 margin-inline-start 映射到哪边、text-align: start 对齐哪一侧。它影响所有继承它的子元素，且 JS 动态修改后 CSS 会实时重算。
-
dir可写在、或任意块级元素上，子元素默认继承 - 常见错误：加了
dir="rtl"但样式没变，大概率是父容器没继承，或被padding-right这类物理属性覆盖 - 旧项目渐进改造可用
[dir="ltr"] .foo { margin-left: 8px; }+[dir="rtl"] .foo { margin-right: 8px; }过渡，但长期必须切逻辑属性 - 不要用 JS 检测
dir后动态切类名——无法响应运行时变更，且增加维护成本
margin 类而保留 width 和 padding-top，等于骨架没动，表皮换了也照样崩。逻辑属性不是“更现代”，是盒模型语义解耦的刚性要求。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
