Model Kotak CSS: Sos Rahsia Reka Letak Web

Selamat datang kembali ke dunia CSS yang hebat!

Kali ini kita akan mendedahkan salah satu konsep asas dalam reka bentuk web - Model Kotak CSS. Jika anda pernah terfikir mengapa elemen pada halaman anda kelihatan mempunyai padding yang tidak kelihatan atau jidar yang misteri, anda berada di tempat yang betul.

Mari menyelami dunia CSS yang berkotak-kotak dan ketahui cara model ini boleh menjadikan anda seorang maestro reka letak!

Temui Model Kotak: Seluar Dalam Halaman Web Anda!

Fikirkan Model Kotak CSS sebagai seluar dalam rahsia halaman web anda. Ia adalah asas yang memastikan segala-galanya terselit dengan kemas dan teratur. Setiap elemen pada halaman anda dibalut dalam kotak dan kotak ini terdiri daripada empat lapisan berbeza:

• Kandungan: Ini ialah lapisan dalam tempat teks, imej atau mana-mana kandungan anda berada. Ia seperti lapisan paling dalam yang selesa pada kotak anda.
• Padding: Kusyen yang mengelilingi kandungan anda. Bayangkan ia sebagai lapisan pelindung yang lembut yang menghalang kandungan anda daripada menyentuh tepi kotak.
• Sempadan: Bingkai luar kotak. Ia adalah bahagian yang anda boleh lihat dan gayakan dengan warna dan ketebalan.
• Margin: Ruang di luar sempadan, seperti udara di sekeliling kotak anda. Ia mewujudkan ruang antara elemen anda dan orang lain di sekelilingnya.

1. Kandungan: Bintang Pertunjukan

Kandungan adalah tempat semua keajaiban berlaku. Ia adalah tempat anda meletakkan teks, imej dan elemen lain anda. Anda mengawal saiz kawasan kandungan menggunakan sifat seperti lebar dan tinggi.

.box {
    width: 200px;
    height: 100px;
}

Ini mentakrifkan saiz kawasan kandungan anda. Memandangkan kawasan kandungan adalah tempat barangan anda pergi, pastikan ia cukup luas untuk semua yang anda mahu muatkan!

2. Padding: Selimut yang Nyaman

Padding adalah seperti selimut selesa yang anda lemparkan ke atas kandungan anda. Ia adalah ruang antara kandungan dan sempadan, memastikan kandungan anda tidak melekap terlalu dekat dengan tepi.

.box {
    padding: 20px;
}

Ini menambahkan kusyen 20px di sekeliling kandungan anda. Ia seperti memberi kandungan anda sedikit ruang bernafas.

3. Sempadan: Bingkai Bergaya

Sempadan ialah bingkai bergaya yang mengelilingi kandungan dan pelapik anda. Anda boleh menyesuaikan warna, lebar dan gayanya. Ia seperti memilih bingkai gambar yang sesuai untuk karya seni anda.

.box {
    border: 2px solid #007BFF;
}

Di sini, anda mempunyai jidar biru pejal 2px di sekeliling kotak anda. Jangan ragu untuk menjadi kreatif dengan sempadan putus-putus, putus-putus atau pun dua sempadan!

4. Margin: Ruang Sukar

Margin ialah ruang di luar sempadan. Mereka seperti medan daya halimunan yang memisahkan elemen. Gunakan jidar untuk mengawal jarak antara kotak anda dengan elemen lain pada halaman.

.box {
    margin: 30px;
}

Ini menambah ruang 30px di sekeliling kotak anda, memastikan ia tidak terserempak dengan jirannya. Ia seperti memberikan kotak anda sedikit ruang peribadi!

5. Saiz Kotak: Melaraskan Gelagat Kotak

Secara lalai, model kotak menambah pelapik dan jidar pada lebar dan ketinggian elemen, menjadikan saiz sebenar lebih besar daripada yang anda tentukan. Jika anda ingin menukar tingkah laku ini, gunakan sifat bersaiz kotak.

.box {
    box-sizing: border-box;
}

Dengan kotak sempadan, lebar dan tinggi yang anda tetapkan termasuk pelapik dan jidar. Ia seperti mengubah suai kotak anda supaya sesuai dengan yang anda inginkan.

Petua Pro?
Nilai saiz kotak lalai ialah kotak kandungan, yang tidak termasuk pelapik dan sempadan daripada pengiraan lebar dan ketinggian. Bertukar kepada saiz kotak: kotak sempadan boleh memudahkan pengurusan reka letak dengan memasukkan pelapik dan sempadan dalam jumlah saiz elemen.

Membungkusnya

Model Kotak CSS mungkin kelihatan seperti banyak yang perlu diambil; tetapi sebaik sahaja anda membiasakannya, anda akan mendapati ia adalah kunci untuk menguasai reka letak dan jarak pada halaman web anda. Ingat, setiap elemen pada halaman anda ialah kotak dengan kandungan, padding, jidar dan jidar. Selesa dengan konsep ini dan anda akan menggayakan gaya seperti profesional dalam masa yang singkat.

Selamat mengekod!

Atas ialah kandungan terperinci Model Kotak CSS: Sos Rahsia Reka Letak Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!