07-writing-mode

B 站视频教程

  
咏柳
  

    碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。
  


  

    
咏柳
    

      碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。
    
  
  

    
咏柳
    

      碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。
    
  
  

    
咏柳
    

      碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。
    
  
  

    
咏柳
    

      碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。
    
  
  

    
咏柳
    

      碧玉妆成一树高，
万条垂下绿丝绦。
不知细叶谁裁出，
二月春风似剪刀。
    
  



  
1
  
2



  
1
  
2



  
1
  
2

// 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;
  }
}