Model kotak CSS adalah penting untuk mengawal susun atur halaman web, kerana setiap elemen dianggap sebagai kotak dengan empat komponen: kandungan, padding, sempadan, dan margin. 1. Kawasan kandungan memegang teks atau imej. 2. Padding menambah ruang dalaman antara kandungan dan sempadan. 3. Sempadan membungkus padding dan kandungan. 4. Margin mencipta ruang pemisahan ruang luaran. Secara lalai, lebar hanya berlaku untuk kawasan kandungan, tetapi menggunakan kotak-kotak: kotak sempadan; Termasuk padding dan sempadan dalam lebar. Penggunaan margin dan padding yang betul memastikan jarak yang berkesan, dengan margin memisahkan unsur -unsur dan padding menambah ruang dalaman, sambil menyedari interaksi margin menegak dan interaksi kaedah susun atur.

Model kotak CSS adalah asas susun atur dalam reka bentuk web - setiap elemen pada halaman web pada dasarnya adalah kotak. Memahami bagaimana kotak ini berkelakuan membantu anda mengawal jarak, penjajaran, dan saiz dengan lebih berkesan. Sekiranya anda baru ke CSS atau ingin menyempurnakan kemahiran susun atur anda, membungkus kepala anda di sekitar model kotak adalah penting.

Apa yang membentuk model kotak?

Pada terasnya, model kotak CSS terdiri daripada empat bahagian: kandungan, padding, sempadan, dan margin - berlapis seperti bawang di sekitar kandungan sebenar.

• Kandungan adalah di mana teks, imej, atau media lain hidup.
• Padding menambah ruang di dalam elemen, antara kandungan dan sempadan.
• Border membungkus padding dan kandungan.
• Margin mencipta ruang di luar elemen, memisahkannya dari unsur -unsur lain.

Oleh itu, apabila anda menetapkan lebar elemen, katakan width: 200px; , yang hanya terpakai kepada kawasan kandungan secara lalai. Jika anda menambah padding, sempadan, atau margin, jumlah lebar yang kelihatan menjadi lebih besar daripada 200px melainkan jika anda mengubah tingkah laku kotak-kotak (lebih banyak lagi).

Cara Mengawal Ukuran dengan box-sizing

Secara lalai, seperti yang kita lihat, menetapkan lebar hanya termasuk kawasan kandungan. Itu boleh membawa kepada masalah susun atur yang tidak dijangka kerana padding dan sempadan membuat perkara lebih besar daripada yang dimaksudkan.

Di sinilah box-sizing berguna. Anda mempunyai dua pilihan utama:

• box-sizing: content-box; (lalai) - Lebar dan ketinggian hanya digunakan untuk kawasan kandungan.
• box-sizing: border-box; - Lebar dan ketinggian termasuk padding dan sempadan, membuat perancangan susun atur lebih mudah.

Amalan biasa adalah untuk memohon border-box di seluruh dunia supaya semua elemen berkelakuan secara konsisten:

 * {
  saiz kotak: kotak sempadan;
}

Dengan peraturan ini, jika anda menetapkan width: 200px; , padding dan sempadan tidak akan mendorong lebar melebihi 200px - yang menjadikan susun atur bangunan jauh lebih lancar.

Menggunakan margin dan padding dengan berkesan

Mendapatkan jarak jauh adalah salah satu bahagian paling rumit CSS - dan juga salah satu yang paling penting. Inilah cara menggunakan margin dan padding tanpa tersandung:

• Gunakan padding untuk membuat ruang di dalam elemen - berguna untuk menambah bilik pernafasan di sekitar teks di dalam butang atau kad.
• Gunakan margin untuk memisahkan unsur -unsur antara satu sama lain - hebat untuk jarak perenggan, kad, atau bahagian.

Satu perkara yang perlu diperhatikan: margin menegak boleh runtuh. Ini bermakna jika dua elemen disusun secara menegak kedua -duanya mempunyai margin atas dan bawah, margin mereka mungkin bergabung menjadi margin tunggal dan bukannya menambah. Tingkah laku ini normal tetapi kadang -kadang mengelirukan.

Berikut adalah beberapa petua cepat:

• Untuk memusatkan elemen peringkat blok secara mendatar, gunakan margin: 0 auto; .
• Elakkan pencampuran padding berasaskan peratusan dengan kandungan lebar tetap-ia boleh menjadi cepat.
• Apabila menggunakan Flexbox atau Grid, kaedah susun atur tersebut boleh menjejaskan bagaimana margin dan padding berfungsi, jadi uji semasa anda pergi.

Itulah asas -asas model kotak CSS - tidak mencolok, tetapi sangat penting. Sebaik sahaja anda memahami bagaimana setiap bahagian berinteraksi, anda akan mempunyai masa yang lebih mudah membina susun atur yang konsisten.

Atas ialah kandungan terperinci Apakah tutorial model kotak CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!