处理不同方向的文本是一个重要且复杂的任务，尤其是在多语言支持和跨文化网站设计中尤为重要。CSS（层叠样式表）为我们提供了强大的工具来处理不同的书写模式和布局方向。接下来我们来继续探讨关于 CSS 中的书写模式、块级布局和内联布局、方向、逻辑属性和逻辑值，以及如何使用这些工具来有效地管理文本的显示。
一、什么是书写模式
书写模式（writing modes）是指文本在页面上书写和排版的方向。不同的书写模式适用于不同的语言和书写系统。CSS 提供了灵活的书写模式设置，以适应不同的排版需求。常见的书写模式包括：
- 水平书写模式（Horizontal Writing Mode）：文本从左到右或从右到左排列，常用于拉丁字母、阿拉伯字母等语言。
- 垂直书写模式（Vertical Writing Mode）：文本从上到下排列，常用于中文、日文和韩文。
1、水平书写模式
在水平书写模式下，文本通常按照从左到右（LTR）或从右到左（RTL）的方向排列。以下是如何在 CSS 中设置水平书写模式的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平书写模式</title>
<style>
.ltr {
writing-mode: horizontal-tb; /* 从左到右 */
}
.rtl {
writing-mode: horizontal-tb;
direction: rtl; /* 从右到左 */
}
</style>
</head>
<body>
<div class="ltr">
这是从左到右的文本。
</div>
<div class="rtl">
这是从右到左的文本。
</div>
</body>
</html>
2、垂直书写模式
在垂直书写模式下，文本从上到下排列。CSS 允许我们使用 writing-mode 属性来设置垂直书写模式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直书写模式</title>
<style>
.vertical-ltr {
writing-mode: vertical-rl; /* 从右到左垂直书写 */
}
.vertical-rtl {
writing-mode: vertical-lr; /* 从左到右垂直书写 */
}
</style>
</head>
<body>
<div class="vertical-ltr">
这是垂直书写模式，从右到左排列的文本。
</div>
<div class="vertical-rtl">
这是垂直书写模式，从左到右排列的文本。
</div>
</body>
</html>
二、书写模式、块级布局和内联布局
书写模式会影响元素的布局方式，包括块级布局和内联布局。
1、块级布局
块级布局元素会在垂直方向上占据整个行宽，并在页面上显示为块状，通常用于容器元素，如 <div> 和 <section>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块级布局</title>
<style>
.block {
display: block;
width: 100%; /* 占据整个宽度 */
background-color: lightblue;
padding: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="block">
这是一个块级元素。
</div>
</body>
</html>
2、内联布局
内联布局元素不会占据整个行宽，而是仅占据它们自身的宽度。这些元素通常用于文本内容，如 <span> 和 <a>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联布局</title>
<style>
.inline {
display: inline;
background-color: lightgreen;
padding: 5px;
}
</style>
</head>
<body>
<span class="inline">
这是一个内联元素。
</span>
<span class="inline">
另一个内联元素。
</span>
</body>
</html>
三、方向
CSS 的 direction 属性用于设置文本的方向，通常与 writing-mode 属性一起使用，以确保文本在不同书写模式下正确显示。direction 属性有两个主要值：
- ltr（从左到右）：用于大多数拉丁字母书写系统。
- rtl（从右到左）：用于阿拉伯字母和希伯来字母书写系统。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方向示例</title>
<style>
.ltr {
direction: ltr;
}
.rtl {
direction: rtl;
}
</style>
</head>
<body>
<div class="ltr">
这是从左到右的文本。
</div>
<div class="rtl">
这是从右到左的文本。
</div>
</body>
</html>
四、逻辑属性和逻辑值
逻辑属性和逻辑值是 CSS 中用于处理不同书写模式的属性和数值。它们使得在不同的书写模式下，元素的布局和间距能够自动调整，而不需要手动设置每种方向的样式。
1、逻辑属性
逻辑属性是相对于元素的书写模式的属性。常见的逻辑属性包括：
margin-inline-start和margin-inline-end：表示元素的内联起始边距和内联结束边距。padding-inline-start和padding-inline-end：表示元素的内联起始内边距和内联结束内边距。border-inline-start和border-inline-end：表示元素的内联起始边框和内联结束边框。margin-block-start和margin-block-end：表示元素的块级起始边距和块级结束边距。padding-block-start和padding-block-end：表示元素的块级起始内边距和块级结束内边距。border-block-start和border-block-end：表示元素的块级起始边框和块级结束边框。
2、逻辑值
逻辑值是与逻辑属性配合使用的数值，它们根据书写模式的方向自动调整。例如：
start和end：相对于书写模式的起始和结束位置。对于水平书写模式，start通常是左侧，end通常是右侧；对于垂直书写模式，start通常是顶部，end通常是底部。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑属性示例</title>
<style>
.logical {
writing-mode: vertical-rl; /* 垂直书写模式，从右到左 */
margin-inline-start: 20px; /* 内联起始边距 */
margin-inline-end: 10px; /* 内联结束边距 */
padding-block-start: 15px; /* 块级起始内边距 */
padding-block-end: 5px; /* 块级结束内边距 */
border-inline-start: 2px solid black; /* 内联起始边框 */
border-block-start: 1px solid blue; /* 块级起始边框 */
}
</style>
</head>
<body>
<div class="logical">
这是使用逻辑属性的元素。
</div>
</body>
</html>
五、逻辑外边距、边框和内边距属性
逻辑外边距、边框和内边距属性用于设置元素的外边距、边框和内边距，这些属性可以相对于书写模式自动调整。
1、逻辑外边距
逻辑外边距属性包括：
margin-inline-start：设置内联起始边距。margin-inline-end：设置内联结束边距。margin-block-start：设置块级起始边距。margin-block-end：设置块级结束边距。
2、逻辑边框
逻辑边框属性包括：
border-inline-start：设置内联起始边框。border-inline-end：设置内联结束边框。border-block-start：设置块级起始边框。border-block-end：设置块级结束边框。
3、逻辑内边距
逻辑内边距属性包括：
padding-inline-start：设置内联起始内边距。padding-inline-end：设置内联结束内边距。padding-block-start：设置块级起始内边距。padding-block-end：设置块级结束内边距。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑外边距、边框和内边距示例</title>
<style>
.logical-box {
writing-mode: horizontal-tb; /* 水平书写模式 */
margin-inline-start: 30px; /* 内联起始边距 */
margin-inline-end: 20px; /* 内联结束边距 */
padding-block-start: 10px; /* 块级起始内边距 */
padding-block-end: 15px; /* 块级结束内边距 */
border-inline-start: 5px solid green; /* 内联起始边框 */
border-block-start: 3px dashed red; /* 块级起始边框 */
}
</style>
</head>
<body>
<div class="logical-box">
这是一个包含逻辑外边距、边框和内边距的元素。
</div>
</body>
</html>
六、应该使用物理属性还是逻辑属性？
在现代 CSS 中，使用逻辑属性而不是物理属性通常是推荐的做法。逻辑属性使得在不同书写模式下调整布局变得更加简单和一致。物理属性（如 margin-left, margin-right, padding-top, padding-bottom 等）通常与特定的书写模式相关联，不适用于多语言和不同书写方向的情况。
1、为什么使用逻辑属性？
- 适应性强：逻辑属性能够自动适应不同的书写模式和语言方向，减少了需要编写多套 CSS 样式的工作量。
- 一致性：逻辑属性确保在所有书写模式下的样式行为一致，避免了因为书写模式不同而导致的样式不一致问题。
- 简洁性：逻辑属性使得 CSS 代码更简洁易读，避免了重复的样式定义。
2、何时使用物理属性？
在某些情况下，可能仍需要使用物理属性，当你的设计需求明确指定某一方向时，或者当在处理遗留系统或旧版浏览器时。物理属性可以提供更直接的控制，但在现在的开发中，逻辑属性是更具前瞻性和灵活性的选择。
如有表述错误及欠缺之处敬请批评指正。
