Pertanyaan Kontena dalam CSS

Mula-mula bekas mesti didaftarkan, dan boleh ditanya.

Daftarkan Bekas

Gunakan pemilih untuk mendaftarkan bekas.

.parent {
    container-name: myname;
    container-type: inline-size;
    ... other code
}

atau, gunakan pilihan trengkas

.parent {
    container: myname / inline-size;
    ... other code
}

Pada masa pendaftaran, dua butiran - jenis dan nama - perlu dinyatakan.

Jenis Bekas

jenis bekas: ...

• saiz
• saiz sebaris
• biasa

Nama Bekas

nama bekas: ;

mengenal pasti bekas sangat berguna jika anda mungkin mempunyai senario berbilang bekas.

Tanya Bekas

Pertanyaan kontena bermula dengan peraturan @container diikuti dengan nama bekas dan pertanyaan ciri.

div {
    font-size: 2em;
}

@container myname (width: > 30ch)
{
    div {
        font-size: 3em;
    }
}

pertanyaan bekas untuk menetapkan saiz fon untuk div di dalam bekas nama saya kepada 3em jika lebar ciri lebih besar daripada 30ch.

Ciri untuk Pertanyaan

pertanyaan saiz...

• lebar
• tinggi
• saiz sebaris
• saiz blok
• nisbah aspek
• orientasi

tanya gaya...

• gaya(harta: nilai)

harta benda untuk disemak nilainya.

contohnya

@container contname style('background-color: blue') {
    ... 
    styles 
    ...
}

Pertanyaan kontena untuk menggunakan gaya jika warna latar belakang nama sambung bekas adalah biru

Pertanyaan Kompaun

dan, atau dan tidak boleh digunakan untuk membuat pertanyaan kompaun

contohnya

    @container myname (width>30ch) and (height>100px) {
        ...
    }

    @container myname not (color: blue) {
        ...
    }

Pertanyaan Bekas Bersarang

Pertanyaan kontena boleh bersarang dalam pertanyaan kontena lain.

contohnya

    @container myname (width>30ch) {
        ...
        @container myname (background-color: blue) {
            ...
        }
        @container myname (background-color: red) {
            ...
        }
    }

Atas ialah kandungan terperinci Pertanyaan Kontena dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!