理解CSS的逻辑属性和值

特别声明,文本根据@Rachel Andrew的《Understanding Logical Properties And Values》一文所整理。

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逻辑属性和值还没有得到完全的支持,但了解他们可以帮助我们更好地理解CSS布局以及书写模式的交互。

在过去,CSS属性运用于物理维度(尺寸)和方向,将元素的位置映射到leftrighttopbottom。使用float可以让一个元素向左或向右浮动,可以使用positiontoprightbottomleft定位元素的偏移量。使用比如margin-toppadding-top来设置marginpaddingborder的值。这些特理属性和值在toprightbottomleft和书写模式有很大的关系,书写模式可以直接改变其方向。比如:

  • 当书写模式directionltr(从左向右)时,margin-left会让该元素距其左侧元素有多少间距(paddingborder类似)
  • 当书写模式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

如果你想深入了解网格区域(grid-area)更详细的内容,可以阅读《网格区域》一文,有关于Grid 布局更多的内容可以点击这里进行了解

这里有两个关键词*-start*-end,而我们以前接触的CSS属性,比如marginpaddin

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/understanding-logical-properties-values.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部