CSS 逻辑属性

为什么需要逻辑属性

传统的 CSS 属性（top、left、margin-left、width、height）使用的是物理方向——基于屏幕的绝对方向（上、右、下、左）。但在国际化应用中，文本的书写方向可能是从左到右（LTR）、从右到左（RTL）、甚至从上到下（垂直书写）。

逻辑属性使用逻辑方向（block-start、inline-end、block-size）替代物理方向，让同一个样式声明自动适配不同的书写模式和语言。

面试定位：逻辑属性是现代 CSS 国际化和无障碍功能的基础。面试官通过候选人对物理/逻辑属性区别的理解、以及在实际项目中的应用，问的是候选人的全局视野和工程判断能力。

物理属性 vs 逻辑属性

一一对应关系

简写属性

/* margin 的简写 */
margin-block: 10px 20px;     /* block-start: 10px, block-end: 20px */
margin-inline: auto;         /* inline-start: auto, inline-end: auto */

/* padding 的简写 */
padding-block: 1rem 2rem;    /* block-start: 1rem, block-end: 2rem */
padding-inline: 16px;        /* inline-start: 16px, inline-end: 16px */

/* border 的简写 */
border-block: 1px solid;     /* block-start + block-end */
border-inline: 2px dashed;  /* inline-start + inline-end */
border-block-start: 1px solid red;
border-inline-end: 2px dashed blue;

inset 简写

/* inset 相当于 top/right/bottom/left 的逻辑版本 */
.position {
  position: absolute;
  inset: 0;  /* top: 0; right: 0; bottom: 0; left: 0 */
}

/* 也可以单独指定方向 */
.position {
  inset-block: 10px;         /* top + bottom */
  inset-inline: 20px;        /* left + right */
}

/* 特定方向 */
.position {
  inset-block-start: 0;
  inset-block-end: auto;
}

writing-mode 书写模式

书写模式的值

.writing-mode {
  writing-mode: horizontal-tb;  /* 水平，从上到下（LTR/BTT 默认） */
  writing-mode: vertical-rl;   /* 垂直，从右到左 */
  writing-mode: vertical-lr;   /* 垂直，从左到右 */
  writing-mode: sideways-rl;   /* 垂直，文字侧向显示（实验性） */
  writing-mode: sideways-lr;   /* 垂直侧向（实验性） */
}

书写模式对尺寸的影响

/* 水平书写模式下 */
.element {
  inline-size: 200px;  /* 宽度 200px */
  block-size: 100px;   /* 高度 100px */
}

/* 垂直书写模式下（vertical-rl） */
.element-vertical {
  inline-size: 200px;  /* 沿行内轴，水平方向 */
  block-size: 100px;   /* 沿块轴，垂直方向 */
}

实际应用：多语言布局

/* RTL（阿拉伯语、希伯来语）布局 */
[dir="rtl"] {
  .card {
    /* 逻辑属性自动适配 */
    margin-inline-start: 16px; /* 在 RTL 中自动变成右边距 */
  }
}

/* 垂直书写（日语竖排） */
.vertical-text {
  writing-mode: vertical-rl;
  inline-size: 2em;   /* 每行的高度 */
  block-size: auto;    /* 高度自动（内容决定） */
}

border-radius 的逻辑版本

/* 物理版本 */
.radius-physical {
  border-radius: 8px 0 0 8px;  /* 左上、右上、右下、左下 */
}

/* 逻辑版本 */
.radius-logical {
  border-start-start-radius: 8px;  /* 块轴起始 + 行内轴起始 */
  border-start-end-radius: 8px;   /* 块轴起始 + 行内轴结束 */
  border-end-start-radius: 8px;    /* 块轴结束 + 行内轴起始 */
  border-end-end-radius: 8px;      /* 块轴结束 + 行内轴结束 */
}

实战：迁移到逻辑属性

从物理属性迁移

/* 物理属性 */
.physical {
  margin-top: 16px;
  margin-bottom: 16px;
  margin-left: 24px;
  margin-right: 24px;
  padding-top: 12px;
  padding-left: 16px;
  width: 300px;
  height: 200px;
}

/* 逻辑属性 */
.logical {
  margin-block: 16px;
  margin-inline: 24px;
  padding-block-start: 12px;
  padding-inline-start: 16px;
  inline-size: 300px;
  block-size: 200px;
}

双向文本处理

/* 使用 logical 属性 + direction 配合 */
.text-box {
  direction: ltr; /* 或 rtl */
  /* 文本对齐 */
  text-align: start; /* 替代 left/right */
}

面试高频问题

Q: 为什么需要逻辑属性？

回答要点：物理属性（top、left、margin-left）使用绝对方向，不适合多语言和不同书写方向的应用。逻辑属性（margin-block-start、margin-inline-end）使用相对方向，自动适配书写模式（writing-mode）和文本方向（direction）。这对 RTL 语言（阿拉伯语、希伯来语）支持和国际化应用至关重要。

Q: inline-size 和 width 有什么区别？

回答要点：在水平书写模式下，inline-size 等于 width；在垂直书写模式下，inline-size 等于 height。inline-size 是逻辑属性，随书写方向变化；width 是物理属性，始终是水平尺寸。

Q: writing-mode 的常用值有哪些？

回答要点：horizontal-tb（水平从上到下，默认）、vertical-rl（垂直从右到左，常用于中文竖排和日语）、vertical-lr（垂直从左到右）。sideways-rl 和 sideways-lr 是较新的值，让文字侧向显示。

延展阅读

• MDN — CSS Logical Properties
• MDN — writing-mode
• MDN — CSS Logical Properties and Values
• web.dev — CSS Logical Properties
• CSS Tricks — Logical CSS Properties
• W3C — CSS Logical Properties Module Level 1