CSS逻辑属性的完整指南，并带有备忘单

在本文中，我们将研究CSS逻辑属性。我们将查看它们是什么，工作方式以及它们的用处。我们还将提供一个方便的备忘单，以便您可以轻松地将CSS逻辑属性与它们的物理等效物进行比较。

>即使您选择自己不使用逻辑属性，也是一个熟悉它们的好主意，因为它们开始出现在越来越多的网站和在线演示的代码中。

> 例如，您可能会遇到这个：

>除非您熟悉CSS逻辑属性，否则这可能对您意义不大。如果您继续阅读，您将很快成为逻辑属性忍者！

<span>p {
</span>  <span>margin-block-start: 1em;
</span><span>}
</span>

>下载我们方便的逻辑属性PDF备忘单。

钥匙要点

> css逻辑属性提供了一种新的声明属性的方式，例如宽度，高度，填充，边缘和边框，基于文本的方向而不是计算机屏幕的物理尺寸。 逻辑属性适用于文本方向的变化，使其对于具有多种语言版本的网站特别有用。它们还为单语网站提供了优势，例如由于媒体或容器查询而引起的文本方向变化的适应性。

>

> css逻辑属性包括大小，边距，填充，插图（位置元素），边界，边界半径，浮动和清除，文本对齐，调整大小，溢出和超越行为的变化。这些属性中的每一个都具有适应文本方向的逻辑等效。 可以在HTML和CSS中指定文本方向。在HTML中，可以使用DIR属性设置它，在CSS中，可以使用方向属性进行设置。对于垂直文本，可以使用CSS中的写作模式属性。
• >
浏览器对CSS逻辑属性的支持在2020年代初期已迅速发展，现在它们在主要浏览器中得到了强有力的支持。但是，对于较旧的浏览器，可能有必要同时声明逻辑和物理属性。
• >
• 什么是逻辑属性？
• 逻辑属性提供了一种新的方式来声明宽度和高度，填充，边缘，边框，边框半径，位置，浮点，文本对齐和溢出等属性。传统上，这些属性是根据计算机屏幕的物理维度（左，右，顶部和底部）声明的。逻辑属性取决于文本的
>。

某些语言从左到右运行，例如英语。其他人则像阿拉伯语一样从右到左行。其他有时会从上到下跑步，例如日语。许多网站都有多种不同语言的版本，例如英语，阿拉伯语和中文的新闻网站，或半岛电视台的英语，阿拉伯语和中文网站。

链接到文本方向的样式具有许多优势，因为它们可以适应文本方向的变化，从而适用于网站的所有版本。
了解文本方向
要更好地掌握逻辑属性的目的，我们确实需要了解一些有关文本方向的事情。

>

我们可以在HTML和CSS中指定文本的方向。

> html具有dir属性，该属性指定文本是否从页面上从左到右运行（dir =“ ltr”），右至左（dir =“ rtl”），还是浏览器是否应自行构成自己的思想根据所使用的语言（dir =“ auto”）。 DIR属性可以应用于整个文档（如果整个文档使用相同的语言）或单个元素。

而不是在HTML中使用DIR属性，我们可以在CSS中使用方向属性。要指定从左到右的文本，请使用方向：LTR和左文本，请使用方向：RTL。
>我们是在HTML还是CSS中设置文本方向并不重要，尽管通常建议我们在HTML中使用DIR属性，因为这可以确保文本即使我们的样式出现问题，也可以在正确的方向上运行表。
>我们还可以使用CSS来指定文本从上到下运行。对于从左到右运行的垂直文本，我们使用写作模式：垂直LR，对于从右到左运行的垂直文本，我们使用写作模式：垂直rl。 （垂直文本没有DIR选项。）

> 在本文中，我们将研究一系列比较物理和逻辑CSS属性效果的演示。这些演示将使用由表情符号组成的段落来说明文本的方向 - 一种通用语言！

在下面的笔中，我们有四个包含表情符号句子的盒子。第一个设置为dir =“ ltr”（浏览器默认值），第二个是dir =“ rtl”，第三个对写作模式：vertical-lr，第四台对写作模式：vertical-rl。

