Atoz CSS Petua Pantas: Elemen Terapung dan Jelas dan Berpusat

Keahlian Premium SitePoint Eksklusif: Lengkap ATZ: Tutorial Siri CSS!

Muatkan pemain ... Selamat datang ke tutorial siri Atoz CSS kami! Dalam siri tutorial ini, kami akan meneroka pelbagai nilai CSS (dan sifat) yang bermula dengan huruf yang berbeza dalam abjad. Dalam artikel ini, saya telah menambah tip/kursus cepat pada atribut terapung dan jelas dan pelbagai kaedah berpusat elemen.

f bermaksud terapung dan jelas

Terapung berguna jika anda ingin memindahkan elemen ke kiri atau kanan halaman, tetapi malangnya anda tidak boleh menggunakan float: center untuk memusatkan elemen. Bukankah sangat menyusahkan? Jangan risau, inilah kaedah memusatkan pelbagai elemen.

Teknik 1

Jika elemen adalah elemen peringkat blok, anda boleh menggunakan width dan margin: auto dalam kombinasi. margin: auto secara automatik mengira margin di sebelah kiri dan kanan untuk menjadikannya sama, dengan itu memusatkan elemen blok dalam elemen kontenanya. Lihat contoh yang ditulis oleh SitePoint (@SitePoint) pada CodePen: Tip-Margin-Auto.

Teknik 2

Jika elemen adalah elemen inline (atau inline), gunakan text-align: center pada bekas induknya. Lihat contoh yang ditulis oleh SitePoint (@SitePoint) pada CodePen: Tip-Flexbox.

Teknik 3

Jika elemen itu benar -benar diposisikan, gunakan left dan transform untuk memusatkan elemen secara mendatar. Lihat contoh yang ditulis oleh SitePoint (@SitePoint) pada CodePen: Tip-Flexbox.

Teknik yang sama juga boleh digunakan untuk elemen berpusat menegak, tetapi lebih banyak akan diperkenalkan pada petua masa depan!

Teknik 4

Gunakan Flexbox (atribut "F" yang lain, hebat!) Untuk menggunakan Flexbox untuk memusatkan satu projek (atau kumpulan projek), anda perlu menetapkan dua sifat pada elemen kontena: display: flex dan justify-content: center. Lihat contoh yang ditulis oleh SitePoint (@SitePoint) pada CodePen: Tip-Flexbox.

Flexbox mempunyai banyak ciri -ciri sejuk yang lain, termasuk elemen kontena yang berkembang atau mengecut untuk menggunakan ruang yang paling baik. Anda juga boleh menyelaraskan unsur-unsur secara menegak dan mendatar pada masa yang sama tanpa menggunakan unsur-unsur tahap blok dan inline, yang menentukan penjajaran menegak atau mendatar masing-masing. Manfaat lain menggunakan Flexbox adalah bahawa tidak ada lagi masalah lipatan kontena dan keperluan untuk menggunakan penyelesaian ClearFix.

soalan yang sering ditanya mengenai CSS Float dan Clear

Apakah tujuan atribut terapung dalam CSS?

Atribut

dalam float CSS digunakan untuk menolak elemen ke kiri atau kanan, membolehkan unsur -unsur lain mengelilinginya. Ini adalah alat yang berkuasa yang boleh digunakan untuk membuat keseluruhan susun atur web atau bahagian tertentu halaman web, seperti teks pembungkus di sekitar imej. Walau bagaimanapun, perlu diperhatikan bahawa unsur -unsur terapung dikeluarkan dari proses biasa laman web, dan jika tidak diuruskan dengan betul, ia kadang -kadang boleh membawa kepada hasil susun atur yang tidak dijangka.

Bagaimana untuk memusatkan elemen terapung dalam CSS?

Memusatkan unsur -unsur terapung dalam CSS boleh menjadi agak rumit kerana atribut float itu sendiri tidak menyokong penjajaran yang berpusat. Walau bagaimanapun, terdapat beberapa penyelesaian untuk mencapai matlamat ini. Pendekatan yang sama adalah menggunakan elemen pembungkus atau induk dengan lebar dan margin yang ditetapkan ditetapkan ke auto. Pendekatan lain ialah menggunakan susun atur flexbox atau grid, yang memberikan lebih banyak kawalan ke atas penjajaran projek dan peruntukan ruang dalam bekas.

Apakah fungsi atribut yang jelas dalam CSS?

Atribut

dalam clear CSS digunakan dengan atribut float. Ia menentukan sisi elemen yang tidak dibenarkan untuk terapung. Nilai atribut clear adalah none, left, right, both, inherit, dan

