07-writing-mode

B 站视频教程

<div class="demo1">
  <h4>咏柳</h4>
  <p>
    碧玉妆成一树高，<br />万条垂下绿丝绦。<br />不知细叶谁裁出，<br />二月春风似剪刀。
  </p>
</div>
<div class="container">
  <div class="demo2">
    <h4>咏柳</h4>
    <p>
      碧玉妆成一树高，<br />万条垂下绿丝绦。<br />不知细叶谁裁出，<br />二月春风似剪刀。
    </p>
  </div>
  <div class="demo3">
    <h4>咏柳</h4>
    <p>
      碧玉妆成一树高，<br />万条垂下绿丝绦。<br />不知细叶谁裁出，<br />二月春风似剪刀。
    </p>
  </div>
  <div class="demo4">
    <h4>咏柳</h4>
    <p>
      碧玉妆成一树高，<br />万条垂下绿丝绦。<br />不知细叶谁裁出，<br />二月春风似剪刀。
    </p>
  </div>
  <div class="demo5">
    <h4>咏柳</h4>
    <p>
      碧玉妆成一树高，<br />万条垂下绿丝绦。<br />不知细叶谁裁出，<br />二月春风似剪刀。
    </p>
  </div>
  <div class="demo6">
    <h4>咏柳</h4>
    <p>
      碧玉妆成一树高，<br />万条垂下绿丝绦。<br />不知细叶谁裁出，<br />二月春风似剪刀。
    </p>
  </div>
</div>

<div class="box1">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
</div>

<div class="box2">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
</div>

<div class="box3">
  <div class="box-item">1</div>
  <div class="box-item">2</div>
</div>

// direction 设置文本水平对齐方向
.demo1 {
  direction: rtl;
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
// writing-mode 是用来实现文字可以竖着呈现的

// 默认值 horizontal-tb 文本流是水平方向(horizontal) 元素是从上往下(tb:top-bottom)堆叠的。
.demo2 {
  writing-mode: horizontal-tb;
}

//  vertical-lr 文本流是垂直方向(vertical) 元素是从左往右(lr:left-right)堆叠的。
.demo3 {
  writing-mode: vertical-lr;
}

//  vertical-rl 文本流是垂直方向(vertical) 元素是从右往左(rl:right-left)堆叠的。
.demo4 {
  writing-mode: vertical-rl;
}

// sideways-lr 文本流是垂直方向(vertical), 但垂直方向对其的方式是从下到上
// 元素是从左往右(lr:left-right)堆叠的
.demo5 {
  writing-mode: sideways-lr;
}

// sideways-lr 文本流是垂直方向(vertical), 但垂直方向对其的方式是从上到下
// 元素是从右往左(rl:right-left)堆叠的。
.demo6 {
  writing-mode: sideways-rl;
}

// margin 的重叠效果
.box1 {
  // 垂直方向， 上一个元素的 margin-bottom 和下一个元素是 margin-top 会重叠
  .box-item {
    height: 50px;
    background-color: gray;
    margin: 20px;
  }
}

// .box1 .box2 没有设置 margin 属性，所以垂直方向不会重叠
.box2 {
  // 水平方向，margin 不会发生重叠
  .box-item {
    height: 100px;
    width: 100px;
    background-color: green;
    margin: 20px;
    display: inline-block;
  }
}

// 如果使用了 writing-mode, 也可以实现 margin 在水平方向的的重叠
// 将页面默认的水平文档流流改成了垂直流，颠覆了很多我们以往的认知，基于原本水平方向才适用的规则全部都可以在垂直方向适用！
.box3 {
  background-color: #ccc;
  writing-mode: vertical-lr;
  .box-item {
    background-color: pink;
    width: 100px;
    height: 100px;
    margin: 20px;
    writing-mode: horizontal-tb;
  }
}