Cara Menguasai Model Kotak CSS untuk Reka Letak Laman Web Sempurna (contoh Codepen)

Hei, orang yang hebat! Selamat kembali ke blog saya. ? Hari ini, kami menyelam jauh ke dalam Model Kotak CSS, menjelaskan cara saiz setiap elemen ditentukan dan cara anda boleh menggunakan pengetahuan ini untuk mencipta reka bentuk yang tepat, moden dan bersih (contoh dunia sebenar pada penghujung artikel ini).

Pengenalan kepada Model Kotak

Model Kotak CSS adalah asas kepada reka bentuk web, menentukan cara setiap elemen HTML menduduki ruang dalam halaman web.

Pecahan Terperinci Komponen Model Kotak

1. Kandungan : Ini ialah kandungan sebenar kotak, tempat teks, imej dan elemen lain diletakkan. Saiznya ditentukan oleh sifat lebar dan ketinggian.

2. Padding : Ini ialah ruang di sekeliling kandungan, dalam sempadan. Padding adalah lutsinar melainkan digayakan sebaliknya.

3. Sempadan : Ini membaluti padding dan kandungan. Ia boleh digayakan dengan lebar, gaya (cth., pepejal, putus-putus) dan warna.

4. Margin : Ini ialah ruang di luar sempadan. Ia juga telus dan menjejaskan jarak antara elemen

Model Kotak dalam Tindakan:

.example {
    width: 200px; /* Content width */
    height: 100px;
    padding: 10px; /* Adds 20px to both width and height */
    border: 5px solid #000; /* Adds 10px to both width and height */
    margin: 20px; /* Does not contribute to the element's dimensions but affects layout */
}

• Jumlah Pengiraan Lebar : 200px (kandungan) 20px (padding) 10px (sempadan) = 230px

• Jumlah Pengiraan Ketinggian : 100px 20px 10px = 130px

Salah Faham Biasa

• Lebar/Tinggi Sahaja Mempengaruhi Kandungan : Ramai menganggap lebar atau ketinggian tetapan menentukan jumlah saiz, tetapi ia hanya kawasan kandungan.

• Saiz Kotak : Tanpa saiz kotak: kotak sempadan, menambah padding atau jidar meningkatkan elemen melebihi lebar/tinggi yang ditetapkan.

Membayangkan Model Kotak: Bayangkan anda mempunyai kotak dengan dimensi di atas. Inilah pecahan visual:

.box {
    background-color: #f0f0f0;
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 10px solid #000;
    margin: 30px;
}

• Kawasan Kandungan : 300x150px (kawasan kelabu)

• Padding : Menambahkan 20px di sekeliling, meningkatkan saiz kepada 340x190px

• Sempadan : Mengelilingi pelapik, menjadikan saiz kotak terakhir 360x210px

• Margin : Mencipta ruang di sekeliling sempadan, tetapi tidak dikira dalam dimensi elemen secara langsung.

Teknik Model Kotak Lanjutan

Harta Bersaiz Kotak : Menggunakan saiz kotak: kotak sempadan menjadikan padding dan jidar disertakan dalam lebar/tinggi yang ditentukan, reka bentuk memperkemas:

* { box-sizing: border-box;}

Pengisytiharan ini akan digunakan pada semua elemen, menjadikan pengiraan saiz lebih intuitif.

• Nilai Peratusan : Apabila digunakan dengan pelapik atau jidar, peratusan dikira relatif kepada lebar elemen yang mengandungi.

• Auto Margin : Menetapkan jidar: auto boleh memusatkan elemen secara mendatar (atau menegak jika flexbox digunakan).

Model Kotak dan Pertimbangan Reka Letak

• Terapung : Elemen dengan apungan boleh membawa kepada gelagat yang tidak dijangka di mana jidar runtuh atau bertindih.

• Flexbox dan Grid : Kaedah reka letak moden ini mengendalikan margin secara berbeza. Sebagai contoh, jidar tidak runtuh dalam bekas fleksibel atau sel grid seperti yang mungkin berlaku dengan elemen peringkat blok.

• Elemen Bertindih : Memahami indeks-z dan kedudukan membantu mengurus kedalaman apabila elemen bertindih.

Petua Penggunaan Model Kotak Berkesan

• Reka Bentuk untuk Ketekalan : Gunakan saiz kotak yang konsisten merentas projek anda untuk mengelakkan ralat pengiraan saiz.

• Reka Bentuk Responsif : Ingat cara padding dan margin skala. Nilai peratusan untuk pelapik boleh membantu mengekalkan perkadaran merentas saiz skrin yang berbeza.

• Nyahpepijat : Jika elemen kelihatan lebih besar atau lebih kecil daripada yang dijangkakan, semak tetapan padding, jidar dan jidar anda.

• Penggunaan Rangka : Tidak seperti sempadan, garis besar tidak menjejaskan dimensi elemen, yang boleh berguna dalam reka bentuk UI tertentu.

Aplikasi Dunia Sebenar

1.Susun atur kad responsif / sila semak kod pada Codepen.

Penjelasan:

• Berukuran Kotak : Menetapkan saiz kotak: kotak sempadan; memastikan bahawa padding tidak menambah jumlah lebar dan ketinggian, yang memudahkan reka bentuk responsif.

• Reka Letak Kad : Kelas .card mentakrifkan bekas dengan lebar tetap, bucu bulat dan bayang untuk kedalaman.

• Imej Kad : Bertindak sebagai pemegang tempat untuk imej dengan dimensi ditetapkan mengikut ketinggian.

• Kandungan Kad : Di sini, padding digunakan untuk menjarakkan kandungan dari sempadan. Di sinilah anda melihat model kotak dalam tindakan; padding meningkatkan kawasan boleh klik di dalam kad tetapi tidak menambah lebar kad yang diisytiharkan.

• Margin : Digunakan secara halus dalam .card-title dan .card-text ke elemen ruang dalam kad.

• Butang : Digayakan untuk kelihatan seperti seruan tindak biasa, dengan kesan tuding yang menunjukkan peralihan CSS.

2.Senarai catatan blog ringkas / sila semak kod pada Codepen.

Beri tahu saya jika anda memerlukan sebarang penjelasan tentang contoh ini! Saya berbesar hati untuk membantu anda dalam ulasan!

Kesimpulan

Model Kotak CSS, walaupun ringkas dalam teori, mempunyai lapisan kerumitan yang mempengaruhi cara kami mereka bentuk dan menyahpepijat reka letak web. Dengan memahami dan menguasai konsep ini, anda akan lebih bersedia untuk mencipta reka bentuk yang bersih, boleh diramal dan responsif.

? Helo, saya Eleftheria, Pengurus Komuniti, pembangun, penceramah awam dan pencipta kandungan.

? Jika anda menyukai artikel ini, pertimbangkan untuk berkongsinya.

? Semua pautan | X | LinkedIn

Atas ialah kandungan terperinci Cara Menguasai Model Kotak CSS untuk Reka Letak Laman Web Sempurna (contoh Codepen). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!