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

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属性定义了块内容（如段落）在屏幕上的流动方式。它可以采用三个值：

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

2.方向

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

ltr （默认）：从左到右
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 / horizontal-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 ，它紧跟在

inset-block-start
inset-inline-start ，
inset-block-end
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 ：