cari

Rumah >hujung hadapan web >tutorial css >Susun atur grid CSS moden yang mudah dan responsif

Susun atur grid CSS moden yang mudah dan responsif

Joseph Gordon-Levitt
Joseph Gordon-Levittasal
2025-02-10 10:13:10749semak imbas

Easy and Responsive Modern CSS Grid Layout

mata teras

    grid CSS adalah sistem susun atur yang kuat yang membolehkan penciptaan struktur grid dalam CSS, bukan dalam HTML. Kebanyakan pelayar moden menyokongnya, kecuali IE11, yang menyokong versi lama.
    • Artikel ini menunjukkan cara membuat susun atur grid CSS moden yang responsif, secara beransur -ansur menambah grid CSS dan menyediakan kod sandaran untuk pelayar yang lebih tua. Ini termasuk teknologi untuk elemen pusat, projek span, dan menyesuaikan susun atur peralatan kecil.
    • Grid CSS menyediakan utiliti seperti
  • dan grid-column untuk mencari item grid, serta sifat seperti grid-row, justify-items dan align-items untuk menyelaraskan dan menyesuaikan item. Ia juga membolehkan grid bersarang, di mana unsur -unsur kanak -kanak grid sendiri boleh menjadi bekas grid. align-self
    • Untuk peranti skrin kecil, anda boleh menukar struktur susun atur dengan mudah untuk linearize dengan grid CSS, mentakrifkan semula kawasan grid dan menggunakan pertanyaan media. Ini menjadikan susun atur yang lebih mudah di skrin yang lebih kecil.
Artikel ini akan menunjukkan cara membuat susun atur grid CSS moden yang responsif, menunjukkan cara menggunakan kod balik balik untuk pelayar yang lebih tua, bagaimana untuk menambah langkah grid CSS, dan bagaimana untuk membina semula susun atur pada peranti kecil dan menggunakan atribut penjajaran yang berpusat unsur -unsur.

Dalam artikel sebelumnya, kami meneroka empat teknik yang berbeza untuk membina susun atur grid responsif yang mudah. Jawatan itu ditulis pada tahun 2014 - sebelum grid CSS tersedia - jadi dalam tutorial ini kita akan menggunakan struktur HTML yang sama tetapi dengan susun atur grid CSS moden.

Dalam tutorial ini, kami akan menggunakan Float untuk membuat demo dengan susun atur asas dan kemudian meningkatkannya dengan grid CSS. Kami akan menunjukkan banyak utiliti berguna seperti elemen yang berpusat, merangkumi projek, dan mudah mengubah susun atur pada peranti kecil dengan mentakrifkan semula kawasan grid dan menggunakan pertanyaan media. Anda boleh mencari kod dalam codepen ini:

pautan codepen

susun atur grid CSS moden responsif

Sebelum kita menyelam untuk membuat demonstrasi grid responsif, mari kita mula memperkenalkan grid CSS.

CSS Grid adalah sistem dua dimensi yang kuat yang ditambah kepada pelayar yang paling moden pada tahun 2017. Ia benar -benar mengubah cara kami membuat susun atur HTML. Susun atur grid membolehkan kami membuat struktur grid dalam CSS, bukan dalam HTML.

Di samping IE11, penyemak imbas yang paling moden menyokong grid CSS. Anda boleh menggunakan Caniuse.com untuk menyemak sokongan.

Susun atur grid mempunyai bekas induk yang

harta ditetapkan kepada display atau grid. Unsur -unsur kanak -kanak dari bekas adalah item grid, dan mereka terletak secara tersirat kerana algoritma grid yang kuat. Anda juga boleh menggunakan kelas yang berbeza untuk mengawal penempatan, saiz, kedudukan, dan aspek lain dari projek. inline-grid

mari kita mulakan dengan halaman HTML asas. Buat fail HTML dan tambahkan yang berikut: 

<code class="language-html"><!DOCTYPE html>


  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">


  <header>
    <h2>CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>

