css布局属性与合成属性_如何使用CSS逻辑属性控制布局

css布局属性与合成属性

CSS逻辑属性定义了一种处理布局的新方法。 他们的主要目标是帮助开发人员支持不同的书写系统，例如从右到左（RTL）和垂直显示的脚本。 这些新功能可以通过逻辑属性而不是物理属性来控制布局。 例如，具有逻辑性，你可以描述的start和end的元素，而不是它的left和right边界。 看到不同？

即使您不使用非LTR语言和多方向网站，也值得熟悉新规范。 逻辑属性将有助于建立一种新的哲学，即使用CSS创建更灵活的布局。

浏览器支持

由于浏览器支持仍有很大的改进空间，因此逻辑属性尚未投入生产。 但是，较新版本的Firefox，Chrome和Safari已经支持它们，因此您当然可以开始进行测试。

较早版本的Firefox，Chrome和Safari也提供了-moz-和-webkit-前缀的部分支持。 当前，Internet Explorer和Edge根本不支持该功能。

CSS中的内容方向

英文使用从左到右（LTR）和从上到下（tb）的水平脚本（拉丁文字）书写。 但是，并非每种语言都是这样。 有许多使用从右到左（RTL）脚本的语言示例，例如阿拉伯语和希伯来语，其他可以垂直显示的语言，例如日语，中文和蒙古语。

语言没有方向。 脚本具有书写方向，因此用特定脚本书写的语言将按照该脚本的方向进行书写。” – W3C

在CSS中，您可以使用direction和writing-mode属性在页面上设置内容方向。

1.写作方式

writing-mode属性定义了块内容（如段落）在屏幕上的流动方式。 它可以采用三个值：

1. horizontal-tb （默认）：水平内容，从上到下；
2. vertical-lr ：垂直内容，从左到右；
3. vertical-rl ：垂直内容，从右到左。

2.方向

direction属性定义内联内容（例如段落中的字符）在屏幕上的流动方式。 它可以采用两个值：

1. ltr （默认）：从左到右
2. rtl ：从右到左

CSS逻辑属性会自动将布局映射到使用direction和writing-mode属性设置的内容方向。

一种新的布局方法

1. Flexbox

逻辑布局的新方法始于flexbox规范。 Flexbox并未考虑左侧，右侧，顶部和底部等物理尺寸。 它使用诸如flex-start和flex-end类的值，这些值依赖于主轴和交叉轴的方向。

flex项目是水平还是垂直流动还取决于您可以使用flex-direction属性定义的两个轴的位置。 总而言之，“开始”和“结束”之类的概念在flexbox中完全是相对的，可以轻松翻转。

2. CSS网格

CSS Grid遵循相同的逻辑。 CSS网格也不知道左，右，上和下。 它沿着两个非层次结构轴按行和列排列项目。

您可以使用grid-template-areas属性使用诸如grid-row-start属性或使用命名网格区域来定义网格项的位置。 与flexbox相似，CSS Grid也具有逻辑属性，而不是物理属性。

3.逻辑属性

CSS逻辑属性将这种新方法带入了新的高度。 它们改变了我们定义常用属性（例如margin ， padding ， width和height 。

物理尺寸与逻辑尺寸

顶部，底部，左侧和右侧是屏幕的物理尺寸。 当前，CSS将属性映射到这些物理方向。 但是，当您拥有RTL网站时，您不想从左侧开始书写。 例如，如果要在文本之前添加页边距，则需要使用margin-right属性而不是LTR页面上要使用的margin-left属性。

而且，这只是设置一个内容框的边距。 如果要向整个站点添加RTL支持，则必须重写整个CSS或使用Sass或其他CSS预处理器执行转换。

逻辑属性会更改此操作方式。 代替垂直和水平尺寸的，他们使用块和内联尺寸：

• 块尺寸是页面上段落等块项目的布局方式（从上到下用英语）。
• 内联维度是段落中的内联项目（例如，字符）在页面上的布局方式（英语，从左到右）。

以下是逻辑尺寸映射到英语和其他LTR /水平TB语言的物理尺寸的方式：

逻辑尺寸	物理尺寸（英语）
块开始	最佳
块端	底部
内联启动	剩下
内联端	对

在阿拉伯语的RTL / horizo​​ntal-tb脚本中，逻辑到物理的映射如下所示：

逻辑尺寸	物理尺寸（阿拉伯文字）
块开始	最佳
块端	底部
内联启动	对
内联端	剩下

而且，当以tategaki（縦书き）样式编写时，这就是逻辑尺寸如何与诸如日语的vertical-rl脚本一起工作的方式：

逻辑尺寸	物理尺寸（日语）
块开始	对
块端	剩下
内联启动	最佳
内联端	底部

如您所见，CSS逻辑属性将使开发人员可以随意改变布局。

CSS逻辑属性

CSS逻辑属性当前由1级规范 （编辑者的草案；公开讨论提供）定义。

在下面，您可以找到最重要的逻辑属性的示例。 它们是常用物理属性（如margin和float的逻辑等效项。 如果您对逻辑属性的完整列表感兴趣，请参阅 MDN的参考指南 。

1.文字对齐

在支持CSS逻辑属性的浏览器中，可以将text-align属性与start和end值一起使用。 在英语和其他显示为LTR的语言中， start等于left ； end等于right 。

在阿拉伯语这样的RTL示例中，它的工作方式相反： start等于right ， end等于left 。

.align-start {
  /* Physical property | English */
  text-align: left;   
  
  /* Logical property */
  text-align: start;
}
.align-end {
/* Physical property | English */
  text-align: right;   
  
  /* Logical property */
  text-align: end;
}

在下面的演示中，如果更改页面的direction或writing-mode ，则可以测试text-align如何与逻辑属性一起工作：

