Mengatur catatan studi harian dalam pola desain html

Tidak ada proyek yang dilakukan minggu ini, dan saya telah mempelajari model desain HTML. Saya akan mengatur dan membagikan hasil pembelajaran saya minggu ini untuk referensi Anda

Catatan Pembelajaran Pola Desain HTML

Minggu ini saya terutama belajar pola desain HTML, dan sekarang saya akan merangkum konten pembelajaran saya sebagai berikut:

satu. Belajar Model Kotak

Ada model desain dasar dalam CSS yang disebut model kotak, yang mendefinisikan bagaimana elemen diuraikan sebagai kotak. Saya terutama belajar enam jenis model kotak, yaitu model kotak inline, model kotak blok inline, model kotak blok, model kotak meja, model kotak absolut dan model kotak penentuan posisi mengambang.

Pola desain model kotak dibangun ke dalam CSS, yang mendefinisikan hubungan antara sifat -sifat berikut: batas, perbatasan, pengisian, dan konten. Setiap atribut mencakup empat bagian: atas, kanan, bawah, dan kiri; Keempat bagian ini dapat diatur pada saat yang sama atau secara terpisah; Perbatasan dapat dibagi menjadi ukuran dan warna. Kita dapat memahaminya sebagai ketebalan kotak yang terlihat dalam kehidupan dan warna kotak apa itu. Batasnya adalah seberapa jauh kotak itu harus disimpan dari hal -hal lain. Konten adalah apa yang terkandung dalam kotak dan bahan yang diisi bagian cadangan di dalam kotak pengisian.

Model kotak inline diuraikan dalam urutan pengaturan inline, mereka diurutkan secara horizontal dari kiri ke kanan, dan ketika mereka melebihi lebar leluhur blok terminal terdekat mereka, mereka diganti dengan baris baru. Lebar, tinggi, dan overflow tidak bekerja pada elemen inline, karena mereka selalu cocok dengan lebar dan tinggi konten. Margin dan setinggi garis dapat diterapkan pada elemen inline dengan cara khusus. Margin horizontal mengubah posisi elemen inline dalam urutan pengaturan. Nilai positif margin-kiri akan menjauhkan elemen dari elemen sebelum itu, sedangkan nilai negatif akan menariknya lebih dekat. Nilai positif margin-kanan akan menjauhkan elemen dari elemen berikutnya, sedangkan nilai negatif akan lebih dekat. Margin-top dan margin-bottom tidak berfungsi untuk elemen inline. Perbatasan menetapkan perbatasan untuk elemen inline dengan cara khusus, dan perbatasan horizontal akan mengubah posisi elemen inline dalam pengaturan. Perbatasan kiri akan membuat elemen ke kiri, dan perbatasan kanan akan membuat elemen berikutnya ke kanan. Perbatasan atas dan bawah akan ditampilkan di luar margin dalam, tetapi mereka tidak meluas ke ketinggian baris atau mengubah posisi elemen dalam arah vertikal. Template dari pola ini dapat diekspresikan sebagai berikut: