Dalam CSS, bagaimanakah atribut auto dalam 'margin: 0 auto' berfungsi?-html tutorial-php.cn

Dalam CSS, bagaimanakah atribut auto dalam 'margin: 0 auto' berfungsi?

王林

Lepaskan： 2023-08-28 10:57:02

ke hadapan

1012 orang telah melayarinya

在CSS中，"margin: 0 auto"中的auto属性是如何工作的？

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

Salin selepas log masuk

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 bagi

Contoh

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>

Salin selepas log masuk

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>

Salin selepas log masuk

Kesimpulan

Dalam artikel ini, kami mempelajari tentang maksud

margin

dalam 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!