Modèle de mise en page CSS

Cette fois, je vais vous apporter le modèle de mise en page CSS. Quelles sont les précautions du modèle de mise en page CSS. Voici un cas pratique, jetons un coup d'œil.

Dans les pages Web, les éléments ont trois modèles de mise en page :
1. Modèle de flux (Flow) Par défaut
2. Modèle flottant (Float)
3.

1. Flow

Le modèle Flow est le mode de mise en page par défaut des pages Web. C'est-à-dire que les éléments Web HTML de la page Web dans l'état par défaut distribuent le contenu de la page Web selon le modèle de flux.

Le modèle de disposition fluide a deux caractéristiques typiques :

Premièrement, les éléments de bloc seront étendus verticalement et distribués dans l'ordre de haut en bas dans l'élément conteneur, car dans Par défaut, la largeur de les éléments de bloc sont à 100 %. En effet, les éléments de bloc occuperont leur position sous forme de rangées.

(Chaque pense-bête affiche sa largeur et sa hauteur par défaut d'origine)

Deuxième point, sous le modèle de flux, les éléments en ligne se déplaceront de gauche à droite dans l'affichage de la distribution horizontale. (

Les éléments en ligne ne sont pas aussi exclusifs que les éléments de bloc)

2. Modèle flottant (Float)

Tout élément ne peut pas flotter par défaut Mais il peut être défini comme flottant.

div{float:left;}　div{float:right;}

avec CSS Vous pouvez définir différentes méthodes flottantes pour différents divs à mettre en page.

3. Modèle de calque (Layer)

Le modèle de calque a trois formes :

1. Positionnement relatif (

position : relatif) .

2.

Positionnement absolu(position : absolue)

3. Positionnement fixe (position : fixe)

Positionnement relatif

Si vous le souhaitez. pour définir l'élément Pour définir le positionnement relatif dans le modèle de calque, vous devez définir position:relative (indiquant le positionnement relatif), qui détermine la position de décalage de l'élément dans le flux normal du document à travers la gauche, la droite, le haut et

bas attributs.

Se déplace par rapport à la position précédente et la position avant le décalage reste inchangée. Lors de l'utilisation du positionnement relatif, même si l'élément est décalé, il occupe toujours l'espace avant son décalage.

Positionnement absolu

Si vous souhaitez définir le positionnement absolu dans le modèle de calque pour un élément, vous devez définir position:absolute (indiquant le positionnement absolu), faites glisser l'élément hors du document flow, puis utilisez left, Les attributs droit, 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. S'il n'y a pas de bloc contenant de ce type (c'est-à-dire que le div devant lui n'a pas d'attribut de positionnement défini), il sera relatif à l'élément body, c'est-à-dire par rapport à la fenêtre du navigateur.

Les éléments définis sur un positionnement absolu n'occupent pas d'espace dans le flux de documents. Si un élément est défini sur un positionnement absolu, sa position dans le flux de documents sera supprimée

Nous pouvons définir ; leur ordre d'empilement via

z-index.

Le positionnement absolu retire l'élément du flux de documents et n'occupe donc pas d'espace. La disposition de l'élément dans le flux de documents normal est la même que si l'élément positionné de manière absolue n'existait pas encore. le flux de documents ignorera l'élément et remplira son ancien espace. Étant donné que les zones positionnées de manière absolue sont indépendantes du flux de documents, elles peuvent couvrir d'autres éléments de la page. ​

Le positionnement de l'élément flottant est toujours basé sur le flux de documents normal, puis extrait du flux de documents et déplacé aussi loin que possible vers la gauche ou la droite, et le contenu du texte entourera l'élément flottant élément. Cela modifie uniquement l'affichage du flux de documents, mais ne rompt pas avec le flux de documents. En comprenant cela, il est facile de déterminer quand utiliser le positionnement et quand utiliser le flottement.

Positionnement 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 soyez toujours dans une position A dans la vue de la fenêtre du navigateur qui n'est pas affectée par le flux du document.

#div1{
position:fixed;
    bottom:0;
    right:0
}  (始终在屏幕由下端有一个div框，会一直跟着滚动条走)

Le positionnement relatif peut être utilisé de manière mixte avec le positionnement absolu. Le principe est le suivant : tant que le div parent définit l'attribut de positionnement, le div enfant sera repositionné en fonction de la position du div parent <.>

Je le crois. Vous maîtrisez les méthodes dans ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

Comment résoudre le problème d'affichage anormal après que layer.photos() modifie de manière asynchrone l'adresse de l'image

Comment surveiller si les données de la liste AngularJs ont été rendues

La relation entre les "classes" ES6 et l'orientation objet

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!