communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison interface Web tutoriel HTML Quelle est la relation entre la couche flottante div et la couche div par défaut ?

Quelle est la relation entre la couche flottante div et la couche div par défaut ?

php中世界最好的语言
php中世界最好的语言
Nov 22, 2017 pm 05:45 PM
Quoi 关系 默认

En parlant de flottantTout d'abord, nous devons comprendre un concept, pourquoi définissons-nous le style flottant ? Parce que je veux que la boîte DIVObject soit disposée à gauche ou à droite. De cette façon, nos pages Web peuvent être plus belles et plus interactives. Alors, quelle est la différence entre le DIV flottant et le DIV par défaut ? Jetons un coup d'œil à

Quelle est la différence entre la couche flottante div et la couche div ? Quelle est la relation en CSS ?

Tout d'abord, la couche flottante DIV et la couche DIV font toutes deux référence à DIV. mise en page. Généralement, les feuilles de style CSS sont utilisées pour ajouter des combinaisons de balises DIV pour mettre en page les pages Web. Le calque

div comprend généralement un calque flottant div. Le calque flottant div indique que le div est ajouté au style css flottant , on l'appelle donc un calque flottant div sans le flottant. style flottant, il n'a pas d'effet flottant, donc si aucun style flottant n'est ajouté au div, cela ne s'appelle pas un calque flottant. Bien sûr, les balises telles que span, h1, ul et li sont également des couches, mais les balises telles que span, h1, ul et li ne sont pas utilisées aussi fréquemment que div, donc div est généralement utilisé comme nom symbolique.

Ensuite, laissez-moi vous dire ce qu'est un calque normal et qu'est-ce qu'un calque flottant ? Pourquoi utiliser la couche flottante div CSS.

L'exemple de code HTML DIV+CSS complet est le suivant

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>div层与浮动层</title> 
<style> 
.div{ width:400px; height:100px} 
.div-a{ float:left; border:1px solid #F00; width:100px; height:80px} 
.div-b{ float:right; border:1px solid #00F; width:100px; height:80px} 
</style> 
</head> 
<body> 
<div class="div"> 
<div class="div-a"></div> 
<div class="div-b"></div> 
</div> 
</body> 
</html>
Copier après la connexion

L'objet ".div" n'est pas défini pour flotter, ".div-a" est défini pour flotter vers le left (float:left), ". "div-b" est défini pour flotter vers la droite (float:right).

Résumé des calques et calques flottants

Dans l'exemple ci-dessus, l'objet ".div" est un calque normal, et la valeur par défaut est un calque sans effet flottant car la page web le contenu est à gauche. Vous pouvez voir que ce calque est à gauche. Il s'agit en fait d'un calque de boîte DIV sans style flottant. Les enfants ".div-a" et ".div-b" à l'intérieur de l'objet sont définis pour flotter, ils deviennent donc des calques flottants. Comme le montre ce qui précède, l'un flotte vers la gauche et l'autre vers la droite. la case ".div". La différence entre un calque normal et un calque flottant réside dans la définition ou non du style flottant CSS.

Les différences de flottement vous ont été présentées très clairement. Pour des informations plus intéressantes, veuillez prêter attention au site Web php chinois Autres articles connexes !

Lecture connexe :

Comment utiliser la balise span en html

Comment utiliser la balise