网格，逻辑值和写入模式 | CSS Grid Layout: CSS Grid, Logical Values and Writing Modes (Grid Layout) - CSS 中文开发手册 - Break易站

??CSS 中文开发手册

网格，逻辑值和写入模式 | CSS Grid Layout: CSS Grid, Logical Values and Writing Modes (Grid Layout) - CSS 中文开发手册

在这些指南中，我已经讨论了网格布局的一个重要特性：支持规范中内置的不同编写模式。对于本指南，我们将研究网格和其他现代布局方法的这一特性，学习一些关于编写模式和逻辑与物理属性的知识。

逻辑和物理属性和值

css充满了物理定位关键字-左和右，上和下。如果我们使用绝对定位定位一个项目，我们使用这些物理关键字作为偏移值来推送项目。在下面的代码片段中，项目从顶部放置20个像素，从容器左侧放置30个像素：

.container {
  position: relative;
}
.item {
  position: absolute;
  top: 20px;
  left: 30px;
}

<div class="container">
  <div class="item">Item</div>
</div>

另一个可能会看到物理关键字的地方是在使用text-align: right右对齐文本时。CSS 中也有物理属性。我们增加利润率，填充和边框使用的这些物理特性margin-left，padding-left等。

我们称这些关键字和属性为物理因为它们与你正在看的屏幕有关。不管你的文字运行的方向是什么，左总是左。

当开发一个必须以多种语言工作的站点时，这可能会成为一个问题，包括从右侧开始的语言，而不是从左边开始的语言。浏览器非常擅长处理文本方向，甚至不需要在RTL语言来看看。在下面的例子中，我有两个段落。一个人没有text-align属性集，第二个text-align向左转。我增加了dir="rtl"到html元素，该元素从英文文档的默认情况下切换写入模式。ltr您可以看到，由于text-align价值存在left然而，第二步，切换方向，文本从右到左运行。