逻辑属性 ( logical properties )

CSS 逻辑属性 ( logical properties ) 提供了一种更具“语义化”和“自适应性”的方式来设定元素样式，特别是针对不同书写方向的语言环境（ 左到右、右到左 ）的语言环境中，可以很轻松的让排版方向保持一致，大幅简化开发流程并提高可维护性，这篇教学会介绍 CSS 的逻辑属性。

快速导览：

• 认识 CSS 逻辑属性 ( logical properties )
• 逻辑宽高 block-size、inline-size
• 开始与结束 start、end
• CSS 逻辑属性列表

认识 CSS 逻辑属性 ( logical properties )

在进行排版时，通常会使用 CSS 的物理属性 ( Physical Properties ) 来设定元素的宽高或位置样式，例如 width、 height、top、left 等，这些样式属性是基于“页面物理方向”，因此如果切换不同方向的语系 ( 左到右变成右到左 )，在对齐或排版上就必须重新调整，造成维护与管理上的不方便，下方列出两种模式的差异与说明：

下方范例中第一组 div 使用物理属性的方式设定边框，因为指定了“left”方向的边框，不论文字方向如何设定，都只有左边的边框会改变粗细，但第二组 div 使用逻辑属性里的“start”方向进行设定，所以变粗的边框一定是“流向开始”的位置。

线上展示：https://codepen.io/oxxo/pen/RNbYwdb

<!-- HTML 程式碼-->
<div class="no_logical">
  <h3 class="a">水平左到右</h3>
  <h3 class="b">水平右到左</h3>
  <h3 class="c">垂直左到右</h3>
  <h3 class="d">垂直右到左</h3>
</div>
<div class="logical">
  <h3 class="a">水平左到右</h3>
  <h3 class="b">水平右到左</h3>
  <h3 class="c">垂直左到右</h3>
  <h3 class="d">垂直右到左</h3>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    float: left;
    margin: 20px;
  }
  h3 {
    width: 150px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
    box-sizing: border-box;
  }
  .no_logical h3 {border-left-width: 10px;}      /* 左邊邊框變粗 */
  .logical h3 {border-inline-start-width: 10px;} /* 左右的開始處邊框變粗 */
  .b {direction: rtl;}
  .c {writing-mode: vertical-lr;}
  .d {writing-mode: vertical-rl;}
</style>

逻辑宽高 block-size、inline-size

通常在设定元素尺寸时，会透过宽度 width 和高度 height 来处理，但如果语言从水平流量变成垂直流向，对于文字来说，宽度就会变成高度，而高度就会变成宽度，这时就必须进行额外的判断处理，然而透过 block-size 和 inline-size 逻辑属性，就能在转换方向时，一并转换宽高的方向，下方列出这两个样式属性的说明：

下方的范例中橘色的元素是设定 width 和 height 的 div，蓝色的元素是设定 inline-size 和 block-size 的 div，可以看见在水平文字流向时没有太大差异，但文字变成垂直流向时，设定 inline-size 和 block-size 的 div 就会根据文字流向自动变换方向。

线上展示：https://codepen.io/oxxo/pen/NPKLWJb

<!-- HTML 程式碼-->
<div class="a">STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="b">STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="a size">STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="b size">STEAM 教育學習網讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>


<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 80px;
    border: 1px solid #000;
    margin: 10px;
    background: #f90;
    float: left;
  }
  .size {
    background: #0cf;
    inline-size: 200px;   /* 邏輯寬度 */
    block-size: 80px;     /* 邏輯高度 */
  }
  .b {writing-mode: vertical-rl;}   /* 文字垂直 */
</style>

开始与结束 start、end

除了宽度和高度，元素许多样式属性也都有“方向性”，例如边框 border、内边距 padding、外边界 margin 等，为了因应这些具有方向性的样式属性，CSS 提供了 *-start 和 *-end 结尾结尾的样式属性，分别代表指定样式位于“文字流向的开始处或结尾处”。

CSS 逻辑属性列表

如果将 *-start、*-end、block-size 和 inline-size 搭配组合，就成为 CSS 所提供的逻辑属性，下方列出这些逻辑属性：

边框 border 逻辑属性

下方列出 border 相关逻辑属性，设定的属性值与 border 完全相同，参考“边框 border”。

下方范例会使用 border 相关逻辑属性，展示水平与垂直转换后“物理属性”和“逻辑属性”差异。

线上展示：https://codepen.io/oxxo/pen/ZYzMEPv

