1. Trois façons de mettre en page une page Web traditionnelle
L'essence de la mise en page d'une page Web : utilisez CSS pour placer des cases et placez les cases aux positions correspondantes.
CSS propose trois méthodes de mise en page traditionnelles (en termes simples, comment les boîtes sont disposées).
(1) Flux ordinaire (flux standard)
(2) Flottant
(3) Positionnement
Cela ne concerne que la mise en page traditionnelle. En fait, il existe des méthodes de mise en page spéciales et avancées.
2. Flux standard (flux ordinaire/flux de documents)
Ce qu'on appelle le flux standard : les balises sont disposées d'une manière par défaut prescrite.
(1) Les éléments au niveau du bloc occuperont une ligne exclusive et seront disposés de haut en bas.
(2) Les éléments en ligne seront disposés dans l'ordre de gauche à droite et s'enrouleront automatiquement lorsqu'ils toucheront le bord de l'élément parent.
Ce qui précède sont toutes des dispositions de flux standard. Ce que nous avons étudié plus tôt est le flux standard. Le flux standard est la méthode de disposition la plus basique.
Ces trois méthodes de disposition sont toutes utilisées pour placer les cases. Lorsque les cases sont placées à la position appropriée, la disposition est naturellement terminée.
Remarque : Dans le développement actuel, une page contient essentiellement ces trois méthodes de mise en page (le terminal mobile apprendra de nouvelles méthodes de mise en page plus tard).
3. Pourquoi le flottement est-il nécessaire ?
Question : Pouvons-nous facilement obtenir les effets suivants en utilisant des flux standards ?
1. Comment disposer horizontalement plusieurs boîtes de niveau bloc (divs) dans une rangée ?
Bien que la conversion en éléments de bloc en ligne puisse obtenir une ligne d'affichage, il y aura un grand espace blanc entre eux, ce qui est difficile à contrôler.
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< titre>Bloc en ligne Il y a des espaces entre</title><style>div{width:150px;height:200px;background-color:#d87093;display:inline-block;}</style></head><body><div> 1< /div><div>2</div><div>3</div></body></html>Résultats en cours d'exécution :
2. Comment aligner deux cases à gauche et à droite ?
Il existe de nombreux effets de mise en page qui ne peuvent pas être réalisés par le flux standard. À l'heure actuelle, le flottement peut être utilisé pour compléter la mise en page. Parce que le flottement peut modifier la disposition par défaut des étiquettes des éléments.
L'application la plus typique des flottants : permettre à plusieurs éléments de niveau bloc d'être affichés dans une rangée.
La première règle de mise en page d'une page Web : plusieurs éléments de niveau bloc disposés verticalement recherchent un flux standard, plusieurs éléments de niveau bloc disposés horizontalement recherchent un flotteur !
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< titre>Beaucoup Les éléments au niveau du bloc sont disposés horizontalement et flottants</title><style>div{float:left;width:150px;height:200px;background-color:#d87093;}</style></head><body>< div >1</div><div>2</div><div>3</div></body></html>Résultats en cours d'exécution :
4. Qu'est-ce qui flotte ?
La propriété float est utilisée pour créer une boîte flottante, en la déplaçant de côté jusqu'à ce que le bord gauche ou droit touche le bord du bloc conteneur ou une autre boîte flottante.
grammaire:
Sélecteur {float : valeur d'attribut ;}Exemple:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width, initial-scale=1.0><title>Document</title><style>/*Les étiquettes flottantes sont alignées en haut*//*Flottantes : disposées sur une seule ligne, la largeur et la hauteur prennent effet --les étiquettes flottantes ont les caractéristiques d'une ligne blocs*/.un{largeur:100px;hauteur:100px;fond-colo r:pink;float:left;margin-top:50px;}.two{width:200px;height:200px;background-color:skyblue;float:left;/*Parce qu'il y a un float, il ne peut pas prendre effet - la boîte ne peut pas être centré horizontalement* /margin:0auto; }.trois{width:300px;height:300px;background-color:orange;}</style></head><body><div>un</div><div>deux</div><div>trois </div></body></html>Résultats en cours d'exécution :
