亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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>浮動(dòng)模型</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>