Positionnement du texte autour des éléments avec décalage CSS

CSS fournit une variété de façons de localiser les éléments de la page, y compris du texte, tels que position les attributs et leurs attributs inset-* correspondants, translate, margin, anchor() (support actuellement limité du navigateur), etc. Les attributs offset sont une autre option.

Les attributs

offset sont généralement utilisés pour animer les éléments le long d'un chemin prédéterminé. Par exemple, le carré dans l'exemple suivant se déplace le long d'un chemin circulaire:

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

Un attribut personnalisé CSS enregistré (--p) est utilisé pour définir et animer les éléments carrés. L'animation fonctionne car offset-distance peut être utilisée pour localiser les éléments à tout moment sur un chemin donné . Vous ne savez peut-être pas que offset est un attribut d'abréviation, composé des attributs suivants: offset

• : Le point de départ du chemin offset-position
• : La forme dans laquelle un élément peut se déplacer le long de celui-ci offset-path
• : La distance que l'élément se déplace le long du chemin offset-distance
• : l'angle de rotation d'un élément par rapport à son point d'ancrage et à son chemin de décalage offset-rotate
• : position dans un élément aligné avec le chemin offset-anchor Les attributs

sont cruciaux pour ce que nous voulons réaliser. Il accepte les valeurs de forme, y compris les formes SVG ou les fonctions de forme CSS - et les boîtes de référence pour les éléments de conteneur pour créer des chemins.

offset-path Cadre de référence? Ce sont des tailles d'éléments déterminées selon le modèle de la boîte CSS, y compris les contextes

,

, content-box, et SVG tels que padding-box, border-box et view-box. fill-box Ils simplifons la façon dont nous positionnons les éléments le long du chemin aux bords des éléments du conteneur. stroke-box Ce qui suit est un exemple: tous les petits carrés ci-dessous sont placés dans le coin supérieur gauche par défaut de leur élément de conteneur . Au lieu de cela, les petits cercles sont situés dans les coins supérieur droit de , content-box et content-box respectivement (25% du périmètre du carré de l'élément de conteneur). 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%; }
  }
}

Remarque:

Si vous ne souhaitez pas allouer de l'espace aux éléments dans l'élément parent contenant, vous pouvez détacher le contexte de mise en page de l'élément. C'est la méthode que j'ai prise dans l'exemple ci-dessus afin que le texte du paragraphe interne puisse être proche du bord. Par conséquent, des éléments positionnés (petits carrés et cercles) utilisent offset-positioned pour obtenir leur propre contexte, qui les supprime du flux de document normal. offset

Cette méthode de positionnement par rapport au cadre de référence permet de placer facilement des éléments tels que des points de notification et des pointes de ruban décoratives le long de la périphérie d'un certain module d'interface utilisateur. Il simplifie encore la façon dont le texte est placé le long du bord du bloc contenant, car , peut également faire tourner les éléments le long du chemin. Un exemple simple montre la date de l'article placé sur le bord droit du bloc: offset-rotate offset

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

Comme nous venons de le voir,

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

utilise la propriété

avec le chemin de référence et offset unités de conteneur plus efficacement - Vous pouvez facilement définir en fonction de la largeur ou de la hauteur de l'élément contenu. J'inclurai plus de références sur l'apprentissage des requêtes de conteneurs et des unités de requêtes en conteneurs dans la section "lecture plus approfondie" à la fin de cet article. offset-distance La propriété

est également utilisée dans le dernier exemple. Il fournit des points d'ancrage pour le déplacement et la rotation de l'élément - par exemple, la rotation à 90 degrés dans l'exemple se produit dans le coin inférieur gauche de l'élément. L'attribut

peut également déplacer un élément du cadre de référence vers l'intérieur ou vers l'extérieur en ajustant la valeur offset-anchor - par exemple, le paramètre offset-anchor tire le bord inférieur de l'élément vers l'extérieur de la inset-* qui contient l'élément. Cela améliore la précision du placement, comme indiqué ci-dessous. 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>

Comme indiqué au début de l'article, le positionnement

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

est animé, ce qui permet des effets de conception dynamique, tels que:

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>

Résumé

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

Que ce soit pour la conception graphique (comme le texte le long des bordures), les annotations de texte ou le texte dynamique (tels que les messages d'erreur), CSS

est une option facile à utiliser. Nous pouvons localiser des éléments le long de la zone de référence contenant les éléments parents, les faire pivoter et même ajouter des animations au besoin.

offset lecture plus approfondie

CSS
• Propriétés: CSS-Tricks, Mdn offset-path
CSS
• Propriétés: CSS-Tricks, Mdn offset-anchor
Unité de longueur de requête en conteneur:
• CSS-Tricks, MDN
• AT-RULE: CSS-Tricks, web.dev @property
Modèle de la boîte CSS:
• CSS-Tricks
Boîte de référence SVG:
• w3c

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!