Senarai lengkap sifat susun atur CSS: paparan, kedudukan dan apungan-tutorial css-php.cn

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

WBOY

Lepaskan： 2023-10-20 17:36:25

asal

938 orang telah melayarinya

CSS 布局属性大全：display，position 和 float

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.

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

ialah elemen blok biasa.

div {
  display: block;
}

Salin selepas log masuk

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

span {
  display: inline;
}

Salin selepas log masuk

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

img {
  display: inline-block;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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%);
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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!