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.
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.
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.
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.
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
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.
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
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
float
Walaupun atribut
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.
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.
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!