Quels sont les types courants de mises en page HTML ? Analyse de trois caractéristiques de mise en page HTML

Quels sont les types courants de mises en page HTML ? Il existe trois méthodes de mise en page en HTML : la mise en page fluide, la mise en page flottante et le modèle de calque. Chacune de ces trois méthodes de mise en page en HTML a ses propres caractéristiques. Cet article parlera brièvement des caractéristiques des trois méthodes de mise en page en HTML.

1. Mise en page fluide (la mise en page par défaut des pages Web HTML)

Caractéristiques :

1. be Étendre verticalement de haut en bas dans l'élément conteneur, car par défaut, la largeur des éléments de bloc est de 100 %.

2. Les éléments en ligne seront affichés horizontalement de gauche à droite dans l'élément conteneur. (Les éléments en ligne ne sont pas aussi dominateurs que les éléments de bloc et occupent une seule ligne)

2. Disposition flottante (float)

Caractéristiques : Sous le disposition par défaut, les éléments de bloc sont si dominateurs qu'ils occupent une seule ligne. Maintenant, si nous voulons que deux éléments de bloc soient affichés côte à côte. Vous devez utiliser float pour y parvenir.

est le suivant

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

3. Modèle de couche

Caractéristiques : Si je veux qu'un div soit à l'intérieur un autre div Ci-dessus, nous devons pouvoir utiliser le positionnement absolu pour compléter les trois méthodes de positionnement du modèle de couche : relatif, absolu, fixe

Positionnement absolu (absolu)

nécessite le réglage de position :absolute (ce qui signifie positionnement absolu), la fonction de cette instruction est de faire glisser l'élément hors du flux de documents,
puis d'utiliser les attributs gauche, droite, haut et bas par rapport à son parent le plus proche contenant un bloc avec des attributs de positionnement. Positionnement absolu.
Si aucun bloc contenant de ce type n'existe, il est relatif à l'élément body, c'est-à-dire par rapport à la fenêtre du navigateur.

Positionnement relatif (relatif)

Si vous souhaitez définir le positionnement relatif dans le modèle de calque pour l'élément, vous devez définir la position : relative (indiquant le positionnement relatif ),
il Détermine la position de décalage de l'élément dans le flux normal du document via les attributs gauche, droite, haut et bas.
Le processus de positionnement relatif consiste à générer d'abord un élément en mode statique (flottant) (et l'élément flotte comme un calque),
puis à se déplacer par rapport à la position précédente. La direction et l'amplitude du mouvement sont. déterminé par left et right , les attributs top et bottom sont déterminés et la position avant le décalage est conservée.

Positionnement fixe (fixe)

fixe : indique un positionnement fixe, similaire au type de positionnement absolu,
mais ses coordonnées de mouvement relatif sont dans la vue (dans l'écran la fenêtre de la page Web) 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. ,
Par conséquent, l'élément positionné de manière fixe sera toujours situé quelque part dans la vue dans la fenêtre du navigateur et ne sera pas affecté par le flux du document
Cela a la même fonction que background-attachment:fixed; attribut.

Remarque :

Lors de l'utilisation de l'attribut z-index, seuls les éléments qui utilisent l'attribut position ont l'attribut z-index. Les éléments qui n'utilisent pas l'attribut position n'ont pas l'attribut z-index, et il est inutile de le définir

Articles connexes recommandés :

Trois façons de mise en page html+css (mise en page naturelle/mise en page de flux/mise en page de positionnement)_HTML/Xhtml_Production de pages Web

Utiliser HTML et HTML pour implémenter des mises en page communes_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!