Apakah sintaks atribut mengandungi dalam CSS?

Atribut mengandungi dalam CSS digunakan untuk menentukan sama ada elemen harus mengandungi atau disertakan dalam elemen lain. Dengan menetapkan atribut mengandungi, anda boleh memberitahu penyemak imbas elemen yang harus diproses secara bebas, dengan itu meningkatkan prestasi pemaparan halaman. Sintaks atribut

mengandungi adalah seperti berikut:

contain: layout [paint] [size] [style]

• susun atur: Menunjukkan sama ada elemen itu harus dibentangkan secara bebas daripada elemen lain. Nilai pilihan ialah: tiada, ketat dan kandungan. none、strict和content。

  • none：表示元素不会影响其他元素的布局，也不会被其他元素影响。
  • strict：表示元素会影响其他元素的布局，但不会被其他元素影响。
  • content：表示元素只会被其直接父级元素影响，而不会影响其他元素。

• paint：表示元素是否应该独立于其他元素进行绘制。可选值有：none和contents。

  • none：表示元素自身不会进行绘制，不会产生可视效果。
  • contents：表示元素会进行绘制，会产生可视效果。

• size：表示元素是否应该独立于其他元素进行尺寸计算。可选值有：none、content和strict。

  • none：表示元素的尺寸计算不依赖于其内部内容。
  • content：表示元素的尺寸计算依赖于其内部内容的大小。
  • strict：表示元素的尺寸计算只依赖于其直接子元素的大小，与内部内容无关。

• style：表示元素是否应该独立于其他元素进行样式计算。可选值有：none和contents。

  • none：表示元素的样式计算不依赖于其内部内容和子元素。
  • contents：表示元素的样式计算依赖于其内部内容和子元素。

下面是一些具体的代码示例：

/* 设置元素在布局上独立于其他元素 */
.container {
  contain: layout;
}

/* 设置元素在绘制上独立于其他元素 */
.box {
  contain: paint;
}

/* 设置元素在尺寸计算上独立于其他元素 */
.img-container {
  contain: size;
}

/* 设置元素在样式计算上独立于其他元素 */
.card {
  contain: style;
}

以上示例中，.container类设置了元素独立于其他元素的布局，.box类设置了元素独立于其他元素的绘制，.img-container类设置了元素独立于其他元素的尺寸计算，.card

tiada: Menunjukkan bahawa elemen itu tidak akan menjejaskan reka letak elemen lain dan tidak akan terjejas oleh elemen lain.

ketat: Menunjukkan bahawa elemen akan menjejaskan reka letak elemen lain, tetapi tidak akan terjejas oleh elemen lain. 🎜kandungan: Menunjukkan bahawa elemen hanya akan dipengaruhi oleh elemen induk langsungnya dan tidak akan menjejaskan elemen lain. 🎜🎜cat: Menunjukkan sama ada elemen perlu dilukis secara bebas daripada elemen lain. Nilai pilihan ialah: tiada dan kandungan. 🎜🎜🎜tiada: Menunjukkan bahawa elemen itu sendiri tidak akan dilukis dan tidak akan menghasilkan kesan visual. 🎜kandungan: Menunjukkan bahawa elemen akan dilukis dan akan menghasilkan kesan visual. 🎜🎜saiz: Menunjukkan sama ada elemen harus bersaiz bebas daripada elemen lain. Nilai pilihan ialah: tiada, kandungan dan strict. 🎜🎜🎜tiada: Menunjukkan bahawa pengiraan saiz elemen tidak bergantung pada kandungan dalamannya. 🎜kandungan: Menunjukkan bahawa pengiraan saiz elemen bergantung pada saiz kandungan dalamannya. 🎜ketat: Menunjukkan bahawa pengiraan saiz elemen hanya bergantung pada saiz elemen anak langsungnya dan tiada kaitan dengan kandungan dalaman. 🎜🎜style: Menunjukkan sama ada elemen harus digayakan secara bebas daripada elemen lain. Nilai pilihan ialah: tiada dan kandungan. 🎜🎜🎜tiada: Menunjukkan bahawa pengiraan gaya elemen tidak bergantung pada kandungan dalaman dan elemen anak. 🎜kandungan: Menunjukkan bahawa pengiraan gaya elemen bergantung pada kandungan dalaman dan elemen anak. 🎜Berikut ialah beberapa contoh kod khusus: 🎜rrreee🎜Dalam contoh di atas, kelas .container menetapkan kebebasan elemen daripada yang lain susun atur, kelas .box menetapkan lukisan elemen bebas daripada elemen lain, kelas .img-container menetapkan pengiraan saiz elemen bebas daripada elemen lain, .card Kelas menyediakan pengiraan gaya elemen secara bebas daripada elemen lain. 🎜🎜Dengan menggunakan atribut contain, kami boleh mengoptimumkan prestasi pemaparan halaman, mengurangkan operasi pengaliran semula dan lukis semula yang tidak perlu serta meningkatkan pengalaman pengguna. 🎜

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