看到笔 逻辑属性：通过sitepoint（@sitepoint）的文本方向 在Codepen上。

在此演示中，您可以看到文本方向设置如何影响段落中字符的顺序。

>>旁边：查看上面演示中的行如何很好地排列？这要归功于CSS网格中新的子网格值。我们在最近的快速提示中介绍了如何将行与subgrid排成一行。

>

了解CSS

中的内联块和内联 随着CSS的成长和发展，

的重点少于向左，右，上下屏幕上的事物，而更多地关注内容流。例如，您可能熟悉Flexbox中的主轴和横轴，它们会根据文本流的方向而变化，网格内容的方向也是如此。

> CSS块和内联属性由文本方向确定。在下图中，块和内联方向取决于文本的方向。

对于一个从左到右运行的段落，像这样的段落，内联方向是向左/向右的，并且块方向向上/向上。逻辑属性是根据块和内联维度设置的，随着文本方向的变化，它们会自动互换。这使它们比物理特性更具适应性。

>

内联开始和结束是由文本启动和结束的位置，以及沿块方向的启动和结尾确定的。

仅适用于多语言站点的逻辑属性？

> 逻辑属性对所有网站都有用。在很多情况下，单语言网站可能会从使用逻辑属性中受益。 例如，在使用媒体或容器查询时，您可能会发现自己更改元素的文本方向。想象一个带有左红边框的标题。在小屏幕上，标题可能是水平的，在以下段落之上。在宽屏幕上，您可能会将标题设置为垂直显示。下图显示了如果您使用边框左侧将发生什么：标题上的5px固体红色。

>一旦标题垂直显示，左边框就停留在左侧，当我们很可能在文本开始时想要它。使用逻辑属性，我们可以指定红色边框出现在标题的内联启动（边界内线启动），无论它指向哪个方向，都会产生下图所示的结果。



（您可以在Codepen上查看此演示的现场演示。）

这表明，使用逻辑属性，我们的布局如何更适合更改，而不必为不同方案添加额外的CSS。

除此之外，我们还将看到逻辑属性提供了许多有用的速记，这些速记有助于使CSS编码更有效，无论是否使用多种语言。

>尺寸（宽度和高度尺寸）

基于物理屏幕的

而不是宽度和高度，逻辑属性使用内联尺寸和块大小。为了决定要设置宽度和高度的哪个，我们必须知道文本将介绍什么方向。

> 在下面的演示中，第一行中的段落的大小为80px。在每种情况下，将80px设置在块方向上，无论是哪个。
将其与第二行段落进行比较，该段落将每个段落设置为高度：80px。在每种情况下，高度均与屏幕相关。
看到笔 逻辑属性：sitepoint（@sitepoint）的大小（宽度和高度） 在Codepen上。
其他尺寸属性包括：
最大inline-size
> mininline-size
> max-block-size
> min-block-size
>

>有关所有尺寸选项，请参见备忘单，以及如何在每个文本方向上使用它们，以及浏览器支持信息。 边距

使用逻辑属性，设置了边缘的边距和边缘块的变化。
对于从左到右的语言，保证金 - 内线启动：40px将在文本开始时（在屏幕左侧）应用边距。当应用于左右语言时，该边距将出现在屏幕右侧。对于垂直文本，边距将出现在顶部，如下演示所示。

比较在第一行中应用于每个段落的边距 - 内线启动的效果与边距左：40px在下面的演示中的第二行中应用于每个段落。

>

看到笔 逻辑属性：通过SitePoint（@SitePoint）的边距 在Codepen上。

其他保证金属性包括：

>保证金 - 内线 - 末端
>边缘块启动
• >边缘块 - 端
• 边距 - inline
• 边缘块
请注意，保证金内线可以用作边缘左和边缘权利的速记，在许多情况下非常方便 - 例如边距内线：自动。
• >
>有关所有保证金选项和浏览器支持信息。
padding
使用逻辑属性，将填充设置为带有填充和填充块的变化。

