Teks kedudukan di sekitar unsur -unsur dengan CSS mengimbangi

CSS menyediakan pelbagai cara untuk mencari unsur -unsur halaman, termasuk teks, seperti atribut

dan atribut position yang sepadan, inset-*, translate, margin (kini sokongan penyemak imbas terhad), dan lain -lain. Atribut anchor() adalah pilihan lain. offset Atribut

biasanya digunakan untuk menghidupkan unsur -unsur di sepanjang jalan yang telah ditetapkan. Sebagai contoh, persegi dalam contoh berikut bergerak di sepanjang laluan bulat: 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>

Atribut adat CSS berdaftar () digunakan untuk menetapkan dan menghidupkan unsur -unsur persegi. Animasi berfungsi kerana

boleh digunakan untuk mencari unsur -unsur pada bila -bila masa pada jalan tertentu --p. Anda mungkin tidak tahu bahawa offset-distance adalah atribut singkatan, terdiri daripada atribut berikut: offset offset

: Titik permulaan jalan
• offset-position
: Bentuk di mana elemen dapat bergerak di sepanjangnya
• offset-path
: Jarak elemen bergerak di sepanjang jalan
• offset-distance
: Sudut putaran elemen relatif terhadap titik anchor dan laluan mengimbangi
• offset-rotate
: Kedudukan dalam elemen sejajar dengan jalan
• Atribut offset-anchor adalah penting untuk apa yang kita mahu capai. Ia menerima nilai bentuk -termasuk bentuk SVG atau fungsi bentuk CSS -dan kotak rujukan untuk elemen kontena untuk membuat laluan.

bingkai rujukan? Ini adalah saiz elemen yang ditentukan mengikut model kotak CSS, termasuk

, offset-path,

, dan konteks SVG seperti

, content-box, dan padding-box. border-box Mereka memudahkan bagaimana kita meletakkan unsur -unsur di sepanjang jalan di tepi elemen kontena. view-box Berikut adalah contoh: semua dataran kecil di bawah diletakkan di sudut kiri atas lalai elemen kontena mereka fill-box. Sebaliknya, lingkaran kecil terletak di sudut kanan atas stroke-box, dan masing -masing (25% daripada perimeter kuadrat elemen kontena). content-box content-box border-box padding-box

NOTA:

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

Jika anda tidak mahu memperuntukkan ruang untuk unsur -unsur dalam elemen induk yang mengandungi, anda boleh melepaskan konteks susun atur

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

elemen. Inilah kaedah yang saya ambil dalam contoh di atas supaya teks perenggan dalaman dapat dekat dengan tepi. Oleh itu,

unsur -unsur yang diposisikan (dataran kecil dan lingkaran) menggunakan untuk mendapatkan konteks mereka sendiri, yang menghilangkannya dari aliran dokumen biasa.

Kaedah kedudukan ini relatif terhadap bingkai rujukan menjadikannya mudah untuk meletakkan unsur -unsur seperti titik pemberitahuan dan tip reben hiasan di sepanjang pinggir modul UI tertentu. Ia seterusnya memudahkan bagaimana teks diletakkan di sepanjang tepi blok yang mengandungi, kerana , juga boleh memutar unsur -unsur di sepanjang jalan. Contoh mudah menunjukkan tarikh artikel yang diletakkan di pinggir kanan blok: offset-rotate offset

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

seperti yang kita lihat,

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

menggunakan harta

dengan jalur bingkai rujukan dan offset unit kontena lebih efisien - anda boleh dengan mudah menetapkan berdasarkan lebar atau ketinggian elemen yang terkandung. Saya akan memasukkan lebih banyak rujukan mengenai pembelajaran mengenai pertanyaan kontena dan unit pertanyaan kontena di bahagian "Bacaan Lanjut" pada akhir artikel ini. offset-distance harta juga digunakan dalam contoh terakhir. Ia menyediakan titik utama untuk anjakan elemen dan putaran-contohnya, putaran 90 darjah dalam contoh berlaku di sudut kiri bawah elemen. Atribut

juga boleh menggerakkan elemen dari bingkai rujukan ke dalam atau ke luar dengan menyesuaikan nilai

-contohnya, parameter offset-anchor menarik pinggir bawah elemen keluar dari offset-anchor yang mengandungi elemen. Ini meningkatkan ketepatan penempatan, seperti yang ditunjukkan di bawah. inset-* bottom -10px padding-box

seperti yang ditunjukkan pada permulaan artikel,

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

kedudukan adalah animasi, yang membolehkan kesan reka bentuk dinamik, seperti:

.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

Ringkasan

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

Sama ada untuk reka bentuk grafik (seperti teks di sepanjang sempadan), anotasi teks, atau teks dinamik (seperti mesej ralat), CSS

adalah pilihan yang mudah digunakan. Kita boleh mencari unsur -unsur di sepanjang kotak rujukan yang mengandungi elemen induk, memutarnya, dan juga menambah animasi yang diperlukan.

bacaan selanjutnya offset

CSS Properties:

css-tricks, mdn
• CSS offset-path Properties: css-tricks, mdn
• Unit Panjang Pertanyaan Kontena: offset-anchor CSS-Tricks, MDN
• at-peraturan: css-tricks, web.dev
• model kotak css: @property css-tricks
• kotak rujukan svg: w3c

Atas ialah kandungan terperinci Teks kedudukan di sekitar unsur -unsur dengan CSS mengimbangi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!