Dalam halaman web, elemen mempunyai tiga model reka letak:
1, model aliran (kedudukan: statik)
2. kiri, kanan)
3, model lapisan (kedudukan: mutlak, tetap, relatif)
Kaedah susun atur yang lebih istimewa ialah:
kedudukan: relatif
Ia mengekalkan ruang yang diduduki oleh elemen dalam "model aliran" atau "model terapung" dan tidak menukar mod paparan elemen: " sebaris" Atau "bergumpal". Ia hanya memberitahu elemen untuk bergerak relatif kepada kedudukan asalnya. Tetapi ia adalah elemen reka letak model lapisan jika ia bertindih dengan elemen lain, ia akan dipaparkan di atas elemen reka letak model bukan lapisan. Di samping itu, selepas menetapkan relatif, elemen akan mempunyai model kotak yang lengkap Walaupun untuk elemen sebaris, ketinggian tetapan, padding atas dan bawah serta sempadan atas dan bawah akan menjadi berkesan, dan tetapan ini akan dicerminkan dalam ruang yang didudukinya. aliran dokumen atasan.
Model aliran
Aliran ialah mod reka letak halaman web lalai. Mana-mana elemen yang tidak mentakrifkan position:absolute; atau position:fixed; dan tidak mempunyai float:left:right; secara lalai.
Model reka letak aliran mempunyai
4 ciri tipikal:
1, elemen blok akan ditekan dari atas ke bawah dalam elemen yang mengandungi tertib memanjang, kerana secara lalai, lebar elemen blok ialah 100%. Malah, elemen blok akan menduduki kedudukan dalam bentuk baris, tidak kira berapa banyak kandungan yang terkandung dalam elemen atau seberapa sempit kita menetapkan lebar elemen.
2. Elemen sebaris akan dipaparkan secara mendatar dari kiri ke kanan dalam elemen yang mengandungi. Sesetengah orang memanggil aliran teks kaedah pengedaran ini berasal dari aliran semula jadi teks dari kiri ke kanan Pada dasarnya, ia berkait rapat dengan kaedah penghantaran HTTP dan mekanisme penghuraian pelayar. Selepas satu baris melebihi, ia akan secara automatik membalut dan memaparkan dari atas ke bawah, dan kemudian terus mengalir secara berurutan dari kiri ke kanan, dan seterusnya. Sudah tentu, pembaca boleh menggunakan sifat teks CSS untuk memaksa arah aliran teks.
3 Jika dua elemen blok bersebelahan atau elemen blok bersarang mempunyai jidar atas dan bawah, ia akan bertindih Hasil pertindihan adalah nilai maksimum antara kedua-duanya. Untuk pertindihan bersarang, anda boleh menghalang pertindihan ini dengan menentukan nilai atribut limpahan elemen induk kepada "auto".
4. Jidar unsur terapung tidak akan bertindih Apabila unsur terapung bersentuhan dengan unsur blok, unsur yang muncul selepasnya akan digunakan untuk menentukan sama ada ia bertindih. Dari perspektif pengaturcaraan, adalah lebih cekap untuk mengubah suai pokok DOM yang telah dibina daripada memutuskan cara untuk memaparkan elemen seterusnya. Jika elemen terapung ialah elemen induk bagi elemen blok, ia harus bertindih mengikut peraturan di atas, tetapi elemen terapung akan mengira ketinggian dan lebar dalaman secara automatik, jadi margin yang terhasil tidak akan bertindih.
Model Terapung
Terapung ialah satu lagi model reka letak yang berbeza sama sekali daripada aliran ia mengikut peraturan terapung tetapi masih boleh Lihat potensi kesan aliran padanya. Mana-mana elemen tidak boleh terapung secara lalai, tetapi ia boleh ditakrifkan sebagai terapung menggunakan CSS Elemen seperti div, list, p, table, dan img semuanya boleh ditakrifkan sebagai terapung, malah elemen seperti span, strong, dll. Elemen sebaris sedemikian juga boleh ditakrifkan sebagai terapung.
Model reka letak terapung mempunyai ciri-ciri berikut:
1 Sebarang elemen yang ditakrifkan sebagai apungan akan ditetapkan secara automatik untuk menyekat paparan. Dengan cara ini anda mempunyai model kotak yang lengkap.
2. Jika kita tidak menyatakan lebar elemen terapung, elemen terapung akan mengecut secara automatik kepada lebar yang boleh mengandungi kandungan.
3. Model terapung tidak akan bercanggah dengan model aliran. Apabila elemen ditakrifkan sebagai susun atur terapung, elemen terapung tidak akan terapung sewenang-wenangnya dari aliran dokumen biasa, dan tepi atasnya akan berada pada kedudukan yang sama seperti semasa ia tidak diisytiharkan terapung. Tetapi dalam arah mendatar, tepi terapungnya akan sedekat mungkin dengan tepi elemen yang mengandungi (tepi ini merujuk kepada pinggir dalam pelapik elemen yang mengandungi).
4 Seperti elemen biasa, elemen terapung sentiasa terletak di dalam elemen yang mengandungi dan tidak akan terapung di luar atau memusnahkan hubungan yang mengandungi elemen, yang berbeza daripada model susun atur lapisan.
5. Berkenaan masalah unsur-unsur yang mengalir di sekeliling. Walaupun elemen terapung boleh mengalir bersama dokumen, masih terdapat perbezaan penting antara model terapung dan model mengalir. Elemen sebaris di belakang elemen terapung boleh mengalir di sekeliling elemen terapung dan juga mengalir ke dalam teks di atas. Elemen blok adalah berbeza Ia mengabaikan ruang yang diduduki oleh semua elemen terapung, seolah-olah elemen terapung tidak wujud sama sekali, dan menentukan kedudukannya dalam model aliran dengan cara ini.
6. Berkenaan isu paparan bersanding antara unsur terapung. Apabila dua atau lebih elemen bersebelahan ditakrifkan sebagai terapung, elemen terapung boleh dipaparkan bersebelahan jika terdapat ruang yang cukup untuk menampungnya. Tepi atas mereka berada pada tahap yang sama. Jika ruang tidak mencukupi, elemen terapung berikutnya akan bergerak ke bawah ke tempat yang boleh memuatkannya Elemen yang digerakkan ke bawah ini boleh mencipta apungan yang berasingan. Ramai pereka suka menggunakan model terapung untuk menyusun halaman web kerana ia boleh memecahkan masalah yang menyekat elemen dalam reka letak model bendalir tidak boleh dipaparkan bersebelahan.
7 Apabila terapung, elemen terapung akan berada sedekat mungkin dengan elemen terapung sebelumnya, sekali gus memerah elemen tidak terapung yang lain. Jika ia tidak boleh dipicit (seperti elemen blok, atau tiada ruang yang mencukupi untuk memaparkan elemen sebaris dan elemen terapung ini pada baris yang sama)
elemen lain akan dibalut dan dipaparkan serta-merta seterusnya kepada elemen sebelumnya.
8. Ringkasan: Elemen terapung masih dalam aliran dokumen, meletakkan dirinya dengan elemen aliran dokumen, tetapi ia tidak menempati ruang aliran dokumen.
Apung jelas
Hanya elemen blok boleh mentakrifkan atribut yang jelas, untuk definisi Elemen sebaris jelas adalah tidak sah. Menetapkan "clear:both" pada elemen blok akan memastikan tiada unsur terapung akan muncul di sebelah kiri atau kanan apabila ia dihuraikan. Tetapi jika
ialah elemen terapung (atribut terapung ditetapkan), elemen terapung berikutnya mungkin masih terapung di sekelilingnya. Apabila elemen terapung mentakrifkan atribut yang jelas, ia tidak akan menjejaskan mana-mana objek sebelumnya, dan tidak akan menjejaskan objek berikutnya Ia hanya akan menjejaskan kedudukan susun aturnya sendiri. Pengaruh di sini bermakna kedudukan objek lain tidak akan diubah secara aktif.
Nota: Secara peribadi, nama Cina bagi atribut ini lebih baik diterjemahkan sebagai "bersih". Ia bersih dan bebas daripada bahan terapung.
Terapung Bersarang
Unsur terapung boleh bersarang antara satu sama lain, dan peraturan bersarang adalah sama seperti bersarang unsur mengalir. Unsur terapung yang mengandungi unsur akan sentiasa melaraskan ketinggian dan lebarnya secara automatik untuk memasukkan unsur anak terapung. Elemen yang mentakrifkan "terapung" secara automatik akan mengira lebar dan tinggi yang diduduki oleh elemen terapung dalam elemen dan menjadikannya konsisten dengan kandungan di dalamnya Sesuai . Jika atribut ini tidak ditakrifkan, lebar dan tinggi tidak boleh dikira secara automatik, menyebabkan lebar dan tinggi elemen induk dipaparkan secara tidak normal. Anda juga boleh mengembangkan lebar dan ketinggian elemen secara automatik dengan mentakrifkan atribut limpahan elemen induk sebagai "auto" oleh .
Apung dan aliran bersarang
Alir tulen Bersarang antara elemen atau elemen terapung mudah secara amnya lebih mudah dikendalikan, tetapi jika anda membenamkan elemen terapung ke dalam elemen mengalir, kesan paparan akan menjadi sangat rumit pada masa ini, elemen yang mengandungi akan berdasarkan Ia memaparkannya sendiri sifat dan tidak lagi dipengaruhi oleh elemen terapung kanak-kanak Maksudnya, elemen induk tidak boleh menyesuaikan diri dengan ketinggian elemen terapung kanak-kanak. Titik permulaan elemen terapung akan ditentukan oleh kedudukannya dalam elemen yang mengandungi, tetapi elemen terapung akan mengembang di atas elemen yang mengandungi, yang akan menjadi agak serupa dengan elemen yang diletakkan secara mutlak .
Model Lapisan
Model susun atur lapisan diperolehi daripada grafik Fungsi penyuntingan lapisan yang sangat popular dalam penyunting imej Lapisan boleh memanipulasi dan mengedit imej dengan tepat dan diterima secara meluas oleh pereka grafik Walau bagaimanapun, dalam bidang reka bentuk web, kerana pergerakan saiz halaman web, lapisan . permainan tidak diterima dengan baik.
Untuk menyokong model reka letak lapisan, CSS mentakrifkan satu set kedudukan (kedudukan) sifat. Idea reka bentuk kedudukan elemen sangat mudah Ia membolehkan pengguna menentukan kedudukan relatif elemen halaman web dengan tepat >, atau yang mengandungi unsur Sekat yang agak terdekat, atau relatif kepada tetingkap penyemak imbas. Jenis Kedudukan
1.statik: Menunjukkan tiada kedudukan, elemen mengikut HTMLmodel aliran lalai, jika tidak secara eksplisit Jika kelas kedudukan elemen diisytiharkan sebagai jenis , ia akan lalai kepada nilai ini.
2.mutlak: bermaksud kedudukan mutlak, mengalih keluar elemen daripada dokumen aliran Seret keluar, dan kemudian gunakan kiri, kanan, atas< Atribut 🎜>, bawah diposisikan secara mutlak berbanding dengan induk terdekatnya yang mengandungi blok yang mempunyai atribut diposisikan. Jika tiada yang mengandungi blok, ia adalah relatif kepada elemen badan, iaitu, mengikut tetingkap penyemak imbas, dan susunan susunannya adalah melalui z-index atribut untuk ditakrifkan.
3.tetap: menunjukkan kedudukan tetap, serupa dengan jenis penentududukan mutlak . Tetapi blok yang mengandunginya ialah paparan (tetingkap halaman dalam skrin) itu sendiri. Memandangkan paparan itu sendiri telah ditetapkan, ia tidak akan berubah apabila bar skrol tetingkap penyemak imbas menatal, melainkan anda mengalihkan kedudukan skrin tetingkap penyemak imbas pada skrin, atau menukar saiz paparan tetingkap penyemak imbas , jadi ia tetap Elemen yang diposisikan akan sentiasa terletak di suatu tempat dalam paparan dalam tetingkap penyemak imbas dan tidak akan terjejas oleh aliran dokumen Ini selaras dengan lampiran latar belakang:tetap ;Fungsi atribut adalah sama.
4.relatif: mewakili kedudukan relatif, yang melepasi kiri, kanan< Atribut 🎜>, atas, bawah menentukan sama ada elemen itu berada dalam aliran dokumen biasa (atau model terapung ) dalam kedudukan mengimbangi. Proses penentududukan relatif adalah untuk menjana elemen dahulu mengikut kaedah statik(float)
, dan kemudian menggerakkan elemen ini pergerakan ditentukan oleh kiri, kanan, atas, bawah Atribut ditentukan dan bentuk serta kedudukan elemen sebelum diimbangi dikekalkan
bahagian seterusnya
