Quelles sont les méthodes de mise en page du HTML ?

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

Caractéristiques :

1. sont Les éléments conteneurs s'étendent verticalement de haut en bas, 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 ligne)

2. Disposition flottante (float)

Caractéristiques : Dans la disposition par défaut, les éléments de bloc sont tellement dominateur Ils occupent tous une ligne, si maintenant 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

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

3. Modèle de calque

Caractéristiques : Si je veux qu'un p soit à l'intérieur d'un autre p 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

absolute

Vous devez 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
Utilisez ensuite la gauche, la droite. , top et bottom par rapport à sa position la plus basse. Le positionnement absolu est effectué par un bloc parent proche qui possède 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 positionnement relatif),
Il détermine la position de décalage de l'élément dans le flux normal du document à travers 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.

fixe

fixe : indique un positionnement fixe, similaire au type de positionnement absolu,
mais ses coordonnées de mouvement relatif sont des vues (le fenêtre de page Web à l'intérieur de l'écran) lui-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 auront la propriété 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

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!