Quelles sont les trois mises en page en HTML ?

Mise en page de flux (la mise en page par défaut des pages Web HTML)

(Partage du didacticiel vidéo : tutoriel vidéo HTML)

Caractéristiques :

1. Les éléments de bloc seront étendus verticalement et répartis 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)

Mise en page flottante (float)

Caractéristiques : Dans la mise en page par défaut, les éléments de bloc sont si dominateurs qu'ils occupent une ligne. Si nous voulons maintenant 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 calque

Caractéristiques : Si je veux qu'un div soit au-dessus d'un autre div, nous devons utiliser le positionnement absolu pour le compléter , modèle de couche Les trois méthodes de positionnement relatif, absolu, fixe

absolu

doivent définir position:absolute (indiquant le positionnement absolu). La fonction de cette instruction est de faire glisser l'élément hors du). flux de documents, puis utilisez Les attributs gauche, droite, haut et bas sont positionnés de manière absolue par rapport à leur bloc contenant le parent le plus proche avec un attribut de positionnement. 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.

relative

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

fixe

fixe : indique un positionnement fixe, similaire au type de positionnement absolu, mais ses coordonnées de mouvement relatif sont la vue (fenêtre de page Web à 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, de sorte que les éléments positionnés de manière fixe seront être toujours dans une certaine position de la vue dans la fenêtre du navigateur qui ne sera pas affectée par le flux du document. Cela a la même fonction que l'attribut background-attachment:fixed ;

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.

Recommandations associées : Tutoriel HTML

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!