From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../building_blocks/a_cool_looking_box/index.html | 88 ++++++++++++ .../creating_fancy_letterheaded_paper/index.html | 101 ++++++++++++++ .../fundamental_css_comprehension/index.html | 127 +++++++++++++++++ .../handling_different_text_directions/index.html | 151 +++++++++++++++++++++ .../index.html" | 151 --------------------- 5 files changed, 467 insertions(+), 151 deletions(-) create mode 100644 files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html delete mode 100644 "files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" (limited to 'files/zh-cn/learn/css/building_blocks') diff --git a/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..6ddd1d114b --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/a_cool_looking_box/index.html @@ -0,0 +1,88 @@ +--- +title: 一个漂亮的盒子 +slug: Learn/CSS/Styling_boxes/A_cool_looking_box +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。

+ + + + + + + + + + + + +
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如背景和边框。
+ +

起点

+ +

在开始评估之前，你需要：

+ + + +
+

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

+
+ +

项目简介

+ +

你的任务是创建一个酷炫的盒子，并探索CSS的乐趣。

+ +

一般任务

+ + + +

样式化盒子

+ +

给{{htmlelement("p")}}添加样式：

+ + + +

范例

+ +

完成之后的盒子可能会像下面的截图这样：

+ +

+ +

评估

+ +

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在Learning Area Discourse thread或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

在这个模块里

+ + + +

​​​ 

diff --git a/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..692071dfde --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,101 @@ +--- +title: 创建精美的信纸 +slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
+ +

如果你想给人留下好印象，把信写在一张精美的信纸上会是个不错的开始，在这个评估里我们希望你能创建一个在线模版来达到这样的效果。

+ + + + + + + + + + + + +
前提条件：在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。
目的：测试对CSS盒模型和其他盒相关特性的掌握程度，比如实现背景等。
+ +

起点

+ +

在开始评估之前，你需要：

+ + + +
+

提醒：或者你也可以用JSBin或Thimble这样的网站来做这个评估，把链接里的HTML和CSS代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的CSS面板的话，把CSS代码放到HTML文档头部的<style>元素里就好。

+
+ +

项目简介

+ +

你已经有了创建一个信纸模版所需的所有文件，只需把它们放到一起就好。为了达到目标，你需要：

+ +

信纸主体

+ + + +

标志

+ + + +

提示和技巧

+ + + +

范例

+ +

完成之后的信纸可能会像下面的截图这样：

+ +

+ +

 

+ +

评估

+ +

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。 如果你是自学，可以很容易地在 discussion thread for this exercise 或Mozilla IRC的#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

在这个模块里

+ + + +

 

diff --git a/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..b246af87fe --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,127 @@ +--- +title: 基本的CSS理解 +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - 初学者 + - 盒模型 + - 评估 + - 选择器 +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

你已经在这个模块中了解到了很多内容, 所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。

+ + + + + + + + + + + + +
学习本章的前提条件:在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。
目标：来测试对 CSS 理论、语法、功能性的基本理解。
+ +

起点

+ +

在开始测验之前，你应该:

+ + + +
+

注意: 另外, 你可以使用一个网站比如 JSBin 或 Thimble 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 this URL 来让 <img> 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入<style> 元素中。

+
+ +

项目概要

+ +

我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。

+ +

基本设置:

+ + + +

关注我们为你提供的选择器和规则集：

+ + + +

你需要写的新规则：

+ + + +
+

注意: 记住第二条规则集会将 font-size: 10px; 设置在 <html> 元素上 — 这意味着 <html> 的任何后代中，一个em将会等于10px而不是默认的 16px 。(这是当然的，如果在层次结构中，有不同的 font-size 设置于其上，问题中的后代没有任何的祖先位于 em元素和 <html> 之间。这可能会影响您所需要的值，尽管在这个简单的示例中，这不是问题。)

+
+ +

其他事情要考虑：

+ + + +

注意和提示

+ + + +

示例

+ +

完成的设计应如下图所示：

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

评估

+ +

如果您将此评估作为有组织的课程的一部分，您应该能够将您的工作交给您的老师/导师进行打分。 如果您是自学的，那么您可以通过询问  Learning Area Discourse thread, 或在 #mdn的IRC频道 Mozilla IRC 中轻松获得打分指南. 首先尝试练习 - 作弊学不到什么！

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

在本单元中

+ + diff --git a/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html new file mode 100644 index 0000000000..f907c93a3c --- /dev/null +++ b/files/zh-cn/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,151 @@ +--- +title: 处理不同方向的文本 +slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
+ +