对于从左到右的语言，填充块启动：40px将在文本顶部（屏幕顶部）应用填充物。当应用于左右语言时，该填充物也将出现在屏幕顶部。对于垂直文本，填充将根据其水平方向出现在左侧或右侧。

将第一行中填充块启动的效果与填充顶点：40px在下面的演示中的第二行中应用于每个段落。

看到笔 逻辑属性：通过SitePoint（@SitePoint）填充 在Codepen上。

其他填充属性包括：

>填充 - 启动
• >填充 - 末端
• > padding-block-end
• >填充
• >填充
请注意，填充线可以用作填充和填充权的速记。

>

>在每个文本方向上所有填充选项，以及浏览器支持详细信息。

插图（位置元素） 您是否遇到了非常方便的插图？它用于定位元素（例如您使用位置时：绝对）。例如，插图：0是顶部的速记：0;右：0;底部：0;左：0;。

>让我们在表情符号演示中尝试一下。包含的div设置为位置：相对和段落设置为位置：绝对。第一行中的段落设置为iNSET-block-end：30px，而第二行中的段落则将其设置为底部：30px。

看到笔 逻辑属性：插入站点点（@sitepoint） 在Codepen上。

插图的其他属性包括：

> inset-block-start
> inset-block
• >插图 - 内线启动
• > inset-inline-end
• 插图inline
请注意方便的速记插图块和插图内线，只能在两个方向上使用。 （插图：20px等于插图：20px auto。请参阅此处的简单演示。
• >查看插图属性的完整列表及其如何与作弊表中的文本方向一起工作。
边界
>我们可以将边框设置为带有边框速记的元素，例如边框：5px实心红色。但是，如果我们只是想对元素的特定方面进行样式

，我们突然要处理边界，边界底，边界左侧和边界权利，为此有逻辑上的等效物。 >

>边界的参与程度更高，因为它们涉及三个值 - 宽度（边界的厚度），样式（固体，虚线等）和颜色。

>

>让我们看看当我们应用边界启动时会发生什么：5px固体红色到我们的段落中，并将其与边界左侧进行比较：5px固体红色;。

看到笔 逻辑属性：边境由站点点（@sitepoint） 在Codepen上。

边界的其他逻辑属性包括：

• 边界内线 - 末端
• >边界块启动
• >边界块 - 端
• 边界内线
• 边界块

请注意，边界是边界的一个不错的速记：从左到右流的左右边界，边界封口和边界底部和边界底。>我们可以进一步深入到边框逻辑属性，以仅针对一个值。对于宽度，我们有这些：

边界块启动宽度
边界块 - 末端
>边框宽度
边界 - 内线启动宽度
边界内线 - 末端
>边界宽宽
对于样式，我们有这些：
边界块启动风格
边框式末端
边界块风格
边界启动式
边框内线 - 末端
>边框内线风格
对于颜色，我们有这些：
边界块启动色
边界块 - 末端
>边界块色
边界 - 内线启动色
边界内线 - 末端
边界内线
>

在适用于每个文本方向时的所有组合和排列的备忘单 边界半径

>我们可以将边界半径设置为带有边界拉迪乌斯属性的元素的所有角落。如果我们针对具有物理特性的单个角落，则首先考虑它是在元素的顶部还是底部，然后是在元素的左侧还是右侧。因此，左上角用边框 - 左边 - 拉迪乌斯指定。

>

设置带有逻辑属性的边框半径时，我们需要考虑块[start/end] inline [start-end]。

也就是说，要选择特定角落的合适属性，您必须问自己是否处于元素块方向的开头或结束中间的选项：

<span>p {
</span>  <span>margin-block-start: 1em;
</span><span>}
</span>

在以下演示的第一行中，我们将在块开始时将边界半径为20px，并使用Border-witch-Start-Start-Start-Radius设置了边界半径。将其与第二排中边界左边拉迪乌斯进行比较。

>

看到笔 逻辑属性：sitepoint（@sitepoint）的边界半径 在Codepen上。
>这里没有任何特殊的速记，因此，如果您想绕两个角落，您必须做这样的事情：

-start-start-
-end-start-
-start-end-
-end-end-

哦！ （请参阅此处的演示。）

