Senjata Rahsia Layout #1: Harta Jadual CSS

atribut: alat yang berkuasa untuk menyelesaikan masalah susun atur display: table

mata teras:

Atribut CSS

CSS adalah kuat, dapat menyelesaikan pelbagai masalah susun atur dan serasi dengan semua pelayar moden. Ia membolehkan unsur -unsur HTML berfungsi seperti elemen jadual, memberikan penyelesaian yang sama kepada masalah susun atur dan penjajaran kompleks.
• CSS table Ciri-ciri boleh digunakan untuk membuat kotak kontur, susun atur gaya lama yang mudah, dan susun atur penyesuaian dengan orkestrasi kandungan. Ia amat berguna dalam reka bentuk responsif, yang membolehkan unsur -unsur untuk mengubah saiz dan kedudukan mengikut saiz skrin pengguna.
• Walaupun atribut CSS table mempunyai banyak kelebihan, ia juga mempunyai beberapa batasan. Ia mempunyai fleksibiliti yang kurang dalam mewujudkan susun atur kompleks berbanding dengan sifat paparan lain dan tidak berfungsi dengan baik dengan sifat CSS tertentu seperti
dan
• . Walau bagaimanapun, dalam banyak kes, kelebihan menggunakan atribut table melebihi kelemahannya. float position table

Pada masa ini, Flexbox mungkin merupakan teknologi baru yang popular untuk pembinaan susun atur. Keupayaan hebat Flexbox untuk menyesuaikan diri dengan ruang yang ada telah meninggalkan banyak orang yang menantikan kemungkinannya. Walau bagaimanapun, ia tidak menyelesaikan semua masalah susun atur, dan terdapat beberapa isu dengan keserasiannya dengan pelayar yang lebih tua. Flexbox tidak mempunyai polyfill biasa (penyelesaian sandaran untuk pelayar yang lebih tua) - Saya hanya tahu polyfill untuk versi 2009 IE: Flexie. Dalam banyak kes, saya mendapati bahawa menggunakan sifat paparan CSS

yang sering diabaikan dapat mencari penyelesaian yang lebih mudah. Ciri -ciri CSS ini disokong secara meluas oleh semua pelayar yang berkaitan (perhatikan bahawa ini tidak termasuk IE6 dan IE7) dan dengan anggun dapat menyelesaikan beberapa kesukaran susun atur utama dan kecil.

Jika anda tidak sepenuhnya akrab dengan teknik ini, menukar atribut

div boleh menjadikannya table berkelakuan seperti elemen meja atau meja.

tunggu, gunakan jadual untuk susun atur? Bukankah ini baik? display Salah satu topik reka bentuk web paling hangat pada awal abad ke -21 adalah perdebatan mengenai penggunaan kod jadual HTML sebagai alat susun atur. Itulah hack, dan ia masih menjadi amalan yang buruk.

Sebaliknya, kami menggunakan HTML yang masuk akal di sini (iaitu, div, bahagian, header, dan lain -lain), hanya meminjam pengetahuan perwakilan meja yang berguna dari CSS. Ini adalah apa yang CSS direka untuk, jadi jangan fikir ia adalah hack atau patch. Tidak.

Penggunaan

Dalam contoh berikut, klik butang di bahagian atas dan anda boleh menukar atribut

dari tiga div berwarna dari

ke display: table-cell:

[Codepen Sample Link - Gantikan dengan pautan codepen sebenar] display block anda dapat melihat bagaimana div disusun secara mendatar tanpa sebarang sifat table-cell, dan anda juga boleh mengakses beberapa peraturan jadual biasa (seperti

).

Jika anda memerlukan beberapa jarak, ambil perhatian bahawa atribut CSS klasik tidak mempunyai kesan pada sel jadual: Sebaliknya, gunakan margin (ia mesti digunakan untuk elemen jadual kontena). Jika anda ingin menggunakan peraturan ini, anda boleh mencari beberapa baris komen di Codepen. border-spacing

Teknik ini sangat berguna untuk menyelesaikan banyak masalah yang sukar diselesaikan dengan kaedah lain.

Saya telah memilih tiga kes mudah, di mana atribut paparan

sangat berharga. table

tetapi pertama -tama mari kita lihat mereka:

Atribut paparan diwakili sebagai Table, inline-table

Table-column col Table-Column-Group colgroup Table-row-group tbody Table-Header-Group thead Table-footer-group tfoot Table-row tr Table-cell td Table-caption Caption

