terapung CSS

Atribut yang terlibat di sini ialah terapung dan nilainya boleh ditetapkan sebagai:

kiri: Elemen terapung ke kiri kanan: elemen terapung ke kanan tiada: tiada terapung mewarisi: Mewarisi atribut terapung daripada induk

Terdapat juga atribut yang jelas: Terutamanya digunakan untuk mengalih keluar atribut terapung dalam semua arah (termasuk atribut yang diwarisi)

Mari buat fail html dan CSS asas yang berikut:

html:

   <div class="qd"></div>
    <div class="wd"></div>
    <div class="ed"></div>
<. 🎜>CSS

.qd{    width: 100px;    height: 100px;    background-color: lightskyblue;
}.wd{    width: 100px;    height: 100px;    background-color: lightseagreen;
}.ed{    width: 100px;    height: 100px;    background-color: lightsalmon;
}

Berikut ialah kesan paparan:

QQ截图20161211183019.png

Atas dasar ini kita semua menambah Atribut terapung, dua yang pertama pergi ke kiri dan yang terakhir ke kanan untuk melihat apa kesannya:

float: left;float: right;

Rendering

QQ截图20161211183117.png

Sama seperti beberapa perkara kecil berjalan di dalam bilik, anda boleh menentukan arah di mana ia berjalan, dan ia akan berjalan ke sempadan Untuk ujian, kami juga boleh mengehadkan ruang untuk mereka (meletakkan ketiga-tiga div ke dalam satu div) ). Seperti ini:

<div class="container">
    <div class="qd"></div>
    <div class="wd"></div>
    <div class="ed"></div>
</div>

Seterusnya anda akan lihat:

QQ截图20161211183439.png

Tetapi kadangkala kita tidak memerlukan pelampung, seperti Seperti yang ditunjukkan di bawah, kami ingin menambah ayat di bawah kesan di atas, dan kemudian kami terus menambah

<div class="text">hello php</div>

dalam bekas. Kemudian kami akan melihat

QQ截图20161211183559.png

.

Ini menunjukkan bahawa div ini juga mewarisi atribut terapung Jika kami mahu fon berada di bawah, kami mesti membatalkan pengapungan div fon Kemudian kami akan menambah kandungan berikut pada CSS:

.text{    clear: both;
}

Rendering:

QQ截图20161211183809.png

Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>浮动模型</title> <style type="text/css"> div{ border:2px red solid; width:200px; height:400px; float:left; } </style> </head> <body> <div id="div1">栏目1</div> <div id="div2">栏目2</div> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!