Rumah > Artikel > hujung hadapan web > Adakah float baru kepada css3?
Adakah float baru kepada css3?
- WBOYasal
- 2022-04-11 17:49:102068semak imbas
Terapung bukanlah perkara baharu kepada CSS3. Atribut apungan boleh digunakan untuk menentukan arah di mana elemen terapung Atribut ini telah tersedia dalam CSS1 tidak kira apa elemen yang ditetapkan untuk terapung, selepas menetapkan apungan, elemen akan menjana kotak peringkat blok sintaks ialah "elemen {float :value;}".
Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.
Adakah terapung tambahan baharu pada CSS3 Atribut apungan
mentakrifkan ke arah mana elemen terapung. Dari segi sejarah, sifat ini sentiasa digunakan pada imej, menyebabkan teks membungkus imej, tetapi dalam CSS, sebarang elemen boleh diapungkan. Elemen terapung mencipta kotak peringkat blok, tanpa mengira jenis elemen itu.
Jika unsur terapung tidak diganti, nyatakan lebar yang jelas jika tidak, ia dibuat sekecil mungkin.
Nota: Jika terdapat sedikit ruang untuk elemen terapung pada satu baris, elemen tersebut akan melompat ke baris seterusnya Proses ini akan diteruskan sehingga baris tertentu mempunyai ruang yang mencukupi. Arah mendatar elemen
terapung, yang bermaksud elemen itu hanya boleh bergerak ke kiri dan ke kanan tetapi tidak ke atas dan ke bawah.
Elemen terapung akan bergerak sejauh kiri atau kanan yang mungkin sehingga tepi luarnya menyentuh sempadan kotak yang mengandungi atau kotak terapung lain.
Elemen selepas elemen terapung akan mengelilinginya.
Elemen sebelum elemen terapung tidak akan terjejas.
Jika imej diapungkan ke kanan, aliran teks berikut akan dibalut di sebelah kirinya:
Contohnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123/title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" style="max-width:90%" style="max-width:90%" / alt="Adakah float baru kepada css3?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>Hasil output:
(Belajar perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Adakah float baru kepada css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!