Apakah perbezaan antara paparan: blok, paparan: inline, dan paparan: blok sebaris?

Apakah perbezaan antara paparan: blok, paparan: inline, dan paparan: blok sebaris?

Harta display dalam CSS digunakan untuk mengawal susun atur dan pembentangan elemen HTML. Nilai-nilai block , inline , dan inline-block masing-masing mempengaruhi bagaimana unsur-unsur berkelakuan berbeza dari segi susun atur dan interaksi dengan unsur-unsur sekitarnya.

• Paparan: Blok : Unsur dengan harta ini dipaparkan sebagai elemen peringkat blok. Mereka bermula pada barisan baru dan mengambil lebar penuh yang tersedia, meregangkan dari kiri ke kanan bekas mereka. Unsur-unsur peringkat blok biasanya mempunyai margin, padding, dan sifat sempadan yang mempengaruhi ruang di sekelilingnya. Contoh elemen peringkat blok secara lalai termasuk <div> , <code><p></p> , dan <h1></h1> melalui <h6></h6> .
• Paparan: Inline : Unsur dengan harta ini dipaparkan sebagai unsur-unsur peringkat dalam talian. Mereka tidak bermula pada barisan baru dan hanya mengambil lebar sebanyak yang diperlukan. Mereka tidak boleh mempunyai margin atas dan bawah, dan sifat lebar dan ketinggian mereka tidak terpakai. Contoh unsur -unsur sebaris secara lalai termasuk <span></span> , <a></a> , dan <img alt="Apakah perbezaan antara paparan: blok, paparan: inline, dan paparan: blok sebaris?" > .
• Paparan: Blok sebaris : Ini adalah hibrid block dan inline . Unsur-unsur yang ditetapkan untuk inline-block dipaparkan sejajar seperti elemen sebaris tetapi juga membolehkan penggunaan sifat ketinggian dan lebar, serta margin atas dan bawah, seperti elemen blok. Ini menjadikan inline-block berguna untuk mencipta unsur-unsur yang harus duduk bersebelahan tetapi juga perlu mempunyai saiz yang ditetapkan.

Bagaimanakah penggunaan paparan: blok sebaris mempengaruhi susun atur unsur-unsur di laman web?

Menggunakan display: inline-block memberi kesan yang ketara kepada susun atur unsur-unsur di laman web dengan membolehkan mereka duduk di garisan yang sama sementara masih dapat menentukan dimensi dan sifat-sifat seperti blok lain. Berikut adalah beberapa kesan utama:

• Penjajaran mendatar : Elemen dengan display: inline-block boleh diselaraskan secara mendatar di sebelah satu sama lain dalam bekas, dan bukannya memulakan garis baru seperti elemen blok. Ini berguna untuk mewujudkan menu navigasi, galeri, atau susun atur lain di mana item perlu bersebelahan.
• Dimensi dan jarak : Tidak seperti display: inline -unsur inline-block boleh mempunyai lebar dan ketinggian yang ditetapkan, serta margin atas dan bawah. Ini membolehkan kawalan yang lebih tepat ke atas susun atur, yang berguna apabila anda memerlukan elemen untuk menjadi saiz tertentu atau jarak jauh dengan cara tertentu.
• Penjajaran menegak : Unsur-unsur blok dalam talian boleh menggunakan harta vertical-align , yang membolehkan kawalan yang lebih baik ke atas bagaimana mereka menyelaraskan secara menegak berkenaan dengan satu sama lain. Ini boleh menjadi sangat berguna apabila menyelaraskan teks atau elemen sebaris lain dalam blok ini.
• Pengendalian Ruang Putih : Satu aspek penting dalam inline-block adalah bahawa ia boleh dipengaruhi oleh ruang putih dalam markup HTML. Ruang antara unsur-unsur blok dalam talian boleh membawa kepada jurang yang tidak diingini, yang mungkin memerlukan pengendalian khas atau penyingkiran ruang di HTML.

Boleh paparan: blok digunakan untuk membuat bekas lebar lebar, dan jika ya, bagaimana?

Ya, display: block boleh digunakan untuk membuat bekas lebar lebar. Secara lalai, unsur-unsur peringkat blok mengambil lebar penuh bekas induk mereka, tetapi tingkah laku ini dapat dikawal secara eksplisit dan memastikan menggunakan CSS. Inilah cara anda boleh melakukannya:

• Tingkah laku lalai : Seperti yang disebutkan, unsur -unsur blok secara automatik mengambil lebar penuh bekas mereka. Jadi, untuk unsur -unsur seperti <div> atau <code><p></p> , menetapkan display: block (yang merupakan nilai lalai untuk unsur -unsur ini) akan memastikan mereka meregangkan lebar penuh ibu bapa mereka.

• Lebar Eksplisit : Anda juga boleh 100% lebar elemen blok dengan jelas untuk memastikan ia memerlukan lebar penuh:

   <code class="css">.full-width-container { display: block; width: 100%; }</code>

• Pertimbangan margin dan padding : Penting untuk mempertimbangkan kesan margin dan padding pada jumlah lebar elemen. Jika anda memerlukan kawasan kandungan untuk mengambil lebar penuh tanpa menyumbang margin dan padding, anda mungkin perlu menggunakan box-sizing: border-box; harta:

   <code class="css">.full-width-container { display: block; width: 100%; box-sizing: border-box; }</code>

Harta paparan mana yang harus digunakan untuk membuat menu navigasi dengan item sejajar secara mendatar?

Untuk membuat menu navigasi dengan item sejajar secara melintang, display: inline-block biasanya pilihan yang paling sesuai. Inilah sebabnya:

• Susun atur mendatar : inline-block membolehkan item menu dipaparkan dalam garis, bersebelahan, yang sesuai untuk menu navigasi mendatar.
• Kawalan ke atas dimensi : Dengan inline-block , anda boleh menetapkan lebar dan ketinggian tertentu untuk setiap item menu, yang membolehkan susun atur seragam atau adat.
• Keupayaan Styling : Unsur-unsur inline-block boleh digayakan dengan margin, padding, dan sempadan, yang berguna untuk menu item menu dan menambah pemisah visual.

Berikut adalah contoh bagaimana anda boleh menggunakan inline-block untuk membuat menu navigasi mendatar:

 <code class="html"><nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav></code>

 <code class="css">nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline-block; } nav ul li a { display: block; padding: 10px 20px; text-decoration: none; color: #333; } nav ul li a:hover { background-color: #f0f0f0; }</code>

Persediaan ini akan membuat menu navigasi mendatar di mana setiap item senarai dipaparkan secara selaras tetapi dengan keupayaan untuk menetapkan gaya dan dimensi tertentu, menjadikannya berfungsi dan menarik secara visual.