Modèle de mise en page HTML+CSS pour une saisie facile

Dans les pages Web, les éléments ont trois modèles de mise en page :

1, modèle de flux (position : statique)

2. gauche, droite)

3, modèle de calque (position : absolue, fixe, relative)

La méthode de mise en page la plus spéciale est :

position : relative

Il conserve l'espace occupé par l'élément dans le "flow model" ou "floating model" et ne change pas le mode d'affichage de l'élément : " en ligne" ou "grumeleux". Il indique uniquement à l'élément de se déplacer par rapport à sa position d'origine. Mais il s’agit après tout d’un élément de la disposition du modèle de couche. S’il chevauche d’autres éléments, il sera affiché au-dessus des éléments de la disposition du modèle sans couche. De plus, après avoir défini le paramètre relatif, l'élément aura un modèle de boîte complet. Même pour les éléments en ligne, le réglage de la hauteur, du remplissage supérieur et inférieur et des bordures supérieure et inférieure deviendra effectif, et ces paramètres seront reflétés dans l'espace qu'il occupe. le flux de documents supérieur.

Modèle de flux

Flow est le mode de mise en page par défaut des pages Web. Tout élément qui ne définit pas spécifiquement l'attribut position:absolute; ou position:fixed; et qui n'a pas float:left; ou float:right défini, affichera le mode de mise en page animé

. par défaut.

Le modèle de disposition de flux a 4 caractéristiques typiques :

1, les éléments de bloc seront pressés de haut en bas dans l'élément contenant. L'ordre s'étend verticalement, car par défaut, la largeur des éléments du bloc est de 100 %. En fait, les éléments de bloc occuperont des positions sous forme de lignes, quelle que soit la quantité de contenu que l'élément contient ou la façon dont nous définissons la largeur de l'élément.

2. Les éléments en ligne seront affichés horizontalement de gauche à droite dans l'élément conteneur. Certaines personnes appellent cette méthode de distribution le flux de texte. Le flux de texte provient du flux naturel du texte de gauche à droite. Il est essentiellement lié à la méthode de transmission HTTP et au mécanisme d'analyse du navigateur. Une fois qu'une ligne est dépassée, elle s'enroulera automatiquement et s'affichera de haut en bas, puis continuera à s'écouler séquentiellement de gauche à droite, et ainsi de suite. Bien entendu, les lecteurs peuvent utiliser les propriétés de texte CSS pour forcer le sens du flux du texte.

3. Si deux éléments de bloc adjacents ou des éléments de bloc imbriqués ont des marges supérieure et inférieure définies, ils se chevaucheront. Le résultat du chevauchement est la valeur maximale entre les deux. Pour les chevauchements imbriqués, vous pouvez empêcher ce chevauchement en définissant la valeur de l'attribut de débordement de l'élément parent sur « auto ».

4. Les marges des éléments flottants ne se chevaucheront pas. Lorsque les éléments flottants entrent en contact avec des éléments de bloc, les éléments qui apparaissent après eux seront utilisés pour déterminer s'ils se chevauchent. D'un point de vue programmation, il est plus efficace de modifier l'arborescence DOM déjà construite que de décider comment afficher l'élément suivant. Si l'élément flottant est l'élément parent de l'élément bloc, il doit se chevaucher selon les règles ci-dessus, mais l'élément flottant calculera automatiquement la hauteur et la largeur internes, de sorte que les marges résultantes ne se chevaucheront pas.

Modèle flottant

Le modèle flottant est un autre modèle de mise en page complètement différent du flux. Il suit les règles du flottement mais peut toujours le faire. Voyez l' impact potentiel du flux sur celui-ci. Tout élément ne peut pas flotter par défaut, mais il peut être défini comme flottant à l'aide de CSS. Des éléments tels que div, list, p, table et img peuvent tous être définis comme flottants. En fait, même des éléments tels que span, strong, etc. De tels éléments en ligne peuvent également être définis comme des flotteurs.

Le modèle de mise en page flottant a les caractéristiques suivantes :

