>即使您选择自己不使用逻辑属性，也是一个熟悉它们的好主意，因为它们开始出现在越来越多的网站和在线演示的代码中。
> 例如，您可能会遇到这个：
>除非您熟悉CSS逻辑属性，否则这可能对您意义不大。如果您继续阅读，您将很快成为逻辑属性忍者！
<span>p {
</span> <span>margin-block-start: 1em;
</span><span>}
</span>钥匙要点
某些语言从左到右运行，例如英语。其他人则像阿拉伯语一样从右到左行。其他有时会从上到下跑步，例如日语。许多网站都有多种不同语言的版本，例如英语，阿拉伯语和中文的新闻网站，或半岛电视台的英语，阿拉伯语和中文网站。
链接到文本方向的样式具有许多优势，因为它们可以适应文本方向的变化，从而适用于网站的所有版本。了解文本方向
>
我们可以在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排成一行。
>的重点少于向左，右，上下屏幕上的事物，而更多地关注内容流。例如，您可能熟悉Flexbox中的主轴和横轴，它们会根据文本流的方向而变化，网格内容的方向也是如此。
> CSS块和内联属性由文本方向确定。在下图中，块和内联方向取决于文本的方向。
对于一个从左到右运行的段落，像这样的段落，内联方向是向左/向右的，并且块方向向上/向上。
内联开始和结束是由文本启动和结束的位置，以及沿块方向的启动和结尾确定的。
仅适用于多语言站点的逻辑属性？
>
例如，在使用媒体或容器查询时，您可能会发现自己更改元素的文本方向。想象一个带有左红边框的标题。在小屏幕上，标题可能是水平的，在以下段落之上。在宽屏幕上，您可能会将标题设置为垂直显示。下图显示了如果您使用边框左侧将发生什么：标题上的5px固体红色。
>一旦标题垂直显示，左边框就停留在左侧，当我们很可能在文本开始时想要它。使用逻辑属性，我们可以指定红色边框出现在标题的内联启动（边界内线启动），无论它指向哪个方向，都会产生下图所示的结果。
这表明，使用逻辑属性，我们的布局如何更适合更改，而不必为不同方案添加额外的CSS。
除此之外，我们还将看到逻辑属性提供了许多有用的速记，这些速记有助于使CSS编码更有效，无论是否使用多种语言。而不是宽度和高度，逻辑属性使用内联尺寸和块大小。为了决定要设置宽度和高度的哪个，我们必须知道文本将介绍什么方向。
> 在下面的演示中，第一行中的段落的大小为80px。在每种情况下，将80px设置在块方向上，无论是哪个。将其与第二行段落进行比较，该段落将每个段落设置为高度：80px。在每种情况下，高度均与屏幕相关。
看到笔 逻辑属性：sitepoint（@sitepoint）的大小（宽度和高度） 在Codepen上。
其他尺寸属性包括：
>有关所有尺寸选项，请参见备忘单，以及如何在每个文本方向上使用它们，以及浏览器支持信息。 边距
使用逻辑属性，设置了边缘的边距和边缘块的变化。比较在第一行中应用于每个段落的边距 - 内线启动的效果与边距左：40px在下面的演示中的第二行中应用于每个段落。
>看到笔 逻辑属性：通过SitePoint（@SitePoint）的边距 在Codepen上。
其他保证金属性包括：
>保证金 - 内线 - 末端
>边缘块启动
使用逻辑属性，将填充设置为带有填充和填充块的变化。
对于从左到右的语言，填充块启动：40px将在文本顶部（屏幕顶部）应用填充物。当应用于左右语言时，该填充物也将出现在屏幕顶部。对于垂直文本，填充将根据其水平方向出现在左侧或右侧。
将第一行中填充块启动的效果与填充顶点：40px在下面的演示中的第二行中应用于每个段落。看到笔 逻辑属性：通过SitePoint（@SitePoint）填充 在Codepen上。
其他填充属性包括：
>填充 - 启动
>
>在每个文本方向上所有填充选项，以及浏览器支持详细信息。插图（位置元素） 您是否遇到了非常方便的插图？它用于定位元素（例如您使用位置时：绝对）。例如，插图：0是顶部的速记：0;右：0;底部：0;左：0;。
看到笔 逻辑属性：插入站点点（@sitepoint） 在Codepen上。
插图的其他属性包括：
> inset-block-start
> inset-block
>我们可以将边框设置为带有边框速记的元素，例如边框：5px实心红色。但是，如果我们只是想对元素的特定方面进行样式
，我们突然要处理边界，边界底，边界左侧和边界权利，为此有逻辑上的等效物。 >
>边界的参与程度更高，因为它们涉及三个值 - 宽度（边界的厚度），样式（固体，虚线等）和颜色。
>>让我们看看当我们应用边界启动时会发生什么：5px固体红色到我们的段落中，并将其与边界左侧进行比较：5px固体红色;。
看到笔 逻辑属性：边境由站点点（@sitepoint） 在Codepen上。
边界的其他逻辑属性包括：
请注意，边界是边界的一个不错的速记：从左到右流的左右边界，边界封口和边界底部和边界底。
在适用于每个文本方向时的所有组合和排列的备忘单
边界半径
也就是说，要选择特定角落的合适属性，您必须问自己是否处于元素块方向的开头或结束中间的选项： >
>
有关所有边界半径选项和浏览器支持信息，请参见备忘单。边界半径逻辑属性需要更长的时间才能由浏览器支持，但是现在的支持在现代浏览器中是好的。
浮动和清除的逻辑属性为如何浮动和清除元素提供了新的选项。在逻辑属性之前，唯一的选项是浮动：左和浮动：右，清除：左和清除：右。如果文本是垂直的，则无法选择沿与文本相同的方向浮动。 内联启动和内联末端值也适用于清除属性。 （这是一个编号的演示。） >不需要逻辑替代方案。
看到笔
逻辑属性：按SitePoint（@sitepoint）按文本对齐
在Codepen上。
备忘单显示了如何应用启动和结束值以与各种文本方向使用。 调整大小属性允许在指定的方向上调整某些元素的大小，现在有内联和块选项。
看到笔
逻辑属性：按SitePoint（@SitePoint）调整大小
在Codepen上。
（在上面的演示中，左右框的调整大小有点疯狂，因为dir =“ rtl”不是应用于整个文档，而是仅应用于包含的div。
请注意，在撰写本文时（2024年4月），这些新属性几乎没有支持
croll-Behavior属性是一种新的属性，可完善元素滚动的溢出。我们不会在这里深入研究，但是您可以在MDN上阅读更多信息。>
在2020年代初期，对CSS逻辑属性的浏览器支持迅速提高，现在在主要浏览器中得到了强有力的逻辑属性。
>
caniuse具有逻辑属性支持的概述，备忘单中的每个部分还具有支持特定属性的链接。 在本文中，我们介绍了当前可用的每个逻辑属性几乎。 （如果要走得更远，也可以查看字幕侧的逻辑属性和尺寸的限制。）>
>
即使您不在多语言网站上工作，
不要忘记下载我们方便的逻辑属性PDF备忘单。边界块启动宽度
对于样式，我们有这些：边界块启动风格
对于颜色，我们有这些：边界块启动色
>>
设置带有逻辑属性的边框半径时，我们需要考虑块[start/end] inline [start-end]。
<span>p {
</span> <span>margin-block-start: 1em;
</span><span>}
</span>-start-start-
-end-start-
-start-end-
-end-end-
看到笔
逻辑属性：通过SitePoint（@SitePoint）浮动
在Codepen上。
调整大小
>
>
>浏览器支持较旧的浏览器将使用第一个声明，而较新的浏览器将使用第二个声明。
但是，在整个样式表中都可以重复这样的代码，因此，如果您真的担心较旧的浏览器，也许现在就可以轻松地在逻辑属性上进行。
>
结论
以上是CSS逻辑属性的完整指南，并带有备忘单的详细内容。更多信息请关注PHP中文网其他相关文章！