. Harta ini biasanya digunakan untuk mencegah unsur -unsur dari unsur -unsur terapung di sekeliling.

Mengapa elemen terapung saya tidak diselaraskan dengan betul?

Jika elemen terapung anda tidak diselaraskan seperti yang dijangkakan, ia mungkin disebabkan oleh beberapa sebab. Masalah biasa ialah jumlah lebar elemen terapung (termasuk margin, mengisi, dan sempadan) melebihi lebar elemen kontenanya. Satu lagi masalah mungkin tidak semua elemen terapung ke arah yang sama. Juga, ingat bahawa unsur -unsur terapung dikeluarkan dari aliran normal dokumen, yang kadang -kadang boleh membawa kepada hasil yang tidak dijangka.

Bagaimana untuk membersihkan terapung dalam CSS?

clear anda boleh menggunakan atribut clear untuk membersihkan terapung dalam CSS. Ini biasanya diperlukan apabila bekas mengandungi unsur -unsur terapung dan anda tidak mahu unsur -unsur lain dalam bekas untuk mengelilingi unsur -unsur terapung. Anda boleh membersihkan apungan dengan menambahkan elemen baru di hujung bekas dan menetapkan atribut clear kepada "kedua -duanya". Sebagai alternatif, anda boleh menggunakan hack ClearFix, yang melibatkan penggunaan elemen pseudo dengan atribut

ke bekas itu sendiri.

Bolehkah saya menggunakan atribut float dengan susun atur flexbox atau grid?

float Walaupun anda secara teknikal boleh menggunakan atribut float dengan susun atur flexbox atau grid, ini tidak disyorkan. Ini kerana susun atur flexbox dan grid menyediakan mekanisme mereka sendiri untuk menyelaraskan dan memperuntukkan ruang untuk item dalam bekas, yang mungkin bertentangan dengan tingkah laku atribut float. Jika anda menggunakan susun atur flexbox atau grid, lebih baik menggunakan sifat mereka pada mereka dan bukannya

.

Apakah beberapa alternatif untuk menggunakan atribut terapung CSS?

float Walaupun atribut

adalah alat yang berkuasa di CSS, terdapat beberapa alternatif yang memberikan lebih banyak kawalan dan fleksibiliti. Ini termasuk flexbox, susun atur grid dan kedudukan CSS. Flexbox membolehkan penjajaran mudah dan peruntukan ruang untuk projek dalam bekas, sementara susun atur grid sangat bagus untuk mewujudkan susun atur 2D yang kompleks. Kedudukan CSS juga boleh digunakan untuk mengawal susun atur setiap elemen.

Bagaimanakah atribut terapung mempengaruhi aliran dokumen?

Apabila elemen terapung, ia akan dikeluarkan dari aliran normal dokumen dan bergerak ke kiri atau kanan sebanyak mungkin. Unsur -unsur lain dalam dokumen akan mengalir di sekitar elemen terapung. Ini kadang -kadang boleh membawa kepada hasil yang tidak dijangka, terutamanya jika elemen terapung lebih luas daripada elemen kontenanya, atau jika terdapat banyak elemen terapung dengan lebar yang berbeza.

Bolehkah saya mengapung elemen ke pusat?

Atribut

dalam float dalam CSS tidak menyokong penjajaran berpusat. Ia membolehkan unsur -unsur terapung ke kiri atau kanan sahaja. Walau bagaimanapun, anda boleh mencapai kesan yang sama dengan menggunakan elemen pembungkus atau induk dengan lebar dan margin yang ditetapkan ditetapkan ke auto. Sebagai alternatif, anda boleh menggunakan susun atur flexbox atau grid yang memberikan lebih banyak kawalan ke atas penjajaran.

Apa yang berlaku jika saya tidak membersihkan apungan?

Jika anda tidak membersihkan apungan, ia boleh membawa kepada hasil susun atur yang tidak dijangka. Sebagai contoh, jika elemen induk hanya mengandungi unsur -unsur terapung, ia mungkin runtuh kerana elemen terapung telah dikeluarkan dari aliran normal dokumen. Unsur -unsur lain dalam dokumen itu juga boleh mengelilingi unsur -unsur terapung dengan cara yang tidak anda harapkan. Oleh itu, biasanya lebih baik untuk membersihkan apungan jika perlu.

Atas ialah kandungan terperinci Atoz CSS Petua Pantas: Elemen Terapung dan Jelas dan Berpusat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!