Rumah > Artikel > hujung hadapan web > Dalam CSS, bagaimanakah atribut auto dalam "margin: 0 auto" berfungsi?
Dalam CSS, bagaimanakah atribut auto dalam "margin: 0 auto" berfungsi?
- 王林ke hadapan
- 2023-08-28 10:57:02961semak imbas
Harta ": 0 auto" ialah sifat CSS yang biasa digunakan yang membenarkan pembangun memusatkan elemen secara mendatar dalam bekas. Nilai "auto" atribut margin membolehkan kesan pemusatan dicapai.
Dalam artikel ini, kami akan meneroka cara nilai "auto" berfungsi dalam sifat margin dan cara menggunakannya untuk mencapai pemusatan mendatar. Kami juga akan membincangkan beberapa kemungkinan ralat dan amalan terbaik apabila menggunakan nilai "auto" dalam sifat margin.
Margin dalam CSS
Sebelum memasuki topik ini, kita harus cuba mempelajari beberapa pengetahuan asas untuk memahami masalah ini. Mula-mula, kita akan mempelajari maksud margin dalam CSS, dan kemudian kita akan terus memahami atribut auto. Hanya selepas mempelajari semua ini, kita boleh mendapatkan jawapan kepada soalan asal kita.
Kami tahu bahawa tujuan CSS adalah untuk menggayakan halaman web supaya mudah digunakan dan menarik secara visual, menjadikan keseluruhan pengalaman pengguna lebih lancar dan lebih baik untuk pengguna. Gaya ini merangkumi banyak perkara seperti warna, fon, saiz fon, dsb. Salah satu kaedah penggayaan ialah menggunakan jarak yang sesuai antara elemen.
Setiap kali kita bercakap tentang ruang di luar sempadan yang ditentukan sesuatu elemen, kita sebenarnya bercakap tentang jidarnya. Margin membolehkan kami membuat sempadan tidak kelihatan yang mengasingkan unsur daripada unsur lain. Ia agak seperti pelapik, tetapi pelapik sebenarnya adalah ruang antara kanak-kanak elemen dan elemen sekeliling.
CSS membolehkan kami mempunyai tahap kawalan dan penyesuaian yang sangat tinggi ke atas margin elemen kami, kami boleh menggunakan margin biasanya untuk mencipta margin di mana keempat-empat bahagian adalah sama, tetapi kami juga boleh melakukan ini dengan menentukan margin yang kami sebenarnya merujuk Tentukan margin untuk bahagian tertentu secara individu. Contohnya,
margin : 0 // statement 1 margin top : 25px // statement 2
Jdar yang ditetapkan oleh pernyataan 1 akan menetapkan semua jidar unsur kepada 0, manakala jidar yang ditetapkan oleh pernyataan 2 hanya akan mengubah suai jidar atas dan menetapkannya kepada 25 piksel.
Kita boleh menentukan margin dalam cara yang berbeza -
Kita boleh menggunakan panjang tersuai.
Kami boleh menentukan nilai peratusan yang akan berubah berdasarkan saiz skrin pengguna.
Kita juga boleh menjadikan margin boleh diwarisi, yang akan menetapkan margin elemen semasa kepada margin elemen induknya.
Tetapi bagaimana jika kita tidak tahu nilai apa yang patut kita gunakan semasa menentukan margin.
Atribut automatik
CSS memberikan kami atribut supaya penyemak imbas boleh mengira dan menetapkan margin elemen, iaitu atribut auto. Sifat ini memudahkan pembangun menggunakan margin kerana kita tidak perlu mengetahui terlebih dahulu nilai sebenar yang akan digunakan, tetapi biarkan penyemak imbas mengiranya.
Mari kita fahami cara ia berfungsi. Jika kita menentukan jidar unsur sebagai auto, ia akan memberikan jidar yang sama pada semua sisi dengan terlebih dahulu mengira lebar dan saiz unsur tersebut.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Mari kita pertimbangkan div dengan dimensi 500 piksel kali 300 piksel. Jika kami tidak menentukan sebarang jidar, ia akan dijajarkan secara automatik ke penjuru kiri sebelah atas skrin. Sebaliknya, menentukan margin sebagai auto akan memusatkannya dalam bekas induk, dalam kes ini teg badan.
<!DOCTYPE html> <html lang="en"> <head> <title>Margin: 0 auto example</title> </head> <body style="background-color: coral; margin: 0; padding: 0; font-size: larger; font-weight: bold;"> <div style="width: 500px; height: 300px; border: 1px solid black; background-color: aqua;">No set margin</div> <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: auto;">Margin set to 0</div> </body> </html>
Gunakan margin: 0 auto
Sekarang, apa yang berlaku jika kita cuba menetapkan margin menggunakan dua nilai? Setiap kali kita cuba menggunakan margin dan memberikan dua nilai, nilai pertama dianggap sebagai nilai untuk margin atas dan bawah, manakala nilai kedua digunakan untuk margin kiri dan kanan.
Soalan kami adalah untuk menerangkan, "Bagaimanakah ia akan berfungsi jika kami menggunakan atribut auto sebagai nilai kedua margin.
Jawapannya ialah, "Ia akan menjajarkan elemen secara menegak ke tengah elemen induknya dengan mengira jidar kiri dan kanan secara automatik." Terjemahan bahasa Cina bagi Contoh
ialah:Contoh
Pertimbangkan perkara yang sama seperti contoh di atas, tetapi tetapkan margin kepada 0 auto.
<!DOCTYPE html> <html lang="en"> <head> <title>Margin: 0 auto example</title> </head> <body style="background-color: coral; margin: 0; padding: 0; font-size: larger; font-weight: bold;"> <div style="width: 500px; height: 300px; border: 1px solid black; background-color: burlywood; margin: 0 auto;">Margin set to 0 auto</div> </body> </html>
Kesimpulan
Dalam artikel ini, kami mempelajari tentang maksud
margindalam CSS, peranan sifat auto dalam CSS dan cara tingkah lakunya berubah apabila kami menggunakannya sebagai nilai margin kedua. Jawapan awal kami ialah menjajarkan elemen secara menegak dengan induknya dengan mengira margin kiri dan kanan secara automatik.
Atas ialah kandungan terperinci Dalam CSS, bagaimanakah atribut auto dalam "margin: 0 auto" berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!