目前为止我们在CSS学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。

+ +

然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。

+ + + + + + + + + + + + +
先决条件：计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML基础（HTML 学习Introduction to HTML）以及CSS基础（学习CSS first steps）。
目标：了解书写模式对现代CSS的重要
+ +

什么是书写模式

+ +

CSS中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。

+ +

下面的例子中，我们使用writing-mode: vertical-rl对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

+ +

writing-mode的三个值分别是：

+ + + +

因此，writing-mode属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

+ +

书写模式、块级布局和内联布局

+ +

我们已经讨论了块级布局和内联布局（block and inline layout），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。

+ +

用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是writing-mode: horizontal-tb，这是一个从上到下的横向的书写模式。第二个盒子应用的是writing-mode: vertical-rl，这是一个从右到左的纵向的书写模式。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

+ +

当我们切换书写模式时，我们也在改变块和内联文本的方向。horizontal-tb书写模式下块的方向是从上到下的横向的，而 vertical-rl书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。 

+ +

这张图展示了在水平书写模式下的两种维度。

+ +

这张图片展示了纵向书写模式下的两种维度。

+ +

+ +

一旦你开始接触CSS布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。

+ +

方向

+ +

除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想讲某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是CSS本身功能的一部分。网页可不仅限于从左向右排列的语言！

+ +

由于书写模式和文本方向都是可变的，新的CSS布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的开头和结尾一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握CSS非常有用。

+ +

逻辑属性和逻辑值

+ +

我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。

+ +

