CSS的逻辑属性对盒模型带来的变化

发布于 大漠

在《理解CSS的逻辑属性和值》一文中,我们对CSS逻辑属性和值(CSS Logical Properties and Values Level 1)有所了解。事实上对于广大前端开发者而言,自从Web诞生以来,就习惯了使用用物理CSS属性。比如上、右、下和左,映射到CSS的盒模型就是marginpaddingbordertoprightbottomleft设置元素。但随着CSS的书写模式特性的出现,的概念在某种程度上已经失去了其意义。

为什么这么说呢?来举个例子。

假设你的网站上的内容是从右到左(dir:rtl)排列(比如说一个阿拉伯语种的网站),此时你的左边可能是物理上的右边。因此,如果你使用margin-left: 100px来设置在间距,就需要使用margin-right: 100px来替代,否则出现的效果刚好是你意想的相反。

但有的时候你的网站可能是既有从左到右(ltr)和从右到左(rtl)混合排版的内容,那么就需要根据不同的情况设置*-left*-right的值。如果你的排版中还混合有垂直排版的模式,那么问题就会变得更为复杂,因为内容是物理的顶部或底部。

CSS的逻辑属性规范的出现将从此改变这一现状,它定义了一组逻辑(而不是物理)属性和值,主要用来防止上述提到的相关问题。因此,当你想设置内容的方向和书写模式无关的话,可以采用margin-left:100px这样的方式,反之你就可以使用逻辑属性margin-inline-start: 100px,这样可以让整个排版变得更为智能。《理解CSS的逻辑属性和值》一文中就详细的介绍了这方面的特性和应用(你可以阅读@Rachel Andrew写的原文)。比如下图所示的一个效果:

文章开头也提到过,广大的前端开发者,大部分情况下只熟悉物理属性,而对逻辑属性相关的并不太清楚。这也引发了一个新问题。逻辑属性的出现,对于我们已经熟悉的CSS的盒模型又有何不同呢?或者说,CSS逻辑属性的出现,对CSS的盒模型又将带来什么样的变化呢?这也就是我们今天需要了解和深入探究的。如果你感兴趣的话,欢迎继续往下阅读。

回忆CSS的盒模型

既然我们要聊CSS的盒模型,那么我们就很有必要的先快速的回忆CSS中盒模型相关的概念和特性。

CSS规范中把盒模型单独的列为一个模块来进行维护,现在已经进入到了Level 3的时代(CSS Box Model Module Level 3)。

CSS合模型是一组规则的集合。主要用于确定Web页面中每个元素的尺寸。

CSS中的每个元素都可以比作是一个盒子(Box)。

既然元素是一个盒子,那么我们就可以通过CSS属性(物理属性)来决定盒子的大小。而决定盒子的尺寸大小主要由四个属性来决定:

  • Content:元素中的文本、图像或其他媒体内容
  • padding:盒子内容和边框之间的空间
  • border:盒子的边框
  • margin:盒子与其他盒子之间的距离

如果我们用一张图来描述的话,可以类似下面这样的:

总之,上面提到的几个属性就是浏览器渲染元素盒子所需要的一切。内容是你在HTML中编写的内容,其余部分纯粹是展示性的,主要由CSS规则来决定的。而且对于CSSer来说,都喜欢用下图来阐述元素的盒模型:

而在浏览器调试器中“Computed”可以看到它是怎么来解释一个元素的盒模型:

拿个简单的示例来展示:

.box {
    width: 200px;
    height: 200px;
    background-color: darkviolet;
    border: 5px solid hotpink;
    padding: 25px;
    margin: 20px;
}

.box对应的盒子如下图所示:

上面聊到的是我们最早接触到的CSS盒模型,自从CSS Intrinsic & Extrinsic Sizing Module Level 3规范的出现, 其中的box-sizing属性可以帮助我们更好的控制盒子的大小:

用个实例来解释,下图可以更为明了:

有关于盒模型更多的内容可以阅读下面的相关资料:

CSS逻辑属性对盒模型带来新的思考

正如上面所述,前端开发者讨论盒模型的时候,都习惯使用下图来阐述它:

