Menguruskan Model Kotak CSS

model kotak CSS: Kunci untuk memahami susun atur web

Perkara yang paling penting mengenai pemahaman CSS adalah: semuanya adalah kotak . Lebih khusus lagi, setiap elemen dalam dokumen menghasilkan kotak. Kotak ini boleh menjadi kotak peringkat blok atau kotak peringkat sebaris. Jenis kotak menentukan bagaimana elemen mempengaruhi susun atur halaman. Model Kotak CSS adalah konsep yang digunakan untuk menggambarkan susun atur dan saiz elemen HTML. Setiap elemen mengandungi kotak untuk kandungannya, mengisi, sempadan, dan margin. Kotak ini digabungkan untuk menentukan susun atur kandungan elemen dan bagaimana unsur -unsur bersebelahan muncul bersebelahan dengan mereka:

Sama ada elemen mencipta kotak dan jenis kotak yang dibuat akan bergantung kepada bahasa markup. CSS berkembang menjadi cara untuk gaya dokumen HTML, begitu banyak model rendering visual CSS berasal dari HTML yang membezakan antara unsur-unsur peringkat dan unsur-unsur sebaris. Secara lalai, unsur-unsur seperti <p> </p> dan <p></p> membuat kotak peringkat blok, tetapi <section></section>, <a></a>, dan <span></span> membuat kotak inline. Sebaliknya, SVG tidak menggunakan model kotak, jadi kebanyakan sifat CSS yang berkaitan dengan susun atur tidak boleh digunakan dengan SVG. <em></em> Kotak peringkat blok mencipta blok kandungan baru, seperti yang ditunjukkan dalam Rajah 4.1. Rendering kotak peringkat blok adalah menegak, disusun mengikut urutan sumbernya, dan (kecuali jadual) berkembang untuk mengisi lebar yang tersedia dari unsur-unsur yang terkandung. Ini dipanggil aliran biasa. Nilai

kotak tahap blok adalah display, block, list-item, atau mana-mana table nilai (contohnya, table-*). table-cell

Rajah 4.1.

Sebaliknya, kotak peringkat inline tidak membentuk blok kandungan baru. Sebaliknya, kotak ini membentuk baris dalam kotak peringkat blok. Mereka memaparkan dan mengisi lebar kotak secara mendatar dan akan membungkus jika diperlukan, seperti yang ditunjukkan dalam Rajah 4.2. Nilai

kotak tahap inline ialah

,

, display atau inline. inline-block inline-table ruby

Rajah 4.2.

Tetapi bagaimana saiz kotak dikira? Di sinilah keadaan menjadi lebih rumit. Seperti yang ditunjukkan dalam Rajah 4.3, saiz kotak adalah jumlah kawasan kandungan kotak, mengisi lebar, dan lebar sempadan. Lebar margin mencipta kotak margin untuk elemen dan mempengaruhi unsur -unsur lain dalam dokumen;

Rajah 4.3.

Sebagai contoh, elemen width: 300px dengan padding: 20px, border: 10px dan <p></p> mempunyai lebar yang dikira sebanyak 360 piksel. Ini adalah jumlah lebarnya, kiri dan kanan mengisi, dan sifat lebar sempadan kiri dan kanan. Untuk membuat elemen dengan lebar 300 piksel, mengisi 20 piksel dan sempadan 10 piksel, lebarnya perlu ditetapkan kepada 240px. Ini adalah bagaimana kebanyakan pelayar arus perdana mengira lebar. Untuk menyelesaikan beberapa masalah dengan model persaingan di kalangan pelayar, Kumpulan Kerja CSS memperkenalkan atribut box-sizing. Ia membolehkan kami memilih pelaksanaan model kotak kegemaran kami dan memudahkan pengiraan apabila berurusan dengan reka bentuk responsif.

Menggunakan box-sizing Pilih Model Kotak

Sifat -sifat

