Aliran dokumen CSS dan 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 ' Dalam "The Definitive Guide to CSS" karya 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 penulis menganggapnya terlalu sederhana untuk disebutkan Tapi menurut saya konsep ini sangat penting. Setelah memahaminya, sekumpulan teori tata letak CSS menjadi mudah dipahami, dan saya menyadari rasionalitas desain CSS. Jadi berdasarkan tebakan dan eksperimen saya, saya membuat Pernyataan ini jika ada kesalahan, itu sepenuhnya normal.
Aliran dokumen membagi formulir menjadi baris-baris dari atas ke bawah, dan menyusun elemen-elemen di setiap baris dari kiri ke kanan, yang merupakan aliran 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:
Penempatan relatif, yaitu offset relatif terhadap posisi elemen dalam alur dokumen, namun tetap mempertahankan placeholder aslinya.
Pemosisian absolut, yaitu, sepenuhnya keluar dari alur dokumen, offset dan pemosisian tetap relatif terhadap elemen induk terdekat dengan nilai atribut posisi non-statis, yaitu penempatan sepenuhnya di luar alur dokumen, diimbangi relatif terhadap viewport.Masih
ada beberapa pertanyaan yang harus saya tangani. Saya tidak mengerti
1. Sebagai salah satu dari tiga elemen dasar, apa perbedaan utama antara elemen inline dan elemen level blok?
2. Bagaimana Anda memahami ketika atribut Clear mengambil nilai yang tepat? Tampaknya situasi eksperimental selalu tidak sesuai dengan teori
. Apa yang dimaksud dengan elemen tingkat blok.
Teks berbahasa Mandarin "CSS Definitive Guide" menunjukkan: Elemen apa pun yang terlihat yang bukan elemen tingkat blok adalah elemen sebaris. Ciri kinerjanya adalah bentuk “tata letak baris”, yang dimaksud dengan “tata letak baris” di sini adalah bentuk ekspresinya selalu ditampilkan dalam baris. Misalnya, saat kita menyetel elemen sebaris border-bottom:1px solid #000;, elemen tersebut akan diulang di setiap baris, dan akan ada garis hitam tipis di bawah setiap baris. Jika itu adalah elemen tingkat blok, garis hitam yang ditampilkan hanya akan muncul di bawah blok.
Elemen seperti p, h1, atau div sering disebut elemen tingkat blok, dan elemen ini ditampilkan sebagai blok konten; elemen seperti Strong dan span disebut elemen inline, dan kontennya ditampilkan dalam baris, yaitu , "kotak sebaris". (Anda dapat menggunakan display=block untuk mengubah elemen sebaris menjadi elemen blok. display=none berarti elemen yang dihasilkan tidak memiliki bingkai sama sekali, tidak menampilkan elemen atau memakan ruang dalam dokumen)
J: Elemen sebaris adalah elemen dalam satu baris dan hanya dapat ditempatkan di dalam satu baris; elemen tingkat blok hanyalah kotak empat persegi dan dapat ditempatkan di mana saja pada halaman.
B: Terus terang, elemen sebaris seperti sebuah kata; elemen tingkat blok seperti paragraf.
C: Elemen tingkat blok umum seperti paragraf <p>, judul <h1><h2>..., daftar, <ul><ol><li>, tabel <tabel>, formulir <form>, DIV<div > dan BODY <body> dan elemen lainnya. Elemen inline seperti: elemen form <input>, hyperlink <a>, gambar <img>, <span>…..
D: Fitur penting dari elemen tingkat blok adalah bahwa setiap elemen tingkat blok mulai ditampilkan pada baris baru, dan elemen berikutnya juga perlu ditampilkan pada baris baru.
E: <span> adalah elemen sebaris dalam definisi CSS, sedangkan <div> adalah elemen tingkat blok.
Bagi yang sudah mempelajari CSS pasti bisa langsung memahaminya. Tetapi tidak mudah bagi pemula untuk memahaminya, jadi saya terutama ingin membuatnya lebih familiar bagi pemula!
Menggunakan kata container akan memudahkan untuk memahami secara visual keberadaan dan tujuannya. Elemen inline setara dengan wadah kecil, sedangkan <div> setara dengan wadah besar. <span>Ini adalah wadah kecil. Dengan cara ini Anda mungkin memiliki gambaran awal di benak Anda jika kita ingin memasukkan air ke dalam wadah besar. Namun bagaimana jika saya juga ingin memasukkan tinta ke dalamnya? Caranya sangat sederhana, kita keluarkan wadah kecil, isi dengan tinta dan masukkan ke dalam air bersih di wadah besar.
Izinkan saya memberi Anda contoh praktis sederhana: misalnya <div>Saya suka CSS - 52CSS.com</div>
Saya ingin menata huruf c menggunakan CSS, jadi kita bisa menggunakan <span>.
<div>Saya suka CSS - <span>52CSS.com</span> Standar W3C</div>
Elemen blok umumnya merupakan elemen wadah untuk elemen lain. Elemen blok umumnya dimulai pada baris baru. Elemen blok "bentuk" dapat diakomodasi. Elemen blok yang umum adalah tag paragraf 'P". cukup istimewa, hanya dapat digunakan untuk menampung elemen blok lainnya.
Tanpa bantuan CSS, elemen blok akan disusun satu baris dalam satu waktu. Dengan CSS, kita dapat mengubah mode tata letak default HTML ini dan menempatkan elemen blok di tempat yang Anda inginkan. Daripada dengan bodohnya memulai baris baru setiap saat. Perlu diperhatikan bahwa tag tabel juga merupakan jenis elemen blok. Tata letak berbasis tabel dan tata letak berbasis css melihat kedua tata letak ini dari sudut pandang pengguna biasa (tidak termasuk orang tunanetra, orang buta, dll.), kecuali untuk kecepatan memuat halaman. Kecuali perbedaannya, tidak ada perbedaan lainnya. Namun jika pengguna biasa secara tidak sengaja mengklik tombol lihat kode sumber halaman, perbedaan keduanya akan sangat besar. Kode sumber halaman tata letak CSS yang dirancang berdasarkan konsep rekonstruksi yang baik setidaknya dapat memungkinkan pengguna biasa tanpa pengalaman pengembangan web untuk memahami konten dengan cepat. Dari perspektif ini, kode tata letak css seharusnya memiliki pengalaman estetika yang lebih baik.
Anda dapat menganggap div elemen wadah blok sebagai kotak, atau jika Anda pernah bermain-main dengan kliping, ini akan lebih mudah untuk dipahami. Kami pertama-tama memotong artikel yang diperlukan dari berbagai surat kabar dan majalah. Setiap bagian dari konten yang dipotong adalah satu blok. Kemudian kami merekatkan potongan-potongan kertas tersebut ke selembar kertas kosong baru sesuai dengan maksud tata letak kami. Ini akan membentuk abstrak unik Anda sendiri. Sebagai perpanjangan dari teknologi, desain tata letak web mengikuti pola yang sama. .Elemen
sebaris umumnya didasarkan pada elemen dasar pada tingkat semantik. Elemen sebaris hanya dapat menampung teks atau elemen sebaris lainnya, dan elemen sebaris yang umum "a" adalah.
Elemen blok (block elemen) dan elemen inline (elemen inline) adalah konsep dalam spesifikasi HTML. Perbedaan mendasar antara elemen blok dan elemen sebaris adalah bahwa elemen blok umumnya dimulai pada baris baru. Ketika kontrol CSS ditambahkan, perbedaan atribut antara elemen blok dan elemen sebaris tidak lagi menjadi perbedaan. Misalnya, kita dapat menambahkan atribut seperti display:block ke elemen inline cite, sehingga elemen tersebut juga memiliki atribut memulai dari baris baru setiap saat.
Konsep dasar elemen yang bisa berubah adalah perlu menentukan apakah elemen tersebut merupakan elemen blok atau elemen inline berdasarkan konteksnya. Elemen variabel tetap termasuk dalam dua kategori elemen di atas. Setelah konteks menentukan kategorinya, maka harus mengikuti aturan elemen blok atau elemen sebaris. Lihat teks lengkap untuk klasifikasi elemen kasar.
Mengenai nama Cina elemen inline, ada banyak macam elemen inline, elemen inline, elemen inline, dan elemen inline. Pada dasarnya tidak ada terjemahan terpadu, sebut saja sesuka Anda. Selain itu, ketika berbicara tentang elemen sebaris, kita akan memikirkan atribut tampilan yang disebut display:inline; atribut ini dapat memperbaiki masalah batas mengambang ganda IE yang terkenal.
elemen blok
* alamat - alamat * blockquote - referensi blok * tengah - blok penyelarasan * dir - daftar direktori * div - level blok yang umum digunakan, juga label utama tata letak CSS * dl - daftar definisi * fieldset - grup kontrol formulir * formulir - formulir interaksi * h1 - Heading * h2 - Subtitle * h3 - Heading level 3 * h4 - Heading level 4 * h5 - Heading level 5 * h6 - Heading level 6 * jam - Garis pemisah horizontal * isindex - perintah masukan
* menu - daftar menu * noframes - konten opsional bingkai, (konten blok ini ditampilkan untuk browser yang tidak mendukung bingkai) * noscript - konten skrip opsional (konten ini ditampilkan untuk browser yang tidak mendukung skrip)
* ol - bentuk yang diurutkan * p - paragraf * teks yang telah diformat sebelumnya * tabel - tabel * ul -
elemen sebaris daftar yang tidak diurutkan (elemen sebaris)
* a - titik jangkar * abbr - singkatan * akronim - kata pertama * b - tebal (tidak disarankan)
* bdo - penggantian bidi
* besar - font besar * br - jeda baris * kutipan - kutipan * kode - kode komputer (diperlukan saat mengutip kode sumber)
* dfn - tentukan bidang * em - tekankan * font - pengaturan font (tidak disarankan)
* i - miring * img - gambar * masukan - kotak masukan * kbd - tentukan teks keyboard * label - label tabel * q - kutipan singkat * s - garis bawah (tidak disarankan)
* samp - mendefinisikan contoh kode komputer * pilih - pemilihan item * teks font kecil - kecil * span - wadah sebaris yang umum digunakan, mendefinisikan blok dalam teks * coretan - garis bawah * kuat - penekanan tebal * sub - subskrip * sup - Superskrip * area teks - Kotak input teks multi-baris * tt - Teletype teks * u - Garis bawah * var - Definisikan variabel
Elemen variabel Elemen variabel menentukan apakah elemen tersebut merupakan elemen blok atau elemen sebaris sesuai dengan konteksnya.
* applet - applet java
* tombol - tombol * del - hapus teks * iframe - bingkai sebaris
* ins - teks yang disisipkan * peta - blok gambar (peta)
* objek - objek objek * skrip - skrip klien