</code>

Kami menggunakan semantik HTML untuk menentukan tajuk, sidebar, badan, dan bahagian kaki halaman. Di bahagian utama, kami menggunakan tag <article></article> untuk menambah satu set item. <article></article> adalah tag semantik HTML5 yang boleh digunakan untuk membungkus kandungan bebas dan mandiri. Halaman tunggal boleh mengandungi sebilangan tag <article></article>.

Ini adalah tangkapan skrin halaman pada peringkat ini:

Easy and Responsive Modern CSS Grid Layout

Seterusnya, mari tambahkan gaya CSS asas. Tambahkan tag

di kepala dokumen dan tambahkan gaya berikut: <style></style> 

<code class="language-css">body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}</code>
Ini adalah halaman demo kecil, jadi kami akan gaya tag secara langsung untuk kebolehbacaan dan bukannya menggunakan sistem penamaan kelas.

Kami menggunakan terapung untuk meletakkan sidebar ke kiri, letakkan badan utama ke kanan, dan tetapkan lebar bar sisi ke lebar

6.3rem tetap. Kemudian, kami mengira dan menetapkan lebar baki bahagian badan menggunakan fungsi CSS . Bahagian utama mengandungi perpustakaan projek yang dianjurkan ke dalam blok menegak. calc()

Easy and Responsive Modern CSS Grid Layout susun atur tidak sempurna. Sebagai contoh, ketinggian bar sisi adalah berbeza dari ketinggian bahagian kandungan utama. Terdapat pelbagai teknik CSS yang dapat menyelesaikan masalah ini, tetapi kebanyakannya adalah tip atau penyelesaian. Oleh kerana susun atur ini adalah sandaran untuk grid, ia akan dilihat oleh pengguna yang lebih sedikit dan lebih sedikit. Kejatuhan itu tersedia dan cukup baik.

Versi terkini Chrome, Firefox, Edge, Opera, dan Safari semuanya menyokong grid CSS, yang bermaksud jika pelawat anda menggunakan penyemak imbas ini, anda tidak perlu risau tentang menyediakan sandaran. Anda juga perlu mempertimbangkan penyemak imbas Evergreen. Versi terkini Chrome, Firefox, Edge dan Safari adalah pelayar malar hijau. Iaitu, mereka akan mengemas kini secara automatik dan diam -diam tanpa mendorong pengguna. Untuk memastikan susun atur anda berfungsi dengan baik di setiap penyemak imbas, anda boleh memulakan dengan sandaran lalai berasaskan terapung dan kemudian memohon susun atur grid moden menggunakan teknik peningkatan progresif. Pengguna menggunakan pelayar yang lebih tua tidak akan mendapat pengalaman yang sama, tetapi itu cukup baik.

Peningkatan Progresif: Anda tidak perlu menutup segala -galanya

Apabila menambah susun atur grid CSS di atas susun atur susun atur, anda tidak perlu menulis ganti semua tag atau menggunakan gaya CSS yang berasingan:

  • Dalam penyemak imbas yang tidak menyokong grid CSS, sifat grid yang anda tambahkan akan hanya diabaikan.
  • Jika anda menggunakan float untuk elemen susun atur, ingatlah bahawa item grid mengambil keutamaan lebih terapung. Iaitu, jika anda menambah gaya float: left|right ke elemen yang juga merupakan elemen grid (anak elemen induk dengan gaya display: grid), apungan akan diabaikan dan grid diambil.
  • Peraturan @supports boleh digunakan untuk memeriksa sokongan untuk ciri -ciri tertentu dalam CSS. Ini membolehkan kita mengatasi gaya sandaran jika perlu, sementara pelayar yang lebih tua mengabaikan blok @supports.

Sekarang, mari tambahkan grid CSS ke halaman kami. Pertama, mari kita tanda sebagai bekas grid dan tetapkan lajur grid, baris, dan kawasan: 

<code class="language-html"><!DOCTYPE html>


  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">


  <header>
    <h2>CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>