不管是以前,还是现在,以上图来阐述CSS盒模型的概念都不存在任何的错误。不同的是,上图我们围绕的还是以物理特性来进行阐述,但随着CSS的逻辑属性的出现,或许这也是最后一天来来阐述盒模型。或许哪一天面试官问你如何阐述盒模型时,要是你再使用上图来进行阐述的话,可能就要开始丢分了。因为逻辑属性的介入,我们应该开始停止物理物性*-top*-right*-bottom*-left来阐述,而应该改用*-inline-start*-inline-end*-block-start*-block-end来重新定义盒模型。用图来阐述的话,应该类似下图这样:

在了解上图每个属性的具体含义之前,我们有几个概念需要先做一个简单的了解。

首先,让我们了解Web页面的两个方向(两个轴)。您应该记住,页面上有两个垂直的轴(x轴和y轴),页面上的内容沿着他们进行排版。其中一个轴是内联轴,它是每行文本动行的轴。默认情况下,在Web页面上,如果不指定任何书写模式,内联轴是水平的,从左到右(书写模式对其会有一定的影响,后续会提到)。另一个轴是块轴,块轴是沿着这个轴堆积。同样,默认情况下,这个轴是垂直的,从上到下。如下图所示:

  • 内联轴(Inline axis):拿英文网站为例。阅读方向是从左到右。好比多个内联元素一样,从左向右一次排开,也类似于在块元素中使用display:inline。每一项都出现在同一行
  • 块轴(Block axis):大家应该都知道,对于块元素不做任何的处理的话,他的排列顺序是将从上到下依次堆积在一起。好比对内联元素采用了display:block

其实这两个概念理解起来比较费劲。大家是否记得在Flexbox布局中,我们有一个主轴和侧轴一说,如下图所示:

在书写模式默认情况之下,我们的内联轴好比主轴,而块轴好比侧轴。事实上,这两个概念如果我们运用到网格布局中来就更易于理解。因为在网格布局中,我们总是使用块和内联轴,所以下面的示例都将使用网格来写案例。

块维度对应于在页面上布局块的顺序。比如你页面中的文本内容,每一段都在另一段下面排列,这些排列的方向是块的维度,所以在网格布局中,这是块轴(Block Axis)。在CSS网格布局中,块轴也称为行轴,这就是为什么块轴属性是grid-row-startgrid-row-end

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

前面也提到过了,内联轴和块轴和书写模式有较大的关联,书写模式不同时,内联内和块轴会随之改变。还是拿网格中的布局来举例:

这两个概念除了在逻辑属性中很有作用,在CSS Box Alignment Module Level 3也有很大的作用。比如在Grid和Flexbox布局中,元素的对齐方面就很有意义:

回到逻辑属性中。对于内联轴中的padding-inline-start在不同的语言中对应的padding方向是不一样的,比如:

  • 英文网站:padding-inline-start = padding-left
  • 阿拉伯语网站:padding-inline-start = padding-right
  • 日文网站:padding-inline-start = padding-top

而在块轴中padding-block-start对于的padding也会有不同,比如:

  • 英文和阿拉伯语网站: padding-block-start = padding-top
  • 日文网站: padding-block-start = padding-right

如此一来,根据不同的语种,盒模型中的marginborderpadding对于的内联轴和块轴也不一样。拿英文网站来说:

margin

  • margin-block-start = margin-top
  • margin-block-end = margin-bottom
  • margin-inline-start = margin-left
  • margin-inline-end = margin-right

padding

  • padding-block-start = padding-top
  • padding-block-end = padding-bottom
  • padding-inline-start = padding-left
  • padding-inline-end = padding-right

border

  • border-block-start = border-top
  • border-block-end = border-bottom
  • border-inline-start = border-left
  • border-inline-end = border-right

逻辑尺寸

从前面的图可以看出,平时大家熟悉的widthheight也将被inline-sizeblock-size取替。

一旦我们理解了内联和块轴的概念,就更容易理解逻辑尺寸。比如在英文网站中,inline-size替换了widthblock-size将替换height

简单地说:

  • block-size:定义一个元素块的水平或垂直方向的尺寸,这主要取决于它的书写模式。如果书写模式是垂直方向的,则block-size与元素的width有关,否则,它与元素的height有关。
  • inline-size:定义一个元素的块的水平或垂直尺寸,这取决于它的书写模式。其对应于任一widthheight属性,这取决于的值writing-mode。如果写作模式是垂直定向的,则inline-size与元素的height有关;否则,则与元素的width有关。

比如英文或阿拉伯语网站:

  • width = inline-size
  • height = block-size

而在日文网站中:

  • height = inline-size
  • width = block-size

在我们的理解中,除了widthheight之外,还有min-widthmax-widthmin-heightmax-height一说。那么在inline-sizeblock-size中同样存在,相应的也是在其前面添加minmax。比如:min-inline-size: 100pxmax-block-size: 100px

如果将CSS逻辑属性引入进来,我们的盒模型的说法就变了。下图是以前的盒模型和新的盒模型的对比:

既然盒模型变了,那么我们以前的很多东西都将会带来变化,比如我们以前的position属性,是通过toprightbottomleft来控制一个定位元素的位置。在逻辑属性中,我们将依次使用inset-block-startinset-inline-endinset-block-endinset-inline-start替代(当然和书写模式也是有很大关联的,这里默认是水平书写模式ltr)。

上图对应的是我们平时最为常见的书写模式,比如英文网站的ltr书写模式。

那我们写position的时候可能就会由下面这种方式转换为另一种方式

/* 老的方式 */
.popup{
    position:fixed;  
    top:130px;
    bottom:130px;
    left:130px;
    right:130px;
}
/* 新的方式 */
.popup{
    position:fixed;
    inset-block-start:130px;  /* top */
    inset-block-end:130px;    /* bottom */
    inset-inline-start:130px; /* left */
    inset-inline-end:130px;   /* right */
}

对于inset-*相关的属性也可以像border这样的属性一样简写:

.popup{
    position:fixed;
    inset:130px 130px 130px 130px;   /* top, right, bottom, left */
}

大家可能也应该会想到,在CSS中还有一些和方向属性有关,比如floattext-alignresize等。那么引入CSS逻辑属性之后,这些也将都会得到相应的变化:

float

  • float: left = float: inline-start
  • float: right = float: inline-end

text-algin

  • text-align: left = text-align: start
  • text-align: right = text-align: end

resize

  • resize: horizontal = resize: inline
  • resize: vertical = resize: block

注意,上述列的都是书写模式为ltr的方式。如果书写模式做出相应的变化,那么最终的值也将会做出相应变化。

总结

起初,CSS的逻辑属性似乎给我们的工作带来更多的麻烦和复杂度,但事实上它们却很容易,使用也简单。在写样式的时候,不需要担心跨语言的问题。我们只需要使用CSS的逻辑属性,就可以更轻易的匹配到相应的语言网站中。而不会像物理属性一样,针对不同的语言网站需要做出相应的调整。好比阿拉伯语网站,距左的距离反而要用margin-right来设置。

当然,CSS的逻辑属性的出现,也让开发者面临新的问题。比如:margin: 10px 20px 30px 40px,开发者将无法预测它将如何被渲染。如果是英文网站,这些物理属性将会正常被解释为margin-top: 10pxmargin-right: 20pxmargin-bottom:; 30pxmargin-left: 40px。但如查网站使用的是新的逻辑属性,其值应该对应的是margin-block-start: 10pxmargin-inline-end: 20pxmargin-block-end: 30pxmargin-inline-start: 40px。从前面的的内容中我们可以了解到,在英文网站中如果书写模式是默认的ltr,那么我们以前所掌握的物理属性和逻辑属性是相同的。然而,在其他语言中,比如阿拉伯语或者日语网站中,当我们写简写的物性属性,比如margin,那么实际渲染出来的效果就需要根据书写模式来定了。反之,如果我们不使用物理属性,直接使用逻辑属性,就不会有这么的痛苦的事情,也不需要去担心渲染出来的结果和我们意想的不一样。UA Air Jordan 1 Pinnacle Pinnacle White, Metallic Gold