2.保证金，填充，边框

您还可以使用逻辑属性定义margin ， padding和border 。 您需要使用-inline-start后缀来指示内联尺寸的开始 ，该尺寸以英语和其他LTR / tb语言left 。 同样， -inline-end后缀用于内联维的结尾 ，这在英语网站上是right 。

-block-start后缀用于块尺寸的开始 （英语： top ，而-block-end用于块尺寸的结尾 （英语）： bottom 。

.add-border {
  /* Physical properties | English */
  border-left: 0.625rem red solid;
  border-top: 0.625rem blue solid;
  border-right: 0.625rem purple solid;
  border-bottom: 0.625rem green solid;
    
  /* Logical properties */
  border-inline-start: 0.5rem red solid;
  border-block-start: 0.5rem blue solid;
  border-inline-end: 0.5rem purple solid;
  border-block-end: 0.5rem green solid;
}

.add-margin {
  /* Physical properties | English */
  margin-left: 0.25rem;
  margin-top: 0.5rem;
  margin-right: 0.75rem;
  margin-bottom: 1rem;
    
  /* Logical properties */
  margin-inline-start: 0.25rem;
  margin-block-start: 0.5rem;
  margin-inline-end: 0.75rem;
  margin-block-end: 1rem;
}

.add-padding {
  /* Physical properties | English */
  padding-left: 1.25rem;
  padding-top: 1.5rem;
  padding-right: 1.75rem;
  padding-bottom: 2rem;
    
  /* Logical properties */
  padding-inline-start: 1.25rem;
  padding-block-start: 1.5rem;
  padding-inline-end: 1.75rem;
  padding-block-end: 2rem;
}

在下面，您可以测试属于border属性的逻辑属性。

请注意，您还可以使用逻辑上等价的长边框属性。 例如， border-inline-start-color （而不是border-left-color ）也是有效的逻辑属性。

您可能已经注意到，这里缺少一些东西。 最有可能的是，您经常使用margin ， padding和border速记方式，而不是padding-top这类的速记方式。 逻辑属性如何处理这些速记？ 目前，他们根本不处理它们。

在积极讨论中，这些简写的逻辑等效仍然是一个悬而未决的问题。 将来会有一个解决方案，但是，现在，您需要使用逻辑边距，填充和边框的长期属性。 有关更多信息，请参见CSS Working Group的GitHub存储库中的Issue 1282 。

3.浮动

您还可以使用逻辑属性定义浮点数。 在LTR脚本中， inline-start等于left ， inline-end等于right 。 在RTL语言中，它是相反发生的，因为内联尺寸在屏幕右侧开始。

.float-inline-start {
  /* Physical property | English */
  float: left;   
  
  /* Logical property */
  float: inline-start;
}

.float-inline-end {
  /* Physical property | English */
  float: right;   
  
  /* Logical property */
  float: inline-end;
}

您可以在下面的演示中测试逻辑浮点数：

4.宽度和高度

大小设置属性（即width和height ）也具有它们的逻辑等效项。 在自上而下的编写脚本中， inline-size等于width ，因为这是内联元素（例如，段落中的字符）在屏幕上流动的尺寸。 并且， block-size等于height ，因为这是块元素（例如，段落）在其中流动的尺寸。

在垂直书写脚本中， height是内联尺寸（ inline-size ），因为字符是垂直流动的； width是块尺寸（ block-size ），因为段落是水平流动的。

如下所示， max-width ， max-height ， min-width和min-height也具有自己的逻辑属性。

.add-dimensions {
   /* Physical property | English */
   width: 600px;
   height: 200px;
  
   /* Logical property */
   inline-size: 600px;
   block-size: 200px;
}

.max-dimensions {
   /* Physical property | English */
   max-width: 100%;
   max-height: 300px;
  
   /* Logical property */
   max-inline-size: 100%;
   max-block-size: 300px;
}

.min-dimensions {
   /* Physical property | English */
   min-width: 50%;
   min-height: 200px;
  
   /* Logical property */
   min-inline-size: 50%;
   min-block-size: 200px;
}

在下面的演示中，您可以尝试inline-size和block-size属性如何在不同的方向和写入模式下工作：

5.位置

您也可以使用逻辑属性在屏幕上放置元素。 逻辑位置替换物理的top ， left ， bottom和right属性。

块尺寸的起点（英语为top ）由inset-block-start逻辑属性定义。 同样，内联尺寸的起点（英文left ）由inset-inline-start属性定义。

逻辑位置也有一个很酷的速记属性： inset ，它紧跟在

1. inset-block-start
2. inset-inline-start ，
3. inset-block-end
4. inset-inline-end

订购。

.add-position {
   /* Physical properties | English */
   top: 0;
   left: 100px;
   bottom: 200px;
   right: 300px;
   
  
   /* Logical properties | Longhand */
   inset-block-start: 0;
   inset-inline-start: 100px;
   inset-block-end: 200px;
   inset-inline-end: 300px
   
   /* Logical properties | Shorthand */
   inset: 0 100px 200px 300px;
}

下面的演示使用inset-block-start和inset-inline-start属性（分别用英语top和left ）将div粘贴到块轴和内联轴inset-block-start ：

结论

逻辑属性显然是逻辑上和方便的，但是要适应它们并不容易，因为它们需要完全不同的思维方式。 无疑，对于需要支持RTL和/或垂直语言脚本的开发人员来说，它们将是一个巨大的胜利。

用内联和块尺寸而不是物理方向来思考也将改变我们对布局的思考方式。 我们希望这种新方法将来也会带来一些有趣的布局和多方向的网站。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-use-css-logical-properties--cms-33024

css布局属性与合成属性