<!-- HTML 程式碼-->
<div class="a">oxxo</div>
<div class="b rl">oxxo</div>
<div class="c">oxxo</div>
<div class="d rl">oxxo</div>
<div class="a-size">oxxo</div>
<div class="b-size rl">oxxo</div>
<div class="c-size">oxxo</div>
<div class="d-size rl">oxxo</div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    margin: 10px;
    background: #f90;
    box-sizing: border-box;
    float: left;
  }
  .rl {writing-mode: vertical-rl;}
  .a, .b {border-left: 20px solid #000;}  /* 普通物理屬性寫法 */
  .c, .d {border-top-left-radius: 50px;}  /* 普通物理屬性寫法 */
  .rl {writing-mode: vertical-rl;}        /* 有這個類型的會轉成垂直書寫 */
  .a-size, .b-size {
    background: #0cf;
    border-inline-start: 20px solid #000; /* 邏輯屬性寫法 */
  }
  .c-size, .d-size {
    background: #0cf;
    border-start-start-radius: 50px;      /* 邏輯屬性寫法 */
  }
</style>

外边界 margin 逻辑属性

下方列出 margin 相关逻辑属性，设定的属性值与 margin 完全相同，参考“外边界 margin”。

下方范例会使用 margin 相关逻辑属性，展示水平与垂直转换后“物理属性”和“逻辑属性”差异。

线上展示：https://codepen.io/oxxo/pen/xbKaxBy

<!-- HTML 程式碼-->
<div><div class="a">oxxo</div></div>
<div><div class="b rl">oxxo</div></div>
<div><div class="a-size">oxxo</div></div>
<div><div class="b-size rl">oxxo</div></div>


<!-- CSS 程式碼 -->
<style>
  div:not([class]){
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 10px;
  }
  div div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: #f90;
    box-sizing: border-box;
  }
  .a, .b {
    margin-left: 20px;
    margin-top: 50px;
  }
  .rl {
    writing-mode: vertical-rl;  /* 有這個類型的會轉成垂直書寫 */
  }
  .a-size, .b-size {
    background: #0cf;
    margin-inline-start: 20px;  /* 邏輯屬性寫法 */
    margin-block-start: 50px;   /* 邏輯屬性寫法 */
  }
</style>

内边距 padding 逻辑属性

下方列出 padding 相关逻辑属性，设定的属性值与 padding 完全相同，参考“内边距 padding”。

下方范例会使用 padding 相关逻辑属性，展示水平与垂直转换后“物理属性”和“逻辑属性”差异。

线上展示：https://codepen.io/oxxo/pen/VYZGwRO

<!-- HTML 程式碼-->
<div class="a"><div>oxxo</div></div>
<div class="b rl"><div>oxxo</div></div>
<div class="a-size"><div>oxxo</div></div>
<div class="b-size rl"><div>oxxo</div></div>

<!-- CSS 程式碼 -->
<style>
  div[class]{
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 10px;
    box-sizing: border-box;
  }
  div div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: #f90;
  }
  .a, .b {
    padding-left: 20px;
    padding-top: 50px;
  }
  .rl {writing-mode: vertical-lr;}
  .a-size, .b-size {
    padding-inline-start: 20px;  /* 邏輯屬性寫法 */
    padding-block-start: 50px;   /* 邏輯屬性寫法 */
  }
  .a-size div, .b-size div{background: #0cf;}
</style>

内嵌宽度 inset 逻辑属性

下方列出 inset 相关逻辑属性，设定的属性值与 inset 完全相同，参考“内嵌宽度”。

下方范例会使用 inset 相关逻辑属性，展示水平与垂直转换后“物理属性”和“逻辑属性”差异。

线上展示：https://codepen.io/oxxo/pen/ByBOaEK

<!-- HTML 程式碼-->
<div><div class="a">oxxo</div></div>
<div><div class="b rl">oxxo</div></div>
<div><div class="a-size">oxxo</div></div>
<div><div class="b-size rl">oxxo</div></div>


<!-- CSS 程式碼 -->
<style>
  div:not([class]){
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 10px;
    box-sizing: border-box;
    position: relative;
  }
  div div {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: #f90;
    position: absolute;
  }
  .a, .b {
    left: 20px;  /* 定位物理屬性寫法 */
    top: 80px;   /* 定位物理屬性寫法 */
  }
  .rl {writing-mode: vertical-lr;}
  .a-size, .b-size {
    background: #0cf;
    inset-inline-start: 20px;  /* 邏輯屬性寫法 */
    inset-block-start: 80px;   /* 邏輯屬性寫法 */
  }
</style>

小结

从这边教学得范例中可以发现，透过 CSS 逻辑属性 ( logical properties ) 可以针对文字的方向，自动改变设定的方向，虽然在大部分的情形都不会遇到 ( 网站为了浏览的用户体验，大多都是水平排版，很少直书 )，但如果真的有相关需求，透过逻辑属性进行设定是相当方便的。

意见反馈