前端之书写模式

书写模式

书写模式指文本的排列方向是横向还是纵向的。
使用 writing-mode 属性切换模式。

writing-mode

writing-mode的三个值分别是：

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

这里的
t：top
r：right
b：bottom
l：left
horizontal，vertical是文字水平还是竖直排列，
是块级元素的排列方向。

<style>
.box {
    padding: 1em;
    border: 2px solid black;
    margin: .5em;
}

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

.wrapper .vertical {
    writing-mode: vertical-rl;
}
</style>

    <div class="wrapper">
        <div class="box horizontal">
            <h2>Heading</h2>
            <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
        </div>
        <div class="box vertical">
            <h2>Heading</h2>
            <p>A paragraph. Demonstrating Writing Modes in CSS.</p>
        </div>
    </div>

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

margin-top → margin-block-start——总是指向块级维度开始处的边距。

border-bottom → border-block-end，也就是块级维度结尾处的边框。

padding-left → padding-inline-start，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。

<style>
.box {
  inline-size: 200px;
  writing-mode: horizontal-tb;
}

/* 逻辑属性 */
.logical {
    /*上外边距 */
    margin-block-start: 20px;
    /* 右内边距 */
    padding-inline-end: 2em;
    /* 上内边距 */
    padding-block-start: 2px;
    
    /* 上边框 */
    border-block-start: 5px solid pink;
    /* 右边框 */
    border-inline-end: 10px dotted rebeccapurple;
    /*底部边框  无论在那种书写模式下都位于文本的下方*/
    border-block-end: 1em double orange;
    /* 左边框 */
    border-inline-start: 1px solid black;
}


/* 物理属性 */
.physical {
  margin-top: 20px;
  padding-right: 2em;
  padding-top: 2px;
  border-top: 5px solid pink;
  border-right: 10px dotted rebeccapurple;
  border-bottom: 1em double orange;
  border-left: 1px solid black;
}

h2 {
  border-bottom: 5px solid black;
}
    
</style>

<div class="wrapper">
  <div class="box physical">
    <h2>Physical Properties</h2>
    <p>A paragraph. Demonstrating Logical Properties in CSS.</p>
  </div>
  <div class="box logical">
    <h2>Logical Properties</h2>
    <p>A paragraph. Demonstrating Logical Properties in CSS.</p>
  </div>
</div>
    

.logical 和.physical它们的样式在我看来，并没有什么不同。（求不同？？？）

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