</code>

Kami menggunakan harta display:grid untuk menandakan sebagai bekas grid. Kami menetapkan jurang grid 0.1VW. GAP membolehkan anda membuat slot antara sel grid dan bukannya menggunakan margin. Kami juga menambah dua lajur menggunakan grid-template-columns. Lajur pertama mengamalkan lebar tetap 6.5 REM, dan lajur kedua menggunakan lebar sisa. fr adalah unit pecahan, dan 1FR adalah sama dengan sebahagian ruang yang ada.

Seterusnya, kami menggunakan grid-template-rows untuk menambah tiga baris. Baris pertama menggunakan ketinggian tetap 6rem, baris ketiga menggunakan ketinggian tetap 3rem, dan ruang bebas yang tersisa (1FR) diperuntukkan ke baris kedua.

Kami kemudian menggunakan grid-template-areas untuk menetapkan sel -sel maya yang dihasilkan oleh persimpangan lajur dan baris ke rantau ini. Sekarang kita perlu menggunakan grid-area untuk benar -benar menentukan kawasan -kawasan yang dinyatakan dalam templat kawasan: 

<code class="language-css">body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}</code>

Kebanyakan kod balik tidak mempunyai kesan sampingan pada grid CSS, kecuali untuk lebar bahagian badan width: calc(100% - 7.2rem);, yang mengira lebar baki bahagian badan selepas menolak lebar sidebar ditambah ruang margin/pengisian.

Ini adalah tangkapan skrin hasilnya. Sila ambil perhatian bahawa kawasan utama tidak menduduki semua lebar yang tinggal:

Easy and Responsive Modern CSS Grid Layout

Untuk menyelesaikan masalah ini, kita boleh menambah

apabila menyokong grid: width: auto; 

<code class="language-css">body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}</code>
Ini adalah tangkapan skrin hasil semasa:

Easy and Responsive Modern CSS Grid Layout Tambah mesh bersarang

Elemen kanak -kanak grid itu sendiri boleh menjadi bekas grid. Mari kita tetapkan bahagian utama sebagai bekas grid: 

<code class="language-html"><!DOCTYPE html>


  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">


  <header>
    <h2>CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>

</code>

Kami menggunakan jurang grid 0.1VW dan gunakan fungsi repeat(auto-fill, minmax(12rem, 1fr)); untuk menentukan lajur dan baris. Pilihan auto-fill cuba mengisi ruang bebas dengan seberapa banyak lajur atau baris yang mungkin, dan mewujudkan lajur atau baris tersirat jika diperlukan. Jika anda ingin meletakkan lajur atau baris yang ada ke dalam ruang yang ada, anda perlu menggunakan auto-fit. Baca penjelasan yang baik mengenai perbezaan antara auto-fill dan auto-fit.

Ini adalah tangkapan skrin hasilnya:

Easy and Responsive Modern CSS Grid Layout

Gunakan grid

, grid-column dan grid-row kata kunci span

grid CSS menyediakan

dan grid-column, yang membolehkan anda mencari item grid dalam grid induk menggunakan garisan grid. Mereka adalah singkatan untuk sifat berikut: grid-row

  • : Tentukan kedudukan permulaan item grid dalam baris grid grid-row-start
  • : Tentukan kedudukan akhir item grid dalam baris grid grid-row-end
  • : Tentukan kedudukan permulaan item grid dalam lajur grid grid-column-start
  • : Tentukan kedudukan akhir item grid dalam lajur grid grid-column-end
anda juga boleh menggunakan kata kunci

untuk menentukan berapa lajur atau baris untuk rentang. span

mari kita membuat elemen kanak -kanak kedua kawasan utama merangkumi empat lajur dan dua baris dan meletakkannya dari lajur kedua dan baris pertama (yang juga kedudukan lalainya): 

<code class="language-css">body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}</code>
Ini adalah tangkapan skrin hasilnya:

Easy and Responsive Modern CSS Grid Layout menggunakan utiliti penjajaran grid

