警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>HTML/CSS>学习了解CSS逻辑属性和值(CSS Logical Properties and Values)

学习了解CSS逻辑属性和值(CSS Logical Properties and Values)

原创2019-01-19HTML/CSS2684 次阅读 · 读完需要 15 分钟。

在了解本文时可先查看本博客就是使用的新的语法样式搭建的,

2017年5月18日,W3C的 CSS工作组(CSS Working Group) 发布了 CSS逻辑属性和值(CSS Logical Properties and Values Level 1) 的首份工作草案(First Public Working Draft)。不同的书写模式(writing mode)中,可以抽取出共性的抽象概念(如开始位置,或行),这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式(而不是基于物理坐标、书写方向和维映射等)控制布局的逻辑属性和取值(logical properties and values)。这个模块来源于CSS21中关于逻辑属性和值的特性。

在过去,CSS属性运用于物理维度(尺寸)和方向,将元素的位置映射到leftrighttopbottom。使用float可以让一个元素向左或向右浮动,可以使用positiontoprightbottomleft定位元素的偏移量。使用比如margin-toppadding-top来设置marginpaddingborder的值。这些特理属性和值在toprightbottom和left

和书写模式有很大的关系,书写模式可以直接改变其方向。比如:

当书写模式directionrtl(从右向左)时,margin-left不再是让该元素距其侧元素有多少间距了,而是变成了该元素距右侧元素之间有多少间距

如果你使用垂直书写模式,无论是在整个布局中还是在某些元素中,都没有什么意义。这篇文章中接下来将解释CSS如何改变这些,并且可以支持书写模式。在这个过程中,可以解释清楚一些关于Flexbox和Grid布局中一些令人感到困惑的一些事情。

当第一次开始使用CSS Grid并向大家解释其规范时,我注意到grid-area属性被用于grid-row-startgrid-row-endgrid-column-startgrid-column-end四个属性的简写属性。因此,下面三种书写方式,其达到的效果都是相同的:

.item {
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 3;
    grid-column-end: 4;
}
.item {
    grid-row: 1 / 3;
    grid-column: 2 / 4;
}
.item {
    grid-area: 1 / 2 / 3 / 4;
}

grid-area对应的顺序如下:

  • grid-row-start
  • grid-column-start
  • grid-row-end
  • grid-column-end

这里有两个关键词*-start*-end,而我们以前接触的CSS属性,比如marginpaddingborder之类的都是以*-top*-right*-bottom*-left。那么为什么会是如此呢?如果仔细观察,它们实际上是按照相反的顺序排列的:topleftbottomright。这样一来,CSS工作组不是把事情变得更为困难了?

答案是,这些值 已经偏离了一个基本的假设,即Web上的内容映射到屏幕的物理尺寸,一个句子的第一个单词位于其所在框的左上角。如果你从未遇到过我们用简写的属性设置这些值,那么grid-area中的行顺序就变得完全有意义了。我们先设置了两个起始位置(行和列的起始位置),然后设置两个结束位置(行和列的结束位置)。

这意味着,如果书写模式改为垂直模式,那么块的位置仍然相对于文档的书写模式,而不是屏幕的物理属性。这样理解可能有点困惑。咱们来看看@Rachel Andrew在Codepen上给我们提供的一个示例:

See the Pen
Grid and writing-mode
by rachelandrew (@rachelandrew)
on CodePen.

了解了书写模式的这个事实,也就解释清楚了为什么Flexbox和Grid是指开始和结束行,而不是将网格映射到top、right、bottom和left的物理维度上。

了解写入模式的这一事实也解释了为什么CSS Grid和Flexbox引用startend排列而不是将网格映射到toprightbottomleft的物理维度上,就像我们使用绝对定位一样。在上面的示例中,第一个项目使用grid-area基于行的定位定位。

grid-area: 1 / 2 / 3 / 4;

如果我们使用的是手写是这样的:

grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
grid-column-end: 4;

我们设置两个起始行,首先是阻塞轴,然后是第二个内联轴,然后按照相同的模式设置每个维度中的结束行。无论网格布局如何,起始线和结束线都保持相对于网格和文档的写入模式。

块和内联维度

我已经提到了一些对于理解新布局,块和内联维度的概念至关重要的东西。当你使用新的CSS时,这些术语将不断涌现。这两个维度在网格布局的上下文中相当容易理解,因为我们在网格布局中工作时总是使用块和内联轴,所以我将使用网格演示来解释。

块维度对应于在页面上布置块的顺序。比如你d的页面中有一大段文本内容。每个段落都是一个在另一段下面排列,这些排列的方向是块的维度,所以在网格布局中,这是块轴。

在CSS网格布局中,块轴也称为行轴,这就是块轴属性为grid-row-start和的原因grid-row-end

因此,内联轴将会穿过块轴,沿着词在句子中的方向分布。在英文语句中,这个轴从左到右。在网格布局中,内联轴属性是grid-column-startgrid-column-end

如果我们把书写模式改变vertical-lr(垂直模式),这意味着块轴垂直运行,而内联轴沿着直线从上到下。

因此,如果我们谈论块维度,其实对应的是描述文本段落在普通文档流中布局的方向,内联维度是句子运行的方向。

逻辑属性

所谓CSS逻辑属性,指的是*-start*-end以及*-inline-start*-inline-end*-block-start*-block-start这类CSS属性,其最终渲染的方向是有逻辑性在里面的。