让我们再来看看那两个盒子——一个用horizontal-tb设定了书写模式，一个用vertical-rl设定了书写模式。我为这两个盒子分别设定了宽度（ {{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

+ +

通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。

+ +

为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。

+ +

横向书写模式下，映射到width的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射height的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉width的inline-size是如何生效的。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

+ +

逻辑外边距、边框和内边距属性

+ +

我们在前面两节中学习了CSS的盒模型和CSS边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像width和height有映射，这些属性也有相应的映射。

+ +

margin-top属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。

+ +

{{cssxref("padding-left")}}属性映射到 {{cssxref("padding-inline-start")}}，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}}属性映射到的是{{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。

+ +

下面是物理和逻辑属性之间的对比。

+ +

如果你用writing-mode把盒子.box的书写模式改为vertical-rl，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。

+ +

你还可以看到，二级标题{{htmlelement("h2")}}有一个黑色的底部边框border-bottom。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

+ +

对于每一个普通边距，都有许多属性可以参考，你可以在MDN页面（Logical Properties and Values）查看所有映射属性。

+ +

逻辑值

+ +

目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如top、right、bottom和left）。这些值同样拥有逻辑值映射（block-start、inline-end、block-end和inline-start）。

+ +

例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将left替换为inline-start ，就像下面的例子中一样。

+ +

将这个例子的书写模式改为vertical-rl，看看图片会发生什么。将inline-start改为inline-end来改变图片的移动。

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

+ +

之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。

+ +
+

译者注：float的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效。

+
+ +

应该使用物理属性还是逻辑属性呢？

+ +

逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看MDN的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。

+ +

总结

+ +

本章介绍的概念在CSS的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。

+ +

在下一部分，我们将会看一下CSS中的溢出。

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

+ +

模块目录

+ +
    +
  1. 层叠与继承
    2. +
  2. CSS选择器 + +
    3. +
  3. 盒模型
    4. +
  4. 背景与边框
    5. +
  5. 处理不同文字方向的文本
    6. +
  6. 溢出的内容
    7. +
  7. 值和单位
    8. +
  8. 在CSS中调整大小
    9. +
  9. 图像、媒体和表单元素
    10. +
  10. 样式化表格
    11. +
  11. 调试CSS
    12. +
  12. 组织CSS
    13. +
diff --git "a/files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" "b/files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" deleted file mode 100644 index f907c93a3c..0000000000 --- "a/files/zh-cn/learn/css/building_blocks/\345\244\204\347\220\206_\344\270\215\345\220\214_\346\226\271\345\220\221\347\232\204_\346\226\207\346\234\254/index.html" +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: 处理不同方向的文本 -slug: Learn/CSS/Building_blocks/处理_不同_方向的_文本 -translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
- -

目前为止我们在CSS学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。

- -

然而，CSS在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。

- - - - - - - - - - - - -
先决条件：计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML基础（HTML 学习Introduction to HTML）以及CSS基础（学习CSS first steps）。
目标：了解书写模式对现代CSS的重要
- -

什么是书写模式

- -

CSS中的书写模式是指文本的排列方向是横向还是纵向的。{{cssxref("writing-mode")}} 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。

- -

下面的例子中，我们使用writing-mode: vertical-rl对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

- -

writing-mode的三个值分别是：

- - - -

因此，writing-mode属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

- -

书写模式、块级布局和内联布局

- -

我们已经讨论了块级布局和内联布局（block and inline layout），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。

- -

用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是writing-mode: horizontal-tb，这是一个从上到下的横向的书写模式。第二个盒子应用的是writing-mode: vertical-rl，这是一个从右到左的纵向的书写模式。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

- -

当我们切换书写模式时，我们也在改变块和内联文本的方向。horizontal-tb书写模式下块的方向是从上到下的横向的，而 vertical-rl书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。 

- -

这张图展示了在水平书写模式下的两种维度。

- -

这张图片展示了纵向书写模式下的两种维度。

- -

- -

一旦你开始接触CSS布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。

- -

方向

- -

除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想讲某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是CSS本身功能的一部分。网页可不仅限于从左向右排列的语言！

- -

由于书写模式和文本方向都是可变的，新的CSS布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的开头和结尾一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握CSS非常有用。

- -

逻辑属性和逻辑值

- -

我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。

- -

让我们再来看看那两个盒子——一个用horizontal-tb设定了书写模式，一个用vertical-rl设定了书写模式。我为这两个盒子分别设定了宽度（ {{cssxref("width")}}）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

- -

通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。

- -

为了更容易实现这样的转变，CSS最近开发了一系列映射属性。这些属性用逻辑（logical）和相对变化（flow relative）代替了像宽width和高height一样的物理属性。

- -

横向书写模式下，映射到width的属性被称作内联尺寸（{{cssxref("inline-size")}}）——内联维度的尺寸。而映射height的属性被称为块级尺寸（{{cssxref("block-size")}}），这是块级维度的尺寸。下面的例子展示了替换掉width的inline-size是如何生效的。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

- -

逻辑外边距、边框和内边距属性

- -

我们在前面两节中学习了CSS的盒模型和CSS边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 {{cssxref("margin-top")}}、 {{cssxref("padding-left")}}和 {{cssxref("border-bottom")}}。就像width和height有映射，这些属性也有相应的映射。

- -

margin-top属性的映射是{{cssxref("margin-block-start")}}——总是指向块级维度开始处的边距。

- -

{{cssxref("padding-left")}}属性映射到 {{cssxref("padding-inline-start")}}，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。{{cssxref("border-bottom")}}属性映射到的是{{cssxref("border-block-end")}}，也就是块级维度结尾处的边框。

- -

下面是物理和逻辑属性之间的对比。

- -

如果你用writing-mode把盒子.box的书写模式改为vertical-rl，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。

- -

你还可以看到，二级标题{{htmlelement("h2")}}有一个黑色的底部边框border-bottom。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

- -

对于每一个普通边距，都有许多属性可以参考，你可以在MDN页面（Logical Properties and Values）查看所有映射属性。

- -

逻辑值

- -

目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如top、right、bottom和left）。这些值同样拥有逻辑值映射（block-start、inline-end、block-end和inline-start）。

- -

例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将left替换为inline-start ，就像下面的例子中一样。

- -

将这个例子的书写模式改为vertical-rl，看看图片会发生什么。将inline-start改为inline-end来改变图片的移动。

- -

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

- -

之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。

- -
-

译者注：float的逻辑值暂时只有Firefox和Firefox for Android支持，上面的例子可能无法生效。

-
- -

应该使用物理属性还是逻辑属性呢？

- -

逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看MDN的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。

- -

总结

- -

本章介绍的概念在CSS的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。

- -

在下一部分，我们将会看一下CSS中的溢出。

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}

- -

模块目录

- -
    -
  1. 层叠与继承
    2. -
  2. CSS选择器 - -
    3. -
  3. 盒模型
    4. -
  4. 背景与边框
    5. -
  5. 处理不同文字方向的文本
    6. -
  6. 溢出的内容
    7. -
  7. 值和单位
    8. -
  8. 在CSS中调整大小
    9. -
  9. 图像、媒体和表单元素
    10. -
  10. 样式化表格
    11. -
  11. 调试CSS
    12. -
  12. 组织CSS
    13. -
-- cgit v1.2.3-54-g00ecf