Kami mahu memusatkan teks dalam tajuk, sidebar dan footer, dan nombor dalam elemen

.

<article></article> grid CSS menyediakan enam sifat

,

, justify-items, align-items, justify-content, align-content, justify-self, dan align-self yang boleh digunakan untuk menyelaraskan dan menyesuaikan item grid . Mereka sebenarnya adalah sebahagian daripada modul penjajaran kotak CSS.

Tambahkan yang berikut dalam header, aside, article dan footer pemilih: 

<code class="language-css">body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}</code>
  • justify-items digunakan untuk menyesuaikan item grid di sepanjang paksi baris atau arah mendatar.
  • align-items Align item grid di sepanjang paksi lajur atau arah menegak. Mereka semua boleh mengambil start, end, center, dan stretch nilai.

Ini adalah tangkapan skrin selepas elemen berpusat:

Easy and Responsive Modern CSS Grid Layout

membina semula susun atur grid dalam peranti kecil

susun atur demo kami adalah mudah untuk skrin sederhana dan besar, tetapi mungkin bukan cara terbaik untuk membina halaman untuk peranti skrin kecil. Dengan grid CSS, kita dapat dengan mudah mengubah struktur susun atur ini untuk secara linearize dalam peranti kecil -dengan mentakrifkan semula kawasan grid dan menggunakan pertanyaan media.

Berikut adalah tangkapan skrin sebelum menambahkan kod untuk membina semula susun atur pada peranti kecil:

Easy and Responsive Modern CSS Grid Layout

Sekarang, tambahkan kod CSS berikut: 

<code class="language-html"><!DOCTYPE html>


  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">


  <header>
    <h2>CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>

</code>
pada peranti dengan lebar kurang daripada 575 piksel, susun atur menjadi linear:

Easy and Responsive Modern CSS Grid Layout Perhatikan bahawa lebar bar sisi tidak mengisi lebar yang ada. Ini disebabkan oleh kod sandaran, jadi yang perlu kita lakukan ialah menggunakan

override

pada penyemak imbas yang dibolehkan grid width: auto; width: 6.3rem; Ini adalah tangkapan skrin hasil akhir: 

<code class="language-css">body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}</code>

Anda boleh mencari kod akhir dalam codepen yang dipaparkan pada permulaan artikel ini, atau secara langsung mengakses codepen:

pautan codepen Easy and Responsive Modern CSS Grid Layout

Kesimpulan

Dalam tutorial ini, kami membuat susun atur demo responsif menggunakan grid CSS. Kami menunjukkan menggunakan kod sandaran untuk pelayar yang lebih tua, langkah demi langkah menambah grid CSS, membina semula susun atur dalam peranti kecil, dan menggunakan elemen pusat atribut penjajaran.

Soalan Lazim mengenai susun atur grid CSS moden yang mudah dan responsif

Apakah perbezaan antara grid CSS dan Flexbox? Grid CSS dan Flexbox adalah kedua -dua sistem susun atur yang kuat dalam CSS. Walaupun mereka boleh digunakan secara bergantian dalam beberapa kes, mereka masing -masing mempunyai kelebihan unik mereka sendiri. Flexbox adalah model susun atur satu dimensi yang sangat sesuai untuk memberikan item di sepanjang lajur atau baris. Grid CSS, sebaliknya, adalah sistem susun atur dua dimensi yang sesuai untuk mengatur unsur-unsur dalam baris dan lajur pada masa yang sama. Ia sesuai untuk mewujudkan susun atur web yang kompleks.

bagaimana membuat susun atur grid CSS saya responsif?

grid CSS menjadikannya mudah untuk membuat susun atur responsif tanpa pertanyaan media. Anda boleh menggunakan unit

, yang mewakili sebahagian ruang yang tersedia dalam bekas grid. Sebagai contoh, jika anda mahu tiga lajur monospace, anda boleh menggunakan

. Lajur akan mengubah saiz secara automatik agar sesuai dengan skrin.

