1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* 物理方向属性（传统）*/
.physical {
  margin-top: 10px;      /* 上边距，永远是上方 */
  margin-right: 20px;    /* 右边距，永远是右方 */
  margin-bottom: 15px;   /* 下边距，永远是下方 */
  margin-left: 25px;    /* 左边距，永远是左方 */
  padding-top: 10px;      /* 上内边距 */
  padding-right: 20px;    /* 右内边距 */
}

/* 逻辑方向属性（现代）*/
.logical {
  margin-block-start: 10px;   /* 块级方向开始边 */
  margin-block-end: 15px;     /* 块级方向结束边 */
  margin-inline-start: 25px; /* 行内方向开始边 */
  margin-inline-end: 20px;   /* 行内方向结束边 */
  padding-block-start: 10px;  /* 块级方向开始内边距 */
  padding-inline-start: 25px; /* 行内方向开始内边距 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/* 传统物理边距 */
.physical-margins {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 30px;
  margin-right: 30px;
}

/* 现代逻辑边距 */
.logical-margins {
  /* 块级方向边距（横排下就是上下边距）*/
  margin-block-start: 20px;    /* 块级开始边（横排 = 上边距）*/
  margin-block-end: 20px;      /* 块级结束边（横排 = 下边距）*/

  /* 行内方向边距（横排 LTR 下就是左右边距）*/
  margin-inline-start: 30px;   /* 行内开始边（横排 LTR = 左边距）*/
  margin-inline-end: 30px;     /* 行内结束边（横排 LTR = 右边距）*/
}

/* 或者用缩写 */
.abbr-logical {
  /* margin-block：依次给 block-start 和 block-end
     （横排下就是"上、下"，和左右无关！）*/
  margin-block: 20px 0;   /* 上 20px，下 0 */

  /* margin-inline：依次给 inline-start 和 inline-end
     （横排 LTR 下就是"左、右"）*/
  margin-inline: 0 30px;  /* 行内开始 0，行内结束 30px（LTR 下即 左 0、右 30px）*/

  /* 两个缩写都遵循"1~2 个值"的规则：
     写一个值 = 两端相同；写两个值 = 先 start 后 end，
     注意它没有物理 margin 那种"上右下左"四值写法 */
  margin-block: 10px;     /* 上 10px，下 10px */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* 传统物理内边距 */
.physical-padding {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 20px;
  padding-right: 20px;
}

/* 现代逻辑内边距 */
.logical-padding {
  /* 块级方向内边距 */
  padding-block-start: 16px;   /* 上内边距 */
  padding-block-end: 16px;     /* 下内边距 */

  /* 行内方向内边距 */
  padding-inline-start: 20px;  /* 左内边距 */
  padding-inline-end: 20px;    /* 右内边距 */
}

/* 或者用缩写 */
.abbr-padding {
  /* block 方向 */
  padding-block: 16px;  /* 上下 */

  /* inline 方向 */
  padding-inline: 20px;  /* 左右 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* 传统物理定位 */
.physical-position {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* 现代逻辑定位 */
.logical-position {
  position: absolute;
  inset-block-start: 0;   /* 上 */
  inset-block-end: 0;     /* 下 */
  inset-inline-start: 0;   /* 左 */
  inset-inline-end: 0;     /* 右 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* inset 缩写语法 */

/* 四个值：top right bottom left（顺时针）——纯物理方向 */
.inset-all {
  inset: 10px 20px 15px 25px;
  /* 等于 top: 10px; right: 20px; bottom: 15px; left: 25px; */
  /* ⚠️ 即使切换成 RTL，它也是"物理左/物理右"，不会跟着文字方向翻转 */
}

/* 两个值：top-bottom left-right */
.inset-two {
  inset: 10px 20px;
  /* 等于 top: 10px; bottom: 10px; left: 20px; right: 20px; */
}

/* 三个值：top left-right bottom */
.inset-three {
  inset: 10px 20px 15px;
  /* 等于 top: 10px; right: 20px; bottom: 15px; left: 20px;（left 默认等于 right）*/
}

/* 逻辑方向要用 inset-block / inset-inline
   它们只能写 1~2 个值：start 和 end */
.inset-logical {
  position: absolute;
  inset-block: 0;          /* 块级开始和结束都为 0（横排 = 上下贴边）*/
  inset-inline-start: 0;   /* 行内开始边为 0（横排 LTR = 左贴边；RTL 会自动变右）*/
  inset-inline: 0 40px;    /* 行内开始 0、行内结束 40px */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 物理尺寸 */
.physical-size {
  width: 300px;        /* 宽 */
  height: 200px;       /* 高 */
  max-width: 100%;
  min-height: 120px;
}

/* 逻辑尺寸 */
.logical-size {
  inline-size: 300px;  /* 行内方向尺寸：横排 = 宽；竖排 = 高 */
  block-size: 200px;   /* 块级方向尺寸：横排 = 高；竖排 = 宽 */
  max-inline-size: 100%;  /* 对应 max-width（横排）*/
  min-block-size: 120px;  /* 对应 min-height（横排）*/
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 传统物理溢出 */
.physical-overflow {
  overflow-x: hidden;  /* 水平溢出隐藏 */
  overflow-y: auto;    /* 垂直溢出滚动 */
}

/* 现代逻辑溢出 */
.logical-overflow {
  overflow-block: auto;     /* 块级方向溢出 */
  overflow-inline: hidden;   /* 行内方向溢出 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* 传统物理边框 */
.physical-border {
  border-top: 2px solid red;
  border-left: 2px solid blue;
}

/* 现代逻辑边框 */
.logical-border {
  border-block-start: 2px solid red;   /* 块级方向开始边（类似 border-top）*/
  border-inline-start: 2px solid blue; /* 行内方向开始边（类似 border-left，LTR 下同）*/
}

/* 逻辑边框的缩写：1~2 个值 = start / end */
.logical-border-abbr {
  border-block: 1px dashed #ccc;         /* 块级开始 + 块级结束两条边 */
  border-inline: 4px solid #3498db;      /* 行内开始 + 行内结束两条边 */
  border-inline-start: 3px solid red;    /* 只给行内开始边 */
}

/* 细分长属性也存在：
   border-block-start-width / -style / -color
   border-inline-end-width / -style / -color  ... 依此类推 */
.logical-border-parts {
  border-inline-start-width: 4px;
  border-inline-start-style: dashed;
  border-inline-start-color: #e74c3c;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 逻辑圆角：border-<块级端>-<行内端>-radius */
.logical-radius {
  border-start-start-radius: 12px;  /* 块级开始 + 行内开始 那个角（横排 LTR = 左上角）*/
  border-start-end-radius: 12px;    /* 块级开始 + 行内结束（横排 LTR = 右上角）*/
  border-end-start-radius: 12px;    /* 横排 LTR = 左下角 */
  border-end-end-radius: 12px;      /* 横排 LTR = 右下角 */
}

/* 对照物理写法 */
.physical-radius {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/* 1. 逻辑浮动 / 清除浮动（关键字，不是独立属性）*/
.float-start {
  float: inline-start;   /* LTR 下 = left；RTL 下自动变成 right */
}

.float-end {
  float: inline-end;
}

.clear-both {
  clear: both;           /* 还有 inline-start / inline-end 等关键字 */
}

/* 2. 文本对齐：start / end 永远"从文字开始的那一侧"开始 */
.text-align-logical {
  text-align: start;     /* 推荐：等价于 LTR 的 left、RTL 的 right */
  /* text-align: end;  */
}

/* 3. 表格标题放在哪一侧 */
.caption-start {
  caption-side: inline-start;  /* 表格标题跟随书写方向 */
}

/* 4. 滚动相关也有逻辑版本 */
.scroll-logical {
  scroll-margin-block-start: 24px;      /* 对应 scroll-margin-top（横排）*/
  overscroll-behavior-block: contain;   /* 对应 overscroll-behavior-y（横排）*/
}

/* 5. 尺寸相关的"百分比基准"也会跟着逻辑方向走 */
.resizable {
  resize: block;   /* 只允许在块级方向拉伸（横排 = 上下拉），还有 inline / both 等 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/* horizontal-tb：行内方向水平，块级方向从上到下（默认值，最常见）*/
.default-mode {
  writing-mode: horizontal-tb;
  /* 行内文字是横着的；一行结束后，下一行出现在下方 */
}

/* vertical-rl：垂直从右到左（日语竖排、传统中文）*/
.vertical-rl {
  writing-mode: vertical-rl;
  /* 行内方向竖直向下；一行（一列）结束后，下一列出现在左边
     → 所以整篇文章看起来是"从右往左"排列 */
}

/* vertical-lr：垂直从左到右（蒙古文等）*/
.vertical-lr {
  writing-mode: vertical-lr;
  /* 行内方向竖直向下；下一列出现在右边 → 看起来是"从左往右"排列 */
}

/* sideways-rl / sideways-lr：字形整体"躺倒"90° 的竖排 */
.sideways-rl {
  writing-mode: sideways-rl;
  /* 所有字形（包括本来是竖排的汉字）都朝右侧倒；
     适合"把一段横排内容整体转 90°"的场景，不适合正常的中文竖排 */
}

.sideways-lr {
  writing-mode: sideways-lr;
}

/* ⚠️ 下面这些是给 SVG 文档用的历史值，在 CSS 里已被废弃：
   lr / lr-tb / rl / rl-tb → 请改用 horizontal-tb
   tb / tb-lr              → 请改用 vertical-lr
   tb-rl                   → 请改用 vertical-rl  */

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

/* writing-mode 的两个重要特性 */

/* 1. 它是"继承属性"：写在容器上，里面所有后代都跟着变 */
.vertical-article {
  writing-mode: vertical-rl;   /* 下面整篇文章都变成竖排 */
}

/* 想让标题保持横排？在子元素上再改回来 */
.vertical-article h1 {
  writing-mode: horizontal-tb;
}

/* 2. 它不适用于表格的行/列（以及 ruby 注音容器）：
   table-row、table-column、table-row-group、table-column-group
   这些元素上的 writing-mode 不会生效 */

/* 3. 要改整份文档的书写模式，应该写在根元素上 */
html {
  writing-mode: vertical-rl;   /* 全站竖排（例如竖排小说站点）*/
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- 水平书写模式（默认）-->
<div class="default-mode">
  <p>这是水平书写的文字，从左往右读。</p>
</div>

<!-- 垂直书写模式 -->
<div class="vertical-rl">
  <p>这是垂直书写的文字，从上往下读。</p>
  <p>垂直模式下，文字流向是垂直的。</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* direction 属性 */

/* ltr：从左到右（Left-To-Right）*/
.ltr {
  direction: ltr;
  /* 用于英文、中文等从左到右的语言 */
}

/* rtl：从右到左（Right-To-Left）*/
.rtl {
  direction: rtl;
  /* 用于阿拉伯文、希伯来文等从右到左的语言 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* 阿拉伯语页面布局 */
.arabic-page {
  direction: rtl;  /* 文字从右到左 */
}

.arabic-page .logo {
  /* ✅ 用 start：LTR 下等于 left，RTL 下自动变成 right，
        不需要因为换语言再改一行 CSS */
  text-align: start;
}

.arabic-page .menu {
  /* 菜单项会从右往左排列 */
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

/* text-orientation 属性 */

/* mixed：默认值。各字符按自己语言的惯例摆
   中文、日文汉字保持"正着站"；拉丁字母/数字旋转 90° 躺着 */
.mixed-orientation {
  text-orientation: mixed;
}

/* upright：所有字符一律"正着站"，
   于是英文单词会变成一列竖着的字母（每个字母一个格）
   → 适合汉字、假名；不适合长英文单词 */
.upright-orientation {
  text-orientation: upright;
}

/* sideways：所有字符统一"躺倒"90°，并按横向排版
   （早期写法叫 sideways-right，已被 sideways 取代）*/
.sideways-orientation {
  text-orientation: sideways;
}

1
2
3
4
5
6
7
8

<div class="vertical-rl">
  <p class="mixed-orientation">
    英文 word 和中文混合
  </p>
  <p class="upright-orientation">
    所有文字都正向显示
  </p>
</div>