CSS - Model Box: Penguraian Blok-Blok Reka Bentuk Web

Hai sana, para ahli reka bentuk web masa depan! Hari ini, kita akan melangkah ke dalam dunia yang menarik Model Box CSS. Jangan khawatir jika anda baru saja mempelajari ini; saya akan menjadi panduannya yang ramah, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu hal anda), dan mari kita masuk ke dalamnya!

Apa itu Model Box CSS?

Bayangkan anda sedang membina rumah dari batu LEGO. Setiap batu mempunyai ruang sendiri, kan? Di dunia reka bentuk web, setiap elemen di halaman web adalah seperti batu LEGO, dan Model Box CSS adalah rancangan yang menentukan bagaimana elemen-elemen ini diatur dan dijarakkan.

Model Box CSS adalah konsep asas yang menjelaskan bagaimana elemen-elemen dipaparkan di halaman web. Ia menganggap setiap elemen sebagai kotak yang mempunyai kandungan, padding, border, dan margin. Memahami model ini adalah penting untuk mencipta susunan dan visual web yang menarik.

Komponen Model Box CSS

Mari kitaongkos komponen-komponen Model Box CSS. Bayangkan ia seperti bawang (tetapi jangan khawatir, ia tidak akan membuat anda menangis!):

1. Kandungan: Pusat dalamannya, di mana teks dan imej anda tinggal.
2. Padding: Ruang nyaman antara kandungan dan border.
3. Border: Bingkai di sekeliling padding dan kandungan.
4. Margin: Ruang luar yang memisahkan elemen daripada elemen lain.

Ini adalah representasi visual yang mudah:

+-------------------------------------------+
|                  Margin                   |
|   +-----------------------------------+   |
|   |              Border               |   |
|   |   +---------------------------+   |   |
|   |   |          Padding          |   |   |
|   |   |   +-------------------+   |   |   |
|   |   |   |                   |   |   |   |
|   |   |   |      Kandungan      |   |   |   |
|   |   |   |                   |   |   |   |
|   |   |   +-------------------+   |   |   |
|   |   |                           |   |   |
|   |   +---------------------------+   |   |
|   |                                   |   |
|   +-----------------------------------+   |
|                                           |
+-------------------------------------------+

Jenis Model Box

Sekarang, mari bicarakan tentang dua jenis model kotak dalam CSS. Ia seperti memilih antara dua jenis ais krim - keduanya bagus, tetapi mereka mempunyai ciri-ciri unik sendiri.

Model Box CSS Standard

Dalam model kotak standard, lebar dan tinggi yang anda tetapkan untuk elemen hanya terpakai kepada kawasan kandungan. Padding dan border ditambahkan ke luar ini.

mari lihat contoh:

<div class="box">Saya adalah kotak!</div>

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
margin: 10px;
}

Dalam kes ini, lebar keseluruhan kotak akan menjadi 250px (200px kandungan + 40px padding + 10px border), dan tinggi keseluruhan akan menjadi 150px (100px kandungan + 40px padding + 10px border).

Model Box Alternatif

Model kotak alternatif, juga dikenali sebagai model border-box, termasuk padding dan border dalam lebar dan tinggi elemen.

Untuk menggunakan model ini, kita setkan properti box-sizing kepada border-box:

.box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #000;
margin: 10px;
}

Sekarang, lebar dan tinggi keseluruhan kotak akan menjadi tepat 200px dan 100px, masing-masing. Kawasan kandungan akan menyusut untuk menempatkan padding dan border.

Pentingnya Model Box

Memahami model kotak adalah seperti memiliki kekuatan super dalam reka bentuk web. Ia membolehkan anda:

1. Mengawal susunan dengan tepat
2. Mencipta jarak konsisten antara elemen
3. Mengelakkan penindihan atau lubang yang tidak dijangkakan
4. Mereka susunan responsif yang menyesuaikan saiz skrin yang berbeza

Model Box & Kotak Inline

Sejauh ini, kita telah membincangkan elemen aras blok. Tetapi bagaimana dengan elemen inline seperti <span> atau <a>?

Elemen inline mengikuti model kotak juga, tetapi dengan perbezaan:

• Mereka tidak memaksa pemisahan baris sebelum dan selepas
• Properti lebar dan tinggi tidak terpakai
• Padding, margin, dan border vertikal akan terpakai tetapi mungkin menindih kandungan lain
• Padding, margin, dan border horizontal akan mendorong elemen inline lain

mari lihat contoh:

<p Ini adalah <span class="highlight">teks berhalo</span>.</p>

.highlight {
padding: 5px;
border: 2px solid merah;
margin: 10px;
}

Padding dan border akan dipaparkan, tetapi mereka tidak akan mengganggu ketinggian baris. Margin horizontal akan mendorong elemen inline lain.

Paparkan Sebagai Inline Block

Apa jika anda mahu mendapat kebaikan kedua-dua dunia? Masuk display: inline-block. Nilai ini memberikan elemen tingkah laku seperti blok sambil kekal inline.

<span class="inline-block">Saya istimewa</span>
<span class="inline-block">Saya juga!</span>

.inline-block {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid biru;
margin: 10px;
}

Elemen-elemen ini akan duduk di sepanjang baris (jika terdapat ruang cukup) tetapi akan menghormati lebar, tinggi, padding, dan margin seperti elemen blok.

Kotak Block dan Inline

Untuk mengakhiri, mari ringkaskan perbezaan utama antara kotak blok dan inline:

Ciri	Kotak Blok	Kotak Inline
Pemisahan baris	Memaksa sebelum dan selepas	Tidak memaksa pemisahan baris
Lebar	Mengambil keseluruhan lebar tersedia secara default	Hanya mengambil sebanyak yang diperlukan
Tinggi	Dapat ditetapkan	Tidak dapat ditetapkan
Padding	Terpakai di semua sisi	Terpakai secara horizontal, mungkin menindih secara vertikal
Margin	Terpakai di semua sisi	Margin horizontal sahaja dihormati
Boleh mengandungi	Kedua-dua blok dan inline elemen	Hanya inline elemen

Ingat, ini adalah tingkah laku default. Dengan CSS, anda boleh sentiasa mengubah bagaimana elemen berkelakuan!

Danitu, rakyat! Anda telah membuka rahsia Model Box CSS. Praktik dengan konsep ini, cuba dengan properti yang berbeza, dan segera anda akan dapat mencipta susunan yang menarik dengan mudah.

Ingat, dalam reka bentuk web, seperti dalam kehidupan, ia tentang berfikir di dalam kotak... dan kadang-kadang di luarinya juga! Selamat berkod!

Credits: Image by storyset