> 有关所有边界半径选项和浏览器支持信息，请参见备忘单。边界半径逻辑属性需要更长的时间才能由浏览器支持，但是现在的支持在现代浏览器中是好的。

浮动和清除

浮动和清除的逻辑属性为如何浮动和清除元素提供了新的选项。在逻辑属性之前，唯一的选项是浮动：左和浮动：右，清除：左和清除：右。如果文本是垂直的，则无法选择沿与文本相同的方向浮动。> >具有逻辑属性，浮动和清除现在可以针对文本的直列流进行专门进行，这要归功于内联启动和内联末端。

在下面的演示中，与第二行中剩下的物理值相比，跨度元素在逻辑值内启动。

看到笔 逻辑属性：通过SitePoint（@SitePoint）浮动 在Codepen上。

内联启动和内联末端值也适用于清除属性。 （这是一个编号的演示。）

>

>不需要逻辑替代方案。

>文本对齐
>我们已经拥有诸如左，右，中间和正当的文本对齐值。现在还添加了两个逻辑值：开始和结束。它们可用于沿着线轴对齐文本，无论它沿着哪个方向运行。 在下面的演示中，第一行中的段落已设置为文本合格：end。如您所见，表情符号都被推到内联轴的尽头。

看到笔 逻辑属性：按SitePoint（@sitepoint）按文本对齐 在Codepen上。

备忘单显示了如何应用启动和结束值以与各种文本方向使用。

调整大小

调整大小属性允许在指定的方向上调整某些元素的大小，现在有内联和块选项。

下面的演示显示了调整大小之间的差异：内联和调整大小：水平。 （每个盒子的右下角都有一个小的调整大小。

看到笔 逻辑属性：按SitePoint（@SitePoint）调整大小 在Codepen上。

（在上面的演示中，左右框的调整大小有点疯狂，因为dir =“ rtl”不是应用于整个文档，而是仅应用于包含的div。

溢出
溢出X和Overflow-y的物理属性现在具有溢出内线和溢流块的逻辑补充。

>

请注意，在撰写本文时（2024年4月），这些新属性几乎没有支持

croll-behavior

croll-Behavior属性是一种新的属性，可完善元素滚动的溢出。我们不会在这里深入研究，但是您可以在MDN上阅读更多信息。>

可以说这些属性和物理属性都有逻辑版本。例如，可以用超越行为的内线来代替左右语言的超越行为X，依此类推。 （有关示例的完整列表，请参见备忘单。）

>

>浏览器支持

在2020年代初期，对CSS逻辑属性的浏览器支持迅速提高，现在在主要浏览器中得到了强有力的逻辑属性。

>逻辑属性具有与物理对应物相同的重量，因此，如果您担心较旧浏览器的经验，则可以声明两个值，例如：

>

较旧的浏览器将使用第一个声明，而较新的浏览器将使用第二个声明。 但是，在整个样式表中都可以重复这样的代码，因此，如果您真的担心较旧的浏览器，也许现在就可以轻松地在逻辑属性上进行。

>

caniuse具有逻辑属性支持的概述，备忘单中的每个部分还具有支持特定属性的链接。

结论

在本文中，我们介绍了当前可用的每个逻辑属性几乎。 （如果要走得更远，也可以查看字幕侧的逻辑属性和尺寸的限制。）>

如果没有别的，那么即使您现在选择不使用它们，也值得了解什么是逻辑属性以及如何使用它们。至少您将了解现在在网络上出现的新的CSS逻辑属性代码。

> 即使您不在多语言网站上工作，

逻辑属性也确实会带来好处。各种速记（如Margin-Inline）非常有用，并且是您套件中拥有的不错的工具。
>如果您已经阅读了本文，则应能够识别出逻辑属性的出现。 （请注意这些块和直列关键字！）希望您也有足够的信心在CSS中偶尔使用它们 - 除非您受到了启发，否

不要忘记下载我们方便的逻辑属性PDF备忘单。

以上是CSS逻辑属性的完整指南，并带有备忘单的详细内容。更多信息请关注PHP中文网其他相关文章！