Peranan dan sintaks atribut mengandungi dalam CSS

Peranan mengandungi sintaks dalam CSS

Dalam CSS, mengandungi ialah atribut yang sangat berguna, yang boleh menjejaskan reka letak dan pemaparan elemen. Fungsi utamanya adalah untuk memberitahu pelayar cara mengendalikan kandungan elemen dan mengawal hubungan antara elemen dan elemen lain.

Atribut mengandungi mempunyai empat nilai pilihan: tiada, ketat, kandungan dan saiz. Di bawah ini kita membincangkan peranan setiap nilai secara terperinci dan memberikan contoh kod yang sepadan.

1. none: Ini ialah nilai lalai atribut contain, yang bermaksud kandungan elemen boleh melimpah secara bebas ke elemen induk atau elemen lain. Ini juga merupakan tingkah laku CSS tradisional.

Contoh kod:

.container {
  contain: none;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

Dalam kod di atas, lebar dan tinggi div bekas ialah 200 piksel dan limpahan:tersembunyi ditetapkan. Lebar dan ketinggian div teks ialah 300 piksel, yang melebihi saiz bekas. Oleh kerana nilai atribut mengandungi ditetapkan kepada tiada, teks akan melimpah di luar bekas.

2. ketat: Nilai ini memberitahu penyemak imbas untuk menggunakan kekangan yang ketat untuk memastikan elemen itu tidak melampaui batas.

Contoh kod:

.container {
  contain: strict;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

Dalam kod di atas, lebar dan tinggi div bekas masih 200 piksel dan limpahan:tersembunyi ditetapkan. Tetapi kerana nilai atribut mengandungi ditetapkan kepada ketat, penyemak imbas akan melaraskan saiz div teks secara automatik untuk memastikan ia tidak melimpahi sempadan bekas.

3. kandungan: Nilai ini memberitahu penyemak imbas untuk hanya mempertimbangkan kandungan elemen itu sendiri, tanpa mengira saiz dan kedudukan elemen anaknya.

Contoh kod:

.container {
  contain: content;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

Dalam kod di atas, lebar dan tinggi div bekas masih 200 piksel dan limpahan:tersembunyi ditetapkan. Walau bagaimanapun, kerana nilai atribut mengandungi ditetapkan kepada kandungan, div teks masih akan melimpah di luar bekas, kerana penyemak imbas hanya mempertimbangkan saiz elemen itu sendiri dan tidak melaraskan saiz elemen anak.

4. saiz: Nilai ini memberitahu penyemak imbas bahawa elemen harus diubah saiznya kepada saiz minimum yang sesuai dengan kandungannya.

Contoh kod:

.container {
  contain: size;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow: hidden;
}

.text {
  width: 300px;
  height: 300px;
  background-color: red;
}

Dalam kod di atas, lebar dan tinggi div bekas masih 200 piksel dan limpahan:tersembunyi ditetapkan. Tetapi kerana nilai atribut mengandungi ditetapkan kepada saiz, penyemak imbas akan mengubah saiz div teks supaya ia sesuai dengan saiz bekas.

Ringkasan

Peranan atribut contain dalam CSS adalah untuk mengawal cara kandungan elemen diletakkan dan hubungan antara elemen dan elemen lain. Dengan menggunakan atribut mengandungi, kami boleh mencapai reka letak yang lebih tepat dan kesan pemaparan yang lebih baik. Bergantung pada nilai, kita boleh mengawal limpahan, saiz semula dan kesan elemen anak. Memahami dan mahir menggunakan atribut mengandungi akan membantu kami mengawal dan mengoptimumkan reka letak halaman web dengan lebih baik.

Atas ialah kandungan terperinci Peranan dan sintaks atribut mengandungi dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!