Apakah susun atur biasa dalam CSS?

Reka letak biasa dalam CSS ialah: 1. Pemusatan mendatar, elemen sebaris dipusatkan secara mendatar, elemen peringkat blok dipusatkan secara mendatar dan elemen peringkat berbilang blok dipusatkan secara mendatar; elemen sebaris dipusatkan secara menegak dan berbilang elemen baris dipusatkan secara menegak 3. Gunakan reka letak flex 4. Reka letak satu lajur 5. Reka letak dua lajur;

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

1. Pemusatan mendatar:

Pemusatan mendatar bagi elemen sebaris

Gunakan penjajaran teks: pusat untuk mencapai sebaris dalam elemen peringkat blok Elemen berpusat secara mendatar. Kaedah ini berkesan untuk pemusatan mendatar elemen sebaris (sebaris), blok sebaris (blok sebaris), jadual sebaris (jadual sebaris), dan elemen lentur sebaris.

Kod teras:

.center-text {
  text-align: center;
}

Pusat elemen aras blok secara mendatar

Dengan menetapkan jidar kiri dan jidar kanan unsur aras blok lebar tetap kepada auto, anda boleh Pusatkan elemen peringkat blok secara mendatar.

Kod teras:

.center-block {
  margin: 0 auto;
}

Pemusatan mendatar berbilang elemen peringkat blok

Gunakan blok sebaris

Jika terdapat dua atau lebih dalam baris Untuk elemen peringkat blok, berbilang elemen peringkat blok boleh dipusatkan secara mendatar dengan menetapkan jenis paparan elemen peringkat blok kepada blok sebaris dan atribut penjajaran teks bekas induk.

Kod teras:

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

2 Pempusatan menegak

Elemen sebaris satu baris (sebaris-) berpusat secara menegak

Pusatkan elemen secara menegak dengan menetapkan ketinggian (ketinggian) dan ketinggian garis (ketinggian garis) sama.

Kod teras:

#v-box {
    height: 120px;
    line-height: 120px;
}

Elemen berbilang baris dipusatkan secara menegak

Gunakan susun atur jadual (jadual)

Gunakan penjajaran menegak: tengah susun atur jadual Pemusatan menegak elemen kanak-kanak boleh dicapai.

Kod teras:

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

3 Gunakan susun atur fleksibel (flex)

Gunakan susun atur lentur untuk mencapai pemusatan menegak, di mana arah lentur. : lajur mentakrifkan arah paksi utama sebagai menegak. Oleh kerana reka letak flex ditakrifkan dalam CSS3, terdapat isu keserasian dalam pelayar lama.

Kod teras:

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

4. Reka letak lajur tunggal

Terdapat dua jenis utama:

- pengepala , kandungan, Pengaki mempunyai lebar yang sama dan mempunyai lebar maksimum

-pengepala dan pengaki menduduki 100% daripada lebar penyemak imbas dan kandungan mempunyai lebar maksimum

Jenis pertama

<header style="background-color: red; width: 600px; margin: 0 auto;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

Jenis kedua:

<header style="background-color: red;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow;">尾部</footer>

5. terapung untuk menarik bar sisi dan kandungan utama ke dalam satu baris Kemudian tetapkan margin kandungan utama.

Pembelajaran yang disyorkan:

tutorial video css

Atas ialah kandungan terperinci Apakah susun atur biasa dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!