Senario penggunaan sintaks mengandungi dalam CSS

Senario penggunaan sintaks mengandungi dalam CSS

Dalam CSS, mengandungi ialah atribut berguna yang digunakan untuk menentukan sama ada kandungan elemen adalah bebas daripada gaya dan reka letak luarannya. Ia membantu pembangun mengawal reka letak halaman dengan lebih baik dan mengoptimumkan prestasi. Artikel ini akan memperkenalkan senario penggunaan sintaks atribut mengandungi dan memberikan contoh kod khusus. Sintaks atribut

mengandungi adalah seperti berikut:

contain: layout|paint|size|style|'none'|'strict'|'content';

1. susun atur: Menentukan sama ada reka letak elemen adalah bebas daripada elemen lain. Apabila ditetapkan kepada reka letak, prestasi reka letak boleh dipertingkatkan. Kod sampel untuk menggunakan atribut contain untuk mencapai kebebasan reka letak adalah seperti berikut:

<style>
    .container {
        contain: layout;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

2. cat: Menentukan sama ada lukisan unsur adalah bebas daripada unsur lain. Apabila ditetapkan untuk melukis, prestasi lukisan boleh dipertingkatkan. Kod sampel untuk menggunakan atribut contain untuk mencapai kebebasan lukisan adalah seperti berikut:

<style>
    .container {
        contain: paint;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

3. saiz: Menentukan sama ada saiz elemen adalah bebas daripada unsur lain. Apabila ditetapkan kepada saiz, prestasi pengiraan saiz boleh dipertingkatkan. Kod sampel untuk menggunakan atribut contain untuk mencapai kebebasan saiz adalah seperti berikut:

<style>
    .container {
        contain: size;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

4. style: Menentukan sama ada gaya elemen adalah bebas daripada elemen lain. Apabila ditetapkan kepada gaya, prestasi pengiraan gaya boleh dipertingkatkan. Kod sampel untuk menggunakan atribut contain untuk mencapai kebebasan gaya adalah seperti berikut:

<style>
    .container {
        contain: style;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

5. none: Menunjukkan bahawa atribut contain tidak digunakan. Kod sampel menggunakan tiada adalah seperti berikut:

<style>
    .container {
        contain: none;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

6. ketat: Menunjukkan aplikasi semua fungsi mengandungi. Kod sampel menggunakan ketat adalah seperti berikut:

<style>
    .container {
        contain: strict;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

7. kandungan: Menentukan sama ada kandungan unsur itu bebas daripada unsur lain. Apabila ditetapkan kepada kandungan, prestasi pemaparan kandungan boleh dipertingkatkan. Kod sampel untuk menggunakan atribut contain untuk mencapai kebebasan kandungan adalah seperti berikut:

<style>
    .container {
        contain: content;
    }
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

Ringkasnya, senario penggunaan atribut contain dalam CSS boleh dioptimumkan dari aspek seperti reka letak, lukisan, saiz, gaya dan kandungan. Dengan menetapkan atribut contain, kita boleh menjadikan elemen bebas daripada elemen lain dalam aspek tertentu, dengan itu meningkatkan prestasi dan kecekapan halaman.

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