Rumah > Artikel > hujung hadapan web > Mari kita bincangkan tentang beberapa cara untuk menggunakan CSS untuk merealisasikan susun atur grid sembilan persegi!
Artikel ini akan berkongsi dengan anda beberapa kaedah menggunakan CSS untuk melaksanakan reka letak grid sembilan segi empat sama, dan memperkenalkan perbezaan antara jenis ke-n dan anak-anak saya harap ia akan membantu semua orang!
Dalam beberapa hari lalu, saya sering melihat soalan pada skrin, "Susun atur grid sembilan persegi." Saya mencuba beberapa kaedah untuk melaksanakan reka letak grid sembilan persegi, dan mendapati ia melibatkan banyak css
pengetahuan, jadi saya merekodkannya.
Saya rasa artikel ini sangat bagus Anda boleh merujuk kepada cara tuan menulis grid sempadan! # Jangan memandang rendah Jiugongge Satu soalan boleh mendedahkan warna sebenar calon!
Kaedah pelaksanaan berikut semuanya adaptif
Susun atur asas dan Gaya
<div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div>
.box { background: #e4f7fd61; border: 2px solid #0786ada1; border-radius: 8px; } ul { padding: 0; margin: 0; } .box li { list-style: none; text-align: center; line-height: 200px; background: skyblue; border-radius: 8px; font-size: 20px; color: black; }
Pelaksanaan 1: flex
Menggunakan flex
pelaksanaan reka letak perlu perhatikan satu perkara, anda perlu menggunakan atribut flex-wrap
untuk menjadikannya balut baris.
.box { width: 100%; overflow: hidden; } ul { width: 100%; height: 100%; display: flex; flex-wrap: wrap; } .box li { width: 30%; height: 30%; margin-right: 5%; margin-bottom: 5%; } .box li:nth-of-type(3n) { margin-right: 0; } .box li:nth-of-type(n+7) { margin-bottom: 0; }
Pelaksanaan 2: terapung
Menggunakan float
untuk melaksanakan perlu memberi perhatian kepada satu titik, terapung akan menyebabkan terapung runtuh , jadi anda boleh Tetapkan overflow: hidden;
Tetapkan box
kepada BFC untuk menyelesaikan keruntuhan apungan.
.box { width: 100%; overflow: hidden; } ul { width: 100%; height: 100%; } .box li { width: 30%; height: 30%; margin-right: 5%; margin-bottom: 5%; float: left; } .box li:nth-of-type(3n) { margin-right: 0; } .box li:nth-of-type(n+7) { margin-bottom: 0; }
Pelaksanaan tiga: grid
<div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>
box { background: #e4f7fd61; border: 2px solid #0786ada1; border-radius: 8px; } .grid { display: grid; width: 100%; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); grid-gap: 5%; grid-auto-flow: row; } .grid>div { list-style: none; text-align: center; line-height: 200px; background: skyblue; border-radius: 8px; font-size: 20px; color: black; }
Pelaksanaan 4: jadual
Terdapat beberapa kelemahan dalam menggunakan jadual untuk melaksanakannya table
Jarak antara sel dilaksanakan menggunakan atribut border-spacing
dan . bentuk peratusan tidak disokong dan terdapat kesan jidar yang serupa dengan margin
di sekeliling sel.
<div class="box"> <ul> <li> <div>1</div> <div>2</div> <div>3</div> </li> <li> <div>4</div> <div>5</div> <div>6</div> </li> <li> <div>7</div> <div>8</div> <div>9</div> </li> </ul> </div>
.box { width: 100%; overflow: hidden; } ul { width: 100%; height: 100%; display: table; border-spacing: 10px; } .box li { display: table-row; } .box li div { display: table-cell; text-align: center; border-radius: 10px; }
Saya menggunakan atribut nth-of-type
untuk melaksanakan sembilan -reka letak grid persegi di atas Untuk melaksanakan margin-right: 0
dalam lajur terakhir dan margin-bottom: 0
dalam baris terakhir. Kemudian saya teringat bahawa css
juga mempunyai atribut nth-child
Saya akan merekodkan perbezaan antara keduanya di sini.
jenis kenth
MDN: :nth-of-type(n)
Kelas pseudo ini adalah untuk nod dengan set daripada adik-beradik Tag , menggunakan n untuk menapis kedudukan sekumpulan nod adik-beradik.
Seperti yang dapat dilihat dari gambar di atas, kerana jenis ke-nth dia adalah unsur adik-beradik ke- elemen semasa , jadi p:nth-of-type(4)
ialah elemen p
keempat, iaitu, tidak kira apa elemen yang ditambahkan pada tengah, hanya elemen ke-n bagi elemen label semasa boleh dipilih.
anak ke-1
MDN: :nth-child(an b)
Kelas pseudo ini mula-mula mencari semua unsur adik-beradik semasa elemen, Kemudian susun daripada 1 mengikut urutan kedudukan, dan hasil yang dipilih ialah set elemen yang dipadankan dengan ungkapan (an b) dalam kurungan anak ke-n (n=0, 1, 2, 3...)
nth-child
ialah elemen semasa ke-n bagi unsur adik-beradik unsur semasa, iaitu unsur ke-n elemen teg semasa selepas semua unsur adik-beradik diisih.
Seperti yang dapat dilihat daripada rajah di atas, anak ke-nth ialah anak ke-selepas menyusun semua elemen adik-beradik dalam elemen semasa Elemen teg semasa ialah , jadi p:nth-child(4)
berada di kedudukan ke-4
Elemen p
untuk bit. Jika kedudukan ke-4 ialah elemen tag lain, ia tidak boleh diperolehi, seperti yang ditunjukkan dalam rajah di bawah:
Selamat datang semua menyertai kami dalam kawasan komen Berkomunikasi dan maju bersama!
(Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Mari kita bincangkan tentang beberapa cara untuk menggunakan CSS untuk merealisasikan susun atur grid sembilan persegi!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!