Positionieren Sie Text um Elemente mit CSS -Offseting

CSS bietet eine Vielzahl von Möglichkeiten, um Seitenelemente zu lokalisieren, einschließlich Text, z. B. position Attribute und deren entsprechende inset-* Attribute, translate, margin, anchor() (derzeit begrenzter Browserunterstützung) usw. offset Attribute sind eine weitere Option.

offset Attribute werden normalerweise verwendet, um Elemente entlang eines vorgegebenen Pfades zu animieren. Zum Beispiel bewegt sich das Quadrat im folgenden Beispiel entlang eines kreisförmigen Pfades:

<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>

Ein registriertes CSS -benutzerdefiniertes Attribut (--p) wird verwendet, um die quadratischen Elemente festzulegen und zu animieren. Animation funktioniert, weil offset-distance verwendet werden kann, um Elemente an einem bestimmten Pfad zu lokalisieren . Sie wissen möglicherweise nicht, dass offset ein Abkürzungsattribut ist, das aus den folgenden Attributen besteht: offset

• : Der Ausgangspunkt des Pfades offset-position
• : Die Form, in der sich ein Element entlang offset-path entlang bewegen kann
• : Der Abstand, den das Element entlang des Pfades offset-distance bewegt
• : Der Rotationswinkel eines Elements relativ zu seinem Ankerpunkt und seinem Offset -Pfad offset-rotate
• : Position innerhalb eines Elements, das mit dem Pfad ausgerichtet ist offset-anchor

Attribute sind entscheidend für das, was wir erreichen wollen. Es akzeptiert Formwerte - einschließlich SVG -Formen oder CSS -Formfunktionen - und Referenzboxen für Containerelemente, um Pfade zu erstellen.

offset-path Referenzrahmen? Dies sind Elementgrößen, die gemäß dem CSS -Box -Modell ermittelt wurden, einschließlich

,

, content-box und SVG -Kontexte wie padding-box, border-box und view-box. fill-box Sie vereinfachen, wie wir Elemente am Pfad an den Kanten von Containerelementen positionieren. stroke-box Folgendes ist ein Beispiel: Alle kleinen Quadrate unten sind in der Standard -obere linke Ecke ihres Containerelements platziert. Stattdessen befinden sich die kleinen Kreise in den oberen rechten Ecken von , content-box bzw. content-box (25% des Umfangs des Quadrats des Containerelements). border-box 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%; }
  }
}

Hinweis:

Wenn Sie keinen Platz für Elemente innerhalb des enthaltenden übergeordneten Elements zuweisen möchten, können Sie den Kontext Layout des Elements abnehmen. Dies ist die Methode, die ich in dem obigen Beispiel aufgenommen habe, damit der interne Absatztext nahe am Rand liegen kann. Daher verwenden positionierte Elemente (kleine Quadrate und Kreise) offset-positioned, um ihren eigenen Kontext zu erhalten, der sie aus dem normalen Dokumentstrom entfernt. offset

Diese Methode zur Positionierung des Referenzrahmens erleichtert es einfach, Elemente wie Benachrichtigungspunkte und dekorative Bandspitzen entlang der Peripherie eines bestimmten UI -Moduls zu platzieren. Es vereinfacht weiter, wie der Text entlang der Kante des Blocks platziert wird, da auch Elemente entlang des Pfades drehen kann. Ein einfaches Beispiel zeigt das Artikeldatum am rechten Rand des Blocks: offset-rotate offset

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

, wie wir gerade gesehen haben, verwendet

@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>

die

Eigenschaft mit dem Referenzrahmenpfad und offset Containereinheiten effizienter - Sie können einfach basierend auf der Breite oder Höhe des enthaltenen Elements einstellen. Ich werde weitere Referenzen zum Erlernen von Containerfragen und Containerabfragen in den Abschnitt "Weitere Lektüre" am Ende dieses Artikels einbeziehen. offset-distance Die Eigenschaft

wird auch im letzten Beispiel verwendet. Es liefert Ankerpunkte für die Elementverschiebung und -drehung-zum Beispiel die 90-Grad-Rotation im Beispiel in der unteren linken Ecke des Elements. Das Attribut

kann auch ein Element aus dem Referenzrahmen nach innen oder nach außen bewegen, indem der Wert offset-anchor eingestellt wird. Zum Beispiel zieht der Parameter offset-anchor die untere Kante des Elements nach außen aus dem inset-*, das das Element enthält. Dies verbessert die Genauigkeit der Platzierung, wie unten gezeigt. 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>

Wie zu Beginn des Artikels gezeigt, wird

.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%; }
  }
}

Positionierung animiert, was dynamische Designeffekte ermöglicht, wie z. B.

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>

Zusammenfassung

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;
  */
}

ob es sich um Grafikdesign (z. B. Text entlang der Grenzen), Textanmerkungen oder dynamischen Text (z. B. Fehlermeldungen) handelt, ist CSS

eine benutzerfreundliche Option. Wir können Elemente entlang des Referenzfelds finden, das die übergeordneten Elemente enthält, sie drehen und nach Bedarf sogar Animationen hinzufügen.

offset Weiteres Lesen

css
• Eigenschaften: css-tricks, mdn offset-path
css
• Eigenschaften: css-tricks, mdn offset-anchor
Container-Abfrage Länge Einheit:
• CSS-Tricks, Mdn
• AT-RULE: CSS-Tricks, Web.dev @property
CSS-Boxmodell:
• CSS-Tricks
SVG -Referenzfeld:
• W3C

Das obige ist der detaillierte Inhalt vonPositionieren Sie Text um Elemente mit CSS -Offseting. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!