1. Tout élément défini comme float sera automatiquement défini pour bloquer l'affichage. Vous disposez ainsi d’un modèle de boîte complet.

2. Si nous ne précisons pas la largeur de l'élément flottant, l'élément flottant se rétrécira automatiquement à la largeur pouvant contenir le contenu.

3. Le modèle flottant n'entrera pas en conflit avec le modèle de flux. Lorsqu'un élément est défini comme une mise en page flottante, l'élément flottant ne flottera pas arbitrairement en dehors du flux normal du document, et son bord supérieur sera à la même position que lorsqu'il n'a pas été déclaré flottant. Mais dans le sens horizontal, son bord flottant sera aussi proche que possible du bord de l'élément conteneur (ce bord fait référence au bord intérieur du remplissage de l'élément conteneur).

4. Comme les éléments ordinaires, les éléments flottants sont toujours situés à l'intérieur de l'élément conteneur et ne flotteront pas à l'extérieur et ne détruiront pas la relation contenant l'élément, qui est différente du modèle de disposition des calques.

5. Concernant le problème des éléments fluides environnants. Bien que les éléments flottants puissent circuler avec le document, il existe néanmoins des différences essentielles entre le modèle flottant et le modèle fluide. Les éléments en ligne derrière l'élément flottant peuvent circuler autour de l'élément flottant et même dans le texte ci-dessus. L'élément block est différent : il ignore l'espace occupé par tous les éléments flottants, comme si l'élément flottant n'existait pas du tout, et détermine ainsi sa position dans le modèle de flux.

6. Concernant la problématique de l'affichage juxtaposé entre éléments flottants. Lorsque deux éléments adjacents ou plus sont définis comme flottants, les éléments flottants peuvent être affichés côte à côte s'il y a suffisamment d'espace pour les accueillir. Leurs bords supérieurs sont au même niveau. S'il n'y a pas assez d'espace, l'élément flottant suivant descendra vers un endroit pouvant l'accueillir. Cet élément déplacé vers le bas peut créer un flotteur séparé. De nombreux concepteurs aiment utiliser des modèles flottants pour mettre en page des pages Web, car cela peut résoudre le problème selon lequel les éléments de bloc dans les mises en page de modèles fluides ne peuvent pas être affichés côte à côte.

7. Lorsqu'il flotte, l'élément flottant sera aussi proche que possible de l'élément flottant précédent, écartant ainsi les autres éléments non flottants. S'il ne peut pas être compressé (comme un élément de bloc, ou s'il n'y a pas assez d'espace pour afficher l'élément en ligne et cet élément flottant sur la même ligne)

d'autres éléments seront renvoyés et affichés immédiatement ensuite à l'élément précédent après.

8. Résumé : L'élément flottant est toujours dans le flux de documents, se positionnant avec l'élément de flux de documents, mais il n'occupe pas l'espace du flux de documents.

Float clear

Seuls les éléments de bloc peuvent définir des attributs clairs, pour la définition d'éléments en ligne clear n'est pas valide. Définir "clear:both" sur un élément de bloc garantira qu'aucun élément flottant n'apparaîtra à gauche ou à droite lors de son analyse. Mais si

est un élément flottant (l'attribut float est défini), les éléments flottants suivants peuvent toujours flotter autour de lui. Lorsqu'un élément flottant définit l'attribut clear, il n'affectera aucun objet précédent, ni les objets suivants. Il n'affectera que sa propre position de mise en page. L'influence signifie ici que la position des autres objets ne sera pas activement modifiée.

Remarque : Personnellement, le nom chinois de cet attribut est mieux traduit par "propre". Il indique quel côté de l'élément actuel est garanti lorsqu'il est analysé

Il est propre et exempt de matières flottantes.

Flottant Imbriqué

Les éléments flottants peuvent être imbriqués les uns dans les autres et les règles d'imbrication sont les mêmes que pour l'imbrication d'éléments fluides. Les éléments conteneurs flottants ajusteront toujours automatiquement leur hauteur et leur largeur pour inclure les éléments enfants flottants. Les éléments qui définissent "float" calculeront automatiquement la largeur et la hauteur occupées par l'élément flottant à l'intérieur de l'élément et le rendront cohérent avec le contenu à l'intérieur de Convient . Si cet attribut n'est pas défini, la largeur et la hauteur ne peuvent pas être calculées automatiquement, ce qui entraîne un affichage anormal de la largeur et de la hauteur de l'élément parent. Vous pouvez également étendre automatiquement la largeur et la hauteur de l'élément en définissant l'attribut overflow de l'élément parent comme "auto" en .

Nidification flottante et fluide

Nidification à flux pur entre Les éléments flottants ou les éléments flottants simples sont généralement plus faciles à gérer, mais si vous intégrez des éléments flottants dans des éléments fluides, l'effet d'affichage sera très compliqué. À ce stade, les éléments contenant seront basés sur Il affiche les siens. propriétés et n'est plus affecté par les éléments flottants enfants. C'est-à-dire que l'élément parent ne peut pas s'adapter à la hauteur des éléments flottants enfants. Le point de départ de l'élément flottant sera déterminé par sa position dans l'élément conteneur, mais l'élément flottant se développera au-dessus de l'élément conteneur, ce qui sera quelque peu similaire aux éléments positionnés de manière absolue .

Modèle de calque

Le modèle de disposition des calques est dérivé à partir de graphiques La fonction d'édition de calques très populaire dans les éditeurs d'images. Les calques peuvent manipuler et éditer avec précision des images et sont largement appréciés par les graphistes. Cependant, dans le domaine de la conception Web, en raison de la mobilité des tailles de pages Web, les calques . le jeu n'a pas été bien accueilli. Pour prendre en charge le modèle de disposition des couches,

CSS définit un ensemble de propriétés de positionnement (positionnement). L'idée de conception du positionnement des éléments est très simple. Elle permet aux utilisateurs de définir avec précision la position relative des éléments de la page Web. Le relatif ici peut être la position affichée par rapport à l'élément d'origine <🎜. >, ou l'élément Block contenant le plus proche, ou par rapport à la fenêtre du navigateur. Type de positionnement

1.statique : Indique aucun positionnement, l'élément suit le modèle de flux HTMLpar défaut, sinon explicitement Si la classe de positionnement de l'élément est déclarée comme type , elle prendra par défaut cette valeur.

2.absolu : signifie positionnement absolu, supprime l'élément du document flux Faites glisser puis utilisez gauche, droite, haut< L'attribut 🎜>, bottom est positionné de manière absolue par rapport à son bloc parent le plus proche qui a un attribut positionné. S'il n'existe pas de bloc contenant , il est relatif à l'élément body, c'est-à-dire selon la fenêtre du navigateur, et son ordre d'empilement passe par attribut z-index à définir.

3.fixe : indique un positionnement fixe, similaire au type de positionnement absolu . Mais son bloc conteneur est la vue (la fenêtre de page à l'intérieur de l'écran) elle-même. Étant donné que la vue elle-même est fixe, elle ne changera pas à mesure que la barre de défilement de la fenêtre du navigateur défile, à moins que vous ne déplaciez la position de la fenêtre du navigateur sur l'écran ou que vous ne modifiiez la taille d'affichage de la fenêtre du navigateur. , il est donc corrigé Les éléments positionnés seront toujours situés quelque part dans la vue dans la fenêtre du navigateur et ne seront pas affectés par le flux du document. Ceci est cohérent avec backgroundattachment:fixed. ;Les fonctions d'attribut sont les mêmes.

4.relatif : représente le positionnement relatif, qui passe gauche, droite< Les attributs 🎜>, top, bottom déterminent si l'élément se trouve dans le flux de documents normal (ou modèle flottant) en position décalée. Le processus de positionnement relatif consiste à générer d'abord un élément selon la méthode static(float)

, puis à déplacer l'élément. La direction et l'amplitude de l'élément. les mouvements sont déterminés par gauche, droite, haut, bas Les attributs sont déterminés , et la forme et la position de l'élément avant décalage sont conservées