Untuk panduan yang benar -benar komprehensif untuk bentuk dan CSS, lihat Trik CSS: [CSS Tricks 'Form Guide Link - Gantikan dengan pautan sebenar]

Kes 1.

Saya fikir ini adalah salah satu masalah yang paling biasa yang saya hadapi: Terdapat beberapa kotak terapung dengan kandungan yang tidak diketahui dan anda perlu membuat mereka semua mempunyai ketinggian yang sama.

Saya tahu bahawa Flexbox dapat menyelesaikan masalah ini dengan mudah, tetapi peraturan jadual juga dapat melakukannya.

Cukup gunakan harta

(atau display: table) ke dalam bekas dan harta table-row ke kotak dalaman. Perhatikan bahawa anda ingin memadam sebarang atribut display: table-cell (jika tidak, atribut float tidak akan berkuatkuasa). table-cell

html:

<code class="language-html"><div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div></code>

CSS:

<code class="language-css">#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}</code>

[Codepen Sample Link - Gantikan dengan pautan codepen sebenar]

kes 2. Susun atur gaya lama yang sederhana

Ini adalah contoh yang agak ketinggalan zaman, tetapi saya fikir anda mungkin perlu berurusan dengannya, seperti yang saya lakukan baru -baru ini.

Beberapa bulan yang lalu, saya menerima susun atur grafik yang sangat serupa dengan skema berikut. Ia perlu bersesuaian dengan IE8, dan saya dapati cara terbaik untuk melakukan ini adalah dengan menggunakan peraturan jadual CSS:

[Codepen Sample Link - Gantikan dengan pautan codepen sebenar]

Kes 3. Susun atur penyesuaian dengan fungsi orkestrasi kandungan

Contoh sebelumnya membawa kita ke topik baru: Adakah mungkin untuk membina susun atur penyesuaian menggunakan peraturan jadual CSS?

Ini bukan sahaja mungkin, tetapi kita juga boleh melakukan beberapa tugas orkestrasi kandungan.

kita telah melihat bagaimana untuk menukar sifat

dua divs dari display ke block untuk mengubah susunan mereka dari menegak ke mendatar. table-cell Di samping itu, unsur -unsur dengan atribut

diletakkan di bahagian atas susun atur meja. Sekali lagi, elemen

akan diletakkan di bahagian bawah, dan sebagainya. Ini tidak dapat disangka -sangka berguna apabila memformat susun atur responsif. table-header-group table-footer-group Di pena di bawah, elemen tajuk menukar kedudukannya dengan elemen navigasi apabila tetingkap diubahsuai, hanya tukar atribut

ke

. display table-header-group html:

CSS:

<code class="language-html"><div id="wrapper">
    <nav></nav>
    <header></header>
    <div id="banner2"></div>
    <footer></footer>
</div></code>

<code class="language-css">#wrapper, header {
    display: block; /* 我们实际上不需要此规则，因为它默认为此值 */
}

@media (min-width: 48em) {
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
}</code>

dan

divs juga mempunyai tingkah laku yang sama. footer #banner2 Ini adalah pelan susun atur: versi mudah alih lalai di sebelah kiri, dan versi desktop di sebelah kanan:

ini adalah demonstrasi yang berjalan:

[Codepen Sample Link - Gantikan dengan pautan codepen sebenar]

Maklumat lanjut mengenai hujah ini juga boleh dilihat:

CSS menyusun menggunakan

• anti-pahlawan susun atur CSS-"" display:table
• Kesimpulan display:table
CSS

Ciri -ciri paparan adalah penyelesaian yang dipandang rendah dan berharga untuk cabaran saiz dan susun atur.

Walaupun saya secara peribadi tidak memilih untuk menggunakannya untuk membina susun atur yang kompleks, mereka pasti menyelesaikan banyak cabaran yang berkaitan dengan bahagian susun atur.

Soalan Lazim Mengenai CSS table Properties

(Soalan -soalan yang sering ditanya mengenai atribut CSS table hendaklah ditambah di sini. Kandungannya sama dengan teks asal, tetapi kata -kata perlu diselaraskan untuk mengelakkan pertindihan.)

Sila ambil perhatian bahawa semua pautan codepen di atas perlu digantikan dengan pautan codepen sebenar. Saya tidak dapat mengakses dan membuat codepen secara langsung.

Atas ialah kandungan terperinci Senjata Rahsia Layout #1: Harta Jadual CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!