Aliran dokumen CSS, elemen tingkat blok (blok), dan elemen sebaris (inline). Saya telah membaca banyak buku dan membaca banyak artikel sebelumnya. Yang saya lihat hanyalah pengetahuan dasar yang terpisah-pisah tentang tata letak CSS, yang relatif dangkal O' Reilly, saya menemukan bahwa konsep aliran dokumen yang disebutkan di dalamnya membuat saya sangat sensitif. Sayangnya, buku tersebut tidak menjelaskan apa itu aliran dokumen. Mungkin menurut saya konsep ini terlalu sederhana untuk disebutkan Ini sangat penting. Setelah memahaminya, sekumpulan teori tata letak CSS menjadi mudah dipahami, dan saya menyadari rasionalitas desain CSS. Jadi saya mendasarkan tebakan dan eksperimen saya untuk memberikan penjelasan .
alur dokumen
Bagilah formulir menjadi beberapa baris dari atas ke bawah, dan susun elemen di setiap baris dari kiri ke kanan, yang merupakan alur dokumen.
Setiap elemen tingkat blok yang tidak mengambang menempati garisnya sendiri, dan elemen mengambang mengapung di salah satu ujung garis sesuai kebutuhan. Jika garis saat ini tidak dapat ditampung, maka akan diapungkan pada garis baru.
Elemen sebaris tidak akan menempati satu baris. Hampir semua elemen (termasuk elemen tingkat blok, sebaris, dan daftar) dapat menghasilkan sub-baris untuk menempatkan sub-elemen.
Ada tiga situasi yang akan menyebabkan elemen ada di luar aliran dokumen, yaitu mengambang, pemosisian absolut, dan pemosisian tetap. Namun di IE, elemen mengambang juga ada dalam aliran dokumen (yang menurut saya masuk akal><).
Elemen mengambang tidak menempati ruang aliran dokumen normal, dan posisi elemen mengambang masih berdasarkan aliran dokumen normal, kemudian diekstraksi dari aliran dokumen dan dipindahkan sejauh mungkin ke kiri atau kanan. Konten teks akan dibungkus di sekitar elemen melayang. Ketika sebuah elemen diekstraksi dari aliran dokumen normal, elemen lain yang masih dalam aliran dokumen mengabaikan elemen tersebut dan mengisi ruang aslinya.
Konsep floating yang membingungkan disebabkan oleh interpretasi browser terhadap teori tersebut. Hanya bisa dikatakan banyak orang yang menggunakan IE sebagai standarnya, namun nyatanya tidak.
Berdasarkan alur dokumen, kita dapat dengan mudah memahami pola penentuan posisi berikut:
posisi relatif,
Artinya, elemen tersebut diimbangi relatif terhadap posisinya dalam alur dokumen, namun placeholder aslinya tetap dipertahankan.
posisi absolut,
Artinya, ini benar-benar terpisah dari alur dokumen dan diimbangi relatif terhadap elemen induk terdekat dengan nilai atribut posisi non-statis.
posisi tetap,
Artinya, ini benar-benar terpisah dari aliran dokumen dan diimbangi relatif terhadap viewport.
Ada beberapa pertanyaan lagi yang tidak dapat saya pahami selanjutnya.
Sebagai salah satu dari tiga elemen dasar, apa perbedaan utama antara elemen sebaris dan elemen tingkat blok?
Bagaimana Anda memahami ketika properti Clear mengambil nilai yang tepat? Tampaknya situasi eksperimental selalu tidak sesuai dengan teori.