Bolehkah saya menggunakan grid css dan flexbox bersama -sama? fr grid-template-columns: 1fr 1fr 1fr Ya, grid CSS dan Flexbox boleh digunakan bersama untuk susun atur. Anda boleh menggunakan grid CSS untuk membuat susun atur halaman keseluruhan dan kemudian gunakan Flexbox untuk susun atur komponen individu atau bahagian dalam sel grid. Gabungan ini membolehkan tahap fleksibiliti dan kawalan yang tinggi ke atas susun atur.

Bagaimana untuk menyelaraskan item dalam grid CSS?

Grid CSS menyediakan beberapa sifat untuk menyelaraskan item, termasuk justify-items, align-items, justify-self, dan align-self. Ciri -ciri ini boleh digunakan untuk menyelaraskan item di sepanjang paksi baris (Align) atau paksi lajur (Align). Sebagai contoh, justify-items: center akan memusatkan item di sepanjang paksi garis.

Bagaimana untuk membuat jurang antara projek grid?

anda boleh menggunakan harta untuk membuat jurang antara item grid. Harta ini adalah singkatan untuk grid-gap dan grid-row-gap. Sebagai contoh, grid-column-gap akan membuat jurang 20px antara semua item grid. grid-gap: 20px Bagaimanakah kata kunci

dan auto-fill berfungsi dalam grid CSS? auto-fit Kata kunci

dan auto-fill digunakan dengan fungsi auto-fit dalam sifat grid-template-columns dan grid-template-rows. repeat() Gunakan sebanyak mungkin item untuk mengisi baris atau lajur, dan buat sel kosong jika terdapat item yang tidak mencukupi. auto-fill berkelakuan sama, tetapi ia runtuh sel kosong, menjadikan item meregangkan untuk mengisi baris atau lajur. auto-fit

Bagaimana untuk bertindih item dalam grid CSS?

Dalam grid CSS, anda boleh bertindih dengan meletakkan item pada sel grid yang sama atau memilikinya merangkumi pelbagai sel. Anda boleh menggunakan atribut

untuk mengawal susunan item tumpang tindih. z-index

Bolehkah saya menggunakan grid CSS dalam semua pelayar saya?

grid CSS disokong oleh semua pelayar moden seperti Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, Internet Explorer tidak menyokongnya. Jika anda perlu menyokong Internet Explorer, anda mungkin perlu menggunakan susun atur sandaran.

Bagaimana untuk membuat grid bersarang dalam grid CSS?

anda boleh membuat mesh bersarang dengan menetapkan item mesh itu sendiri sebagai bekas mesh. Hanya gunakan

untuk projek grid anda dan tentukan susun atur grid seperti yang anda lakukan untuk sebarang bekas grid. display: grid

Bagaimana untuk mengawal saiz trek grid dalam grid CSS?

anda boleh menggunakan sifat

dan grid-template-rows untuk mengawal saiz trek grid (baris dan lajur). Anda boleh menentukan saiz menggunakan pelbagai unit, seperti piksel (px), peratusan (%), atau pecahan (FR). grid-template-columns

Sila ambil perhatian bahawa kandungan di atas telah menulis semula dan menggilap teks asal, berusaha untuk menjadikan artikel itu lebih lancar, lebih mudah dibaca, dan lebih banyak lagi dengan gaya penulisan artikel dalam talian moden tanpa mengubah makna asal. Format imej tetap sama. Pautan Codepen tidak tersedia kerana ketidakupayaan untuk mengakses laman web dan fail luaran. Sila ganti sendiri.

Atas ialah kandungan terperinci Susun atur grid CSS moden yang mudah dan responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html5 firefox css chrome safari html edge Float auto 堆 选择器 display column 算法
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Tatal Snap dalam CSS: Mengawal Tindakan SkrolArtikel seterusnya：Tatal Snap dalam CSS: Mengawal Tindakan Skrol

Artikel berkaitan

Lihat lagi