Senarai lengkap sifat susun atur CSS: paparan, kedudukan dan apungan

Atribut reka letak CSS: paparan, kedudukan dan apungan

CSS ialah bahasa penanda yang digunakan untuk mengawal gaya halaman web. Sifat susun atur adalah sangat penting semasa mereka bentuk reka letak halaman web. CSS menyediakan pelbagai sifat susun atur, yang paling biasa digunakan ialah paparan, kedudukan dan apungan. Dalam artikel ini, kami akan memperkenalkan tiga sifat susun atur ini secara terperinci dan memberikan contoh kod khusus.

1. atribut paparan
   Atribut paparan digunakan untuk menentukan jenis paparan elemen. Nilai atribut paparan biasa adalah seperti berikut:

1.1 blok
Elemen blok menduduki baris eksklusif, sentiasa mula dipaparkan dari baris baharu dan mengisi lebar elemen induk. Sebagai contoh, elemen dc6dce4a544fdca2df29d5ac0ea9906b ialah elemen blok biasa.

div {
  display: block;
}

1.2. Elemen sebaris
sebaris tidak akan menduduki garisan dengan sendirinya, hanya menempati ruang yang diperlukan. Contohnya, elemen 45a2772a6b6107b401db3c9b82c049c2 ialah elemen sebaris biasa.

span {
  display: inline;
}

1.3. elemen blok sebaris
blok sebaris tidak akan menduduki satu baris, tetapi lebar dan ketinggian boleh ditetapkan. Contohnya, elemen a1f02c36ba31691bcfe87b2722de723b ialah elemen blok sebaris biasa.

img {
  display: inline-block;
}

1.4.tiada elemen tidak akan dipaparkan dan akan dialih keluar daripada aliran dokumen. Sebagai contoh, anda boleh menyembunyikan elemen dengan menetapkan paparan: tiada.

.hidden {
  display: none;
}

atribut kedudukan
2. Atribut kedudukan digunakan untuk menentukan cara sesuatu elemen diletakkan. Nilai atribut kedudukan biasa adalah seperti berikut:
   

2.1 statik

statik ialah kaedah penentududukan lalai, dan elemen dibentangkan dalam susunan aliran dokumen.

div {
  position: static;
}

2.2. Kedudukan relatif

relatif kepada kedudukan awalnya sendiri. Kedudukan sesuatu elemen boleh dilaraskan dengan menggunakan sifat atas, bawah, kiri dan kanan.

div {
  position: relative;
  top: 10px;
  left: 20px;
}

2.3. mutlak

mutlak diposisikan secara relatif kepada unsur induk, atau diposisikan secara relatif kepada unsur nenek moyang terdekat dengan atribut kedudukan (kedudukan tidak statik).

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.4. tetap

ditetapkan diposisikan relatif kepada tetingkap penyemak imbas dan tidak akan menukar kedudukan semasa bar skrol menatal.

div {
  position: fixed;
  top: 0;
  right: 0;
}

atribut terapung
3. atribut terapung digunakan untuk menentukan cara sesuatu elemen terapung. Apabila elemen ditetapkan untuk terapung, ia dialih keluar daripada aliran dokumen biasa dan terapung sejauh kiri atau kanan yang mungkin. Elemen lain akan dibentangkan di sekeliling elemen terapung.
   

img {
  float: left;
}

Di atas ialah pengenalan dan contoh kod bagi tiga sifat reka letak biasa paparan, kedudukan dan apungan. Dalam amalan, kita boleh memilih atribut reka letak yang hendak digunakan berdasarkan keperluan khusus untuk mencapai reka bentuk reka letak halaman web. Saya harap artikel ini dapat memberikan pembaca sedikit bantuan dalam susun atur CSS.

Atas ialah kandungan terperinci Senarai lengkap sifat susun atur CSS: paparan, kedudukan dan apungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!