在本教程中，我们将学习如何使用inset逻辑属性定位元素。我们还将了解inset逻辑属性与top，bottom，left和right等物理属性的不同。

目录

• Table of Contents
• Understanding the koude6 property
• What are logical properties?
• Using the koude0 logical property to position an element
• koude0 logical property vs. physical properties
• Browser support
• Summary

了解position属性

浏览器使用position属性来确定如何在页面布局中定位元素。 position属性可以具有以下值：

• static-浏览器将根据正常流量将元素定位，并忽略与位置相关的任何属性，例如顶部，底部，左，右，Z-Index以及具有inset前缀的逻辑属性。 static是所有HTML元素的position属性的默认值。
• relative-根据其他相关属性，浏览器将将其与其正常位置相比的任何元素定位。另外，浏览器不会从正常流中删除组件。因此，该元素仍将在布局中占用相同数量的空间。
• fixed-浏览器将使元素与视口对齐，无论页面滚动如何，它都会使其在相同位置。该元素将不再在页面的常规布局流中。该位置是典型的导航组件，例如页脚，标头，导航栏等。
• absolute-浏览器将将元素相对于最近位置的祖先元素（不是静态），并将其从常规布局中删除。该位置对于模式，下拉，工具提示等组件很常见
• sticky-浏览器将根据用户的滚动位置定位元素。

在这些值中，只要没有额外的帮助属性，例如top，bottom等，relative就被认为是最接近static。因此，它是将任何absolute元素关注其父容器的最常见解决方案。

要了解inset逻辑属性在本教程中的工作方式，我们将position: absolute值用作我们的示例元素，而relative则为其父。但是首先，什么是逻辑属性？

什么是逻辑属性？

与基于物理的属性（例如垂直（顶部和底部）和水平（左右））不同，CSS根据内容流的方向或写作模式的运动（从左到右，右，右）引入逻辑属性 - 左或垂直）。逻辑属性使我们能够从逻辑上控制布局，并具有以下两个维度：

• 块尺寸 - 元素在水平写作模式和水平上的垂直维度。
• 内联维度 - 水平写作模式和垂直方向的元素的水平维度。

例如，在水平写作模式（拉丁文，英语等）中，块维度的开始和结尾是元素的顶部和底部，并且内联维度的开始和结尾是左侧和末端组件的权利分别。

接下来，让我们看看如何使用逻辑属性定位元素。

使用inset逻辑属性定位元素

我们可以使用inset逻辑属性来定义物理偏移用于使用以下语法的元素块和内联尺寸：

inset: <block-start> <inline-start> <block-end> <inline-end>;

inset逻辑属性是以下逻辑属性的速记：inset-block，inset-inline，inset-block-start，inset-block-end，inset-inline-start和inset-inline-end。

例如，将position: relative和position: absolute设置为父和子元素时，子元素的起始位置将与父元素相同，如下屏幕截图所示：

然后，我们可以将inset-block-start设置为20px，以使子元素位于父元素下方的20px：

另外，我们可以将百分比设置为inset-block-start的值。然后，浏览器将根据父高度计算位置偏移：

同样，我们也可以使用inset-inline-start水平定位元素，例如50%将元素设置在父元素的中心：

我们还可以使用inset-block和inset-inline分别设置块和内联尺寸的偏移：

.child {
    position: absolute;
    inset-inline: 50% -100%;
    inset-block: 50% -100%;
}

上面的代码将将孩子的宽度扩展到父母宽度的150％，并将其高度扩展到父母身高的150％。然后，浏览器将在两个维度上从父元素的中心开始定位子元素，如下所示：

，如果我们将inset-inline-end和inset-block-end设置为0%，则儿童元素将位于父元素的右下角：

就是这样。我们已经学习了如何使用inset逻辑属性定位元素。它与使用top，bottom，left和right之类的物理属性有何不同？让我们在下一部分中找出答案。

inset逻辑属性与物理属性

虽然inset-逻辑属性接受与物理属性相同的值格式，但浏览器将以不同的方式计算位置偏移，尤其是在不水准（从左到右）的写作模式下。例如，在使用top和left等物理属性时，在垂直写作模式（中文，日语等）或水平模式下，浏览器连续计算出父级左上角的偏移，如下：< /p>

• 水平写作模式

• 垂直写作模式

但是，当使用inset逻辑属性时，浏览器将从块尺寸的开始和内联尺寸开始计算偏移，从而导致不同的位置偏移，如下：

• 水平写作模式

• 垂直写作模式

也就是说，虽然了解其他物理属性并不直接，但是inset逻辑属性更灵活地使用，尤其是当我们想支持不同版式中的定位时。我们需要的只是一些学习和练习以适应它。

浏览器支持

在所有主要浏览器中都支持inset逻辑属性，因此您可以立即在项目中使用它们。

概括

此时，您应该对inset逻辑属性以及如何使用它们来定位元素有很好的了解。下一步是什么？尝试用项目中的inset逻辑属性替换任何物理属性，并查看其工作原理。或者，您可以探索其他逻辑属性，例如margin和padding，看看它们的工作原理。如果您有任何疑问，请随时在下面发表评论。

ð如果您想赶上我有时候，请在Twitter上关注我| Facebook。

ð通过我的新书Learning Vue了解Vue。早期版本现在可以使用！

喜欢这篇文章还是发现它有帮助？分享ðð¼ð