【CSS】构建基础Ⅱ

根据MDN网站学习记录笔记

处理不同方向的文本

CSS中的书写模式是指文本的排列方向是横向还是纵向的。writing-mode 属性使我们从一种模式切换到另一种模式。

writing-mode的三个值分别是：

• horizontal-tb ：块流向从上至下。对应的文本方向是横向的。
• vertical-rl: 块流向从右向左。对应的文本方向是纵向的。
• vertical-lr: 块流向从左向右。对应的文本方向是纵向的。

1. 逻辑属性和逻辑值
   CSS最近开发了一系列映射属性，使宽和高随着书写模式一起变化

• 横向书写模式下，映射到width的属性被称作内联尺寸（inline-size）——内联维度的尺寸。
• 映射height的属性被称为块级尺寸（block-size），这是块级维度的尺寸

.box {
   
  inline-size: 150px;
}

.horizontal {
   
  writing-mode: horizontal-tb;
}

.vertical {
   
  writing-mode: vertical-rl;
}

<div class="wrapper">
  <div class="box horizontal">
    <h2>Heading</h2>
    <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
    <p>These boxes have inline-size.</p>
  </div>
  <div class="b