box-sizing ditakrifkan dalam Modul Antara Muka Pengguna Asas CSS Tahap 3 Spesifikasi. Ia mempunyai dua nilai yang mungkin: content-box dan border-box. Pada mulanya, nilai box-sizing adalah content-box. Apabila menggunakan nilai ini, menetapkan sifat width dan height elemen mempengaruhi saiz kawasan kandungannya. Ini sepadan dengan tingkah laku yang ditakrifkan dalam spesifikasi CSS 2.1 dan merupakan tingkah laku lalai dalam pelayar moden (seperti yang ditunjukkan dalam Rajah 4.4). Menetapkan nilai box-sizing ke border-box akan menghasilkan beberapa kesan ajaib. Nilai width dan height kini digunakan pada kelebihan sempadan luar dan bukannya kawasan kandungan. Sempadan dan mengisi ditarik di dalam kotak elemen, sepadan dengan tingkah laku Internet Explorer 5.5 lama. Mari kita lihat contoh campuran mengisi dan sempadan menggunakan lebar peratusan dan unit PX:

<div class="wrapper">
  <article>
    <h2 id="This-is-a-headline">This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2 id="This-is-a-secondary-headline">This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

Unsur -unsur

dan <article></article> kedua -duanya menggunakan CSS berikut, yang memberikan susun atur yang ditunjukkan dalam Rajah 4.5, di mana elemen pertama mempunyai lebar 60% dan elemen kedua mempunyai lebar 60% 40%: <aside></aside>

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

Rajah 4.5.

Secara lalai, nilai

dan

kedua -duanya <aside></aside>. Nilai <article></article> dan box-sizing meningkatkan lebar setiap elemen dengan 40 piksel, yang sangat mempengaruhi segmentasi 60%/40%. Sekarang mari kita tambahkan content-box ke border-width dan padding elemen: box-sizing: border-box <article></article> <aside></aside> Anda dapat melihat perubahan dalam Rajah 4.6: Elemen mempunyai lebar yang sama, tetapi

bermaksud lebarnya termasuk sempadan dan padding. Kerana atribut

article, aside {
  box-sizing: border-box;
}

digunakan untuk tepi sempadan dan bukannya kawasan kandungan, unsur -unsur kami kini diatur bersebelahan.

box-sizing: border-box width

Rajah 4.6.

Saya cadangkan anda menggunakan box-sizing: border-box dalam projek anda. Ia menjadikan kehidupan lebih mudah kerana tidak perlu mengira nilai lebar untuk mempertimbangkan nilai -nilai mengisi dan sempadan, dan tingkah laku kotak lebih diramalkan. Cara terbaik untuk memohon box-sizing: border-box adalah dengan menggunakan peraturan semula. Contoh berikut berasal dari artikel CSS-Tricks Chris Coyier "Warisan kotak saiz mungkin sedikit lebih baik-amalan terbaik":

<div class="wrapper">
  <article>
    <h2 id="This-is-a-headline">This is a headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </article>
  <aside>
    <h2 id="This-is-a-secondary-headline">This is a secondary headline</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing ...</p>
  </aside>
</div>

Ini menggunakan saiz border-box untuk setiap elemen secara lalai tanpa menjejaskan tingkah laku box-sizing bahagian -bahagian projek yang sedia ada. Sekiranya anda tahu tidak akan ada komponen pihak ketiga atau warisan yang bergantung pada tingkah laku content-box, anda boleh memudahkan peraturan ini:

article, aside {
  background: #FFEB3B;
  border: 10px solid #9C27B0;
  float: left;
  padding: 10px;
}
article {
  width: 60%;
}
aside {
  width: 40%;
}

Model Kotak Pengurusan hanya satu elemen dalam memahami cara membuat susun atur kompleks.

Soalan Lazim Mengenai Model Kotak CSS (FAQ)

(bahagian FAQ ditinggalkan di sini kerana artikel itu terlalu panjang dan tidak sepadan dengan matlamat asal pseudo. Bahagian FAQ boleh ditambah atau diubahsuai seperti yang diperlukan.)

Atas ialah kandungan terperinci Menguruskan Model Kotak CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!