例如margin-left方向是固定的,就左侧间距,没有逻辑;但是,margin-start有可能是左间距,也有可能是右间距,例如,对于内联元素,如果direction属性值是rtl,则margin-start的表现等同于margin-right,如果属性值是ltr,则margin-start的表现等同于margin-left,就表现出了逻辑判断在里面,因此,成为CSS逻辑属性。

逻辑维度

逻辑属性定义块和内联维度的开始和结束属性。对于高度和宽度属性,我们改为使用block-sizeinline-size。我们还可以设置max-block-sizemin-block-sizemax-inline-sizemin-inline-size。如果您使用的是英语,则从上到下的横向语言block-size是指height屏幕上块inline-size的物理特性width,即物品的物理特性。如果您使用的是垂直运行的语言,那么当您查看屏幕时,block-size将会出现控制widthinline-size高度的情况。

您可以在下面的演示中看到这一点。我的块是block-size: 150pxinline-size: 250px组成。更改writing-mode属性以查看布局如何调整。

See the Pen
Block and Inline Size demo
by rachelandrew (@rachelandrew)
on CodePen.

逻辑边界(border)

我们来回忆一下物理属性边界的工作方式,边界(border)的物理属性是:

  • border-top
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left
  • border-left-width
  • border-left-style
  • border-left-color

现在它们具有逻辑映射,这些映射变得有点冗余:

  • border-block-start
  • border-block-start-width
  • border-block-start-style
  • border-block-start-color
  • border-inline-start
  • border-inline-start-width
  • border-inline-start-style
  • border-inline-start-color
  • border-block-end
  • border-block-end-width
  • border-block-end-style
  • border-block-end-color
  • border-inline-end
  • border-inline-end-width
  • border-inline-end-style
  • border-inline-end-color

在以下示例中,有两个访客,第一个使用逻辑属性来设置border-block-start-color: greenborder-inline-end-style:dotted。第二个使用物理属性border-top-color: greenborder-right-style:dotted。我们通过改变write-mode的属性值,来看一下border的物理属性和逻辑属性之间的差异:

See the Pen
Logical borders
by rachelandrew (@rachelandrew)
on CodePen.

margin和padding

margin和padding和border属性一样,其物理属性为:

  • margin-top
  • margin-left
  • margin-bottom
  • margin-right
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

它们具有如下逻辑属性:

  • margin-block-start
  • margin-inline-start
  • margin-inline-start
  • margin-inline-end
  • padding-block-start
  • padding-inline-start
  • padding-inline-start
  • padding-inline-end

在下一个示例中,我已设置padding-block-start第一个块,而padding-top在第二个块中,我们通过改变write-mode的属性值,来看一下物理属性和逻辑属性之间的差异:

See the Pen
Logical properties – padding
by rachelandrew (@rachelandrew)
on CodePen.

position的位移属性

使用物理属性的另一个地方是使用属性定位事物position。在设置position: absolutepositionstatic我们的默认值之外的其他值之后,可以使用偏移来定位项目,无论是来自视口还是来自已创建新定位上下文的父项。

偏移物理属性是:

  • top
  • right
  • bottom
  • left

按照我们其他逻辑属性的模式,我们得到:

  • offset-block-start
  • offset-inline-start
  • offset-block-end
  • offset-inline-end

请在下面的示例中尝试这些。带边框的盒子position: relative和小紫色方块position: absolute。在物理示例的正方形被定位top: 50pxright: 20px。逻辑版本有offset-block-start: 50pxoffset-inline-end: 20px

See the Pen
Logical offsets
by rachelandrew (@rachelandrew)
on CodePen.

逻辑值

我们习惯使用物理尺寸的另一个地方是我们漂浮或清理东西。因为floatclear 我们有一些left和right值的逻辑版本。

  • inline-start
  • inline-end

See the Pen
floating with logical values
by rachelandrew (@rachelandrew)
on CodePen.

在演示中,我将紫色块浮动到逻辑版本中inline-start。我也使用逻辑属性作为保证金; 这样可以确保边距始终位于块之后,并且在包围它的内容之前。通过选择vertical-rl下拉列表中的值,您可以看到物理示例中的边距如何在块的右侧结束,而不是在-end方向上应用。

还有startendtext-align。对齐要启动的内容将使其与内联轴的起点对齐,直到内联轴end的末端,无论写入模式是水平还是垂直。

今天使用逻辑属性和值

Can I Use css-logical-props? Data on support for the css-logical-props feature across the major browsers from caniuse.com.

如前所述,目前逻辑属性和值的浏览器支持很少。但是,如果您现在想要开始使用它们,并且选项是使用它们编写CSS,然后使用PostCSS插件将逻辑属性和值转换为它们的物理对应物。Jonathan Neal的这个插件涵盖了我在本文中描述的所有属性和值。

即使您现在决定不使用这些属性,了解它们的工作方式也是使用新布局的关键理解。将Grid或Flex布局描述为具有起始和结束线,考虑块和内联维度,这些将使得更容易理解布局的工作原理。

进一步阅读

文章来源:https://www.smashingmagazine.com

赞(0) 打赏
未经允许不得转载:W3Cbest前端开发>学习了解CSS逻辑属性和值(CSS Logical Properties and Values)

相关推荐

发表评论