用CSS偏移围绕元素定位文本

CSS 提供多种方法来定位页面元素，包括文本，例如 position 属性及其对应的 inset-* 属性、translate、margin、anchor()（目前浏览器支持有限）等等。offset 属性是另一种选择。

offset 属性通常用于沿预定路径为元素创建动画。例如，以下示例中的正方形沿圆形路径移动：

<div>
  <div></div>
</div>

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* 等同于：
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* 其他样式 */
}

.circle:hover .square{ --p: 100%; }</percentage>

一个注册的 CSS 自定义属性 (--p) 用于设置和动画化正方形元素的 offset-distance。动画之所以可行，是因为可以使用 offset 将元素定位在给定路径上的任意点。你可能不知道，offset 是一个简写属性，由以下组成属性构成：

• offset-position: 路径的起点
• offset-path: 元素可以沿其移动的形状
• offset-distance: 元素沿路径移动的距离
• offset-rotate: 元素相对于其锚点和偏移路径的旋转角度
• offset-anchor: 与路径对齐的元素内的位置

offset-path 属性对于我们想要实现的目标至关重要。它接受形状值——包括 SVG 形状或 CSS 形状函数——以及容器元素的参考框来创建路径。

参考框？这些是根据 CSS 盒模型确定的元素尺寸，包括 content-box、padding-box、border-box，以及 SVG 上下文，例如 view-box、fill-box 和 stroke-box。它们简化了我们在容器元素边缘沿路径定位元素的方式。以下是一个示例：下面所有的小正方形都放置在其容器元素 content-box 的默认左上角。相反，小圆圈分别位于 content-box、border-box 和 padding-box 的右上角（容器元素正方形周长的 25%）。

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

.small {
  /* 其他样式 */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* 其他样式 */
  contain: layout; /* (或 position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

注意： 如果你不想在包含父元素内为元素分配空间，你可以分离元素的 offset-positioned 布局上下文。这就是我在上面的示例中所采用的方法，以便内部的段落文本可以紧贴边缘。因此，offset 定位的元素（小正方形和圆圈）使用 position: absolute 获得它们自己的上下文，这将它们从正常的文档流中移除。

这种相对于参考框进行定位的方法，使放置诸如通知点和装饰性丝带尖端之类的元素沿着某个 UI 模块的外围变得容易。它进一步简化了沿包含块边缘放置文本的方式，因为由于 offset-rotate，offset 也可以沿路径旋转元素。一个简单的示例显示了放置在块右边缘的文章日期：

<div>
  <div></div>
</div>

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
.square {
  offset: top 50% right 50% circle(50%) var(--p);
  transition: --p 1s linear;

  /* 等同于：
    offset-position: top 50% right 50%;
    offset-path: circle(50%);
    offset-distance: var(--p); */

  /* 其他样式 */
}

.circle:hover .square{ --p: 100%; }</percentage>

正如我们刚才看到的，将 offset 属性与参考框路径 和 容器单位一起使用效率更高——你可以轻松地根据包含元素的宽度或高度设置 offset-distance。我将在本文末尾的“进一步阅读”部分中包含有关学习更多关于容器查询和容器查询单位的参考资料。

在最后一个示例中还使用了 offset-anchor 属性。它提供元素位移和旋转的锚点——例如，示例中的 90 度旋转发生在元素的左下角。offset-anchor 属性还可以通过调整 inset-* 值来将元素从参考框向内或向外移动——例如，bottom -10px 参数将元素的底部边缘从其包含元素的 padding-box 向外拉。这增强了放置的精度，如下所示。

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

<div>
  <div></div>
  <div></div>
  <p>She sells sea shells by the seashore</p>
</div>

.small {
  /* 其他样式 */
  position: absolute;

  &.square {
    offset: content-box;
    border-radius: 4px;
  }

  &.circle { border-radius: 50%; }
}

.big {
  /* 其他样式 */
  contain: layout; /* (或 position: relative) */

  &:nth-of-type(1) {
    .circle { offset: content-box 25%; }
  }

  &:nth-of-type(2) {
    border: 20px solid rgb(170 232 251);
    .circle { offset: border-box 25%; }
  }

  &:nth-of-type(3) {
    padding: 20px;
    .circle { offset: padding-box 25%; }
  }
}

如文章开头所示，offset 定位是可动画的，这允许动态设计效果，例如：

<h1>The Irreplaceable Value of Human Decision-Making in the Age of AI</h1>

<div>Published on 11<sup>th</sup> Dec</div>
<cite>An excerpt from the HBR article</cite>

article {
  container-type: inline-size;
  /* 其他样式 */
}

.date {
  offset: padding-box 100cqw 90deg / left 0 bottom -10px;

  /*
    等同于：
    offset-path: padding-box;
    offset-distance: 100cqw; (容器元素宽度的 100%)
    offset-rotate: 90deg;
    offset-anchor: left 0 bottom -10px;
  */
}

总结

无论是用于图形设计（例如沿边框的文本）、文本注释，还是动态文本（例如错误消息），CSS offset 都是一个易于使用的选项。我们可以沿包含父元素的参考框定位元素，旋转它们，甚至根据需要添加动画。

进一步阅读

• CSS offset-path 属性: CSS-Tricks, MDN
• CSS offset-anchor 属性: CSS-Tricks, MDN
• 容器查询长度单位: CSS-Tricks, MDN
• @property at-rule: CSS-Tricks, web.dev
• CSS 盒模型: CSS-Tricks
• SVG 参考框: W3C

以上是用CSS偏移围绕元素定位文本的详细内容。更多信息请关注PHP中文网其他相关文章！