逻辑属性

前置依赖：先理解 003 盒模型的物理属性。

1. 逻辑属性概述#

逻辑属性根据书写模式（writing mode）自动适配方向，替代物理方向属性。

物理属性 vs 逻辑属性#

2. 简写属性#

/* margin */
margin-block: 10px 20px; /* block-start block-end */
margin-inline: 15px; /* inline-start = inline-end */
margin: 10px 15px; /* block inline */

/* padding */
padding-block: 1rem;
padding-inline: 2rem;

/* inset */
inset-block-start: 0;
inset-inline-start: 0;
inset: 0; /* 四个方向 */

/* size */
inline-size: 100%;
block-size: auto;

3. 边框与圆角#

border-block-start: 1px solid #ccc;
border-inline-end: 2px dashed #999;
border-start-start-radius: 8px; /* 行内起始 + 块起始 */
border-end-end-radius: 8px; /* 行内结束 + 块结束 */

4. 书写模式适配#

/* 水平书写模式（默认） */
.element {
  writing-mode: horizontal-tb;
}
/* margin-block-start = margin-top */

/* 垂直书写模式 */
.element {
  writing-mode: vertical-rl;
}
/* margin-block-start = margin-right */

5. 国际化支持#

/* 自动适配 RTL 语言 */
[dir='rtl'] .element {
  /* 无需额外样式 */
}

/* 使用逻辑属性后，RTL 自动适配 */
.element {
  margin-inline-start: 1rem; /* LTR: left, RTL: right */
  padding-inline-end: 2rem;
}

动手试试#

1. 用 margin-inline 代替 margin-left/right 改写一段布局；
2. 用 padding-block 控制上下内边距；
3. 给元素设置 writing-mode: vertical-rl，观察逻辑属性如何跟随方向；
4. 进阶挑战：做一个支持 RTL（阿拉伯语）的页面骨架。

核心知识点#

一句话记住逻辑属性：block 是书写方向（上下），inline 是行内方向（左右）；逻辑属性让样式自动适配 LTR/RTL 与竖排。

• 物理属性：margin-left、padding-top、width；
• 逻辑属性：margin-inline、padding-block、inline-size；
• block 轴随书写模式，inline 轴随行内方向；
• 配合 writing-mode/direction 自动翻转；
• 国际化页面优先逻辑属性。

注意事项与改进建议#

扩展学习#

• 排版：css/490-TypographyAndGridSystem；
• 国际化：html5/110-TextSemantic 的 bdi 与方向；
• 新特性：css/650-CSSNewFeatures。