用于浮动和定位的逻辑属性

逻辑属性与逻辑值规范包含了 floatclear 的实体值的逻辑对应关系,以及用于定位布局的定位属性的逻辑对应关系。本指南介绍如何使用这些对应关系。

属性的和值的对应关系

下表详列了本指南所论述的属性和值,以及其实体对应关系。假设书写模式(writing-mode)为横排,行内方向为从左到右。

逻辑属性或逻辑值 实体属性或实体值
float: inline-start float: left
float: inline-end float: right
clear: inline-start clear: left
clear: inline-end clear: right
inset-inline-start left
inset-inline-end right
inset-block-start top
inset-block-end bottom
text-align: start text-align: left
text-align: end text-align: right

除了这些有对应关系的属性,另有可以处理块向和行向尺度的简写属性。除 inset 属性外,这些属性没有与实体属性的对应关系。

逻辑属性 用途
inset-inline 为行向尺度同时设置上述两个偏移值。
inset-block 为块向尺度同时设置上述两个偏移值。
inset 同时设置四个偏移值,多值语法使用实体对应关系。

浮动和清除浮动的示例

floatclear 属性所用的实体值为 leftrightboth。逻辑属性规范定义 inline-startinline-end 值对应于 leftright

在下面的例子里,我有两个盒子——第一个用 float: left 设置了浮动,第二个用了 float: inline-start。如果把 writing-mode 改成 vertical-rl 或者把 direction 改成 rtl,你会看到浮动到左侧的盒子总是贴在左侧,而浮动到 inline-start 的元素随着 directionwriting-mode 变动。

示例:定位布局的偏移属性

定位通常可以让我们相对于元素的包含块放置元素——我们就是参照元素在正常流里的位置给元素设置偏移。过去我们用实体属性 toprightbottomleft 做这件事。

这些属性的取值是长度或百分比,而且参照的是用户屏幕的尺度。

逻辑属性规范创造了新的属性,你可以用来在你的书写模式里参照文本的流向定位。这些属性有:inset-block-startinset-block-endinset-inline-startinset-inline-end

在下面的例子里,带灰色点状边框的区域设置了 position: relative。为了在这个区域里用绝对定位放置蓝色盒子,我用了 inset-block-startinset-inline-end 属性。把 writing-mode 属性改成 vertical-rl,或者加上 direction: rtl,看看相对于流的盒子是怎么根据文本方向保持位置的。

新的二值和四值简写属性

和规范里的其他属性一样,我们也有新的简写属性可以同时设置两个或者四个值。

  • inset——使用实体对应关系同时设置四边。
  • inset-inline——设置两个逻辑行向偏移。
  • inset-block——设置两个逻辑块向偏移。

示例:text-align 的逻辑值

text-align 属性有参照文本方向的逻辑值——我们可以不用 leftright 而用 startend。在下面的例子里,我在第一个块里设置了 text-align: right,在第二个里设置了 text-align: end

如果把 direction 改成 rtl,你会看到第一个块还是右对齐的,但是第二个跑到了在左边的逻辑行末。

相比用实体方向对齐,在使用盒对齐的时候用首和末得到的效果更一致。