Explication détaillée des exemples de modèles de mise en page avancés CSS

CSS contient trois modèles de mise en page : Flow, Float et Layer

Modèle de flux

Le modèle de mise en page par défaut de la page Web a deux caractéristiques :

1. Les éléments de bloc seront répartis verticalement de haut en bas dans l'élément conteneur, car par défaut, la largeur des éléments de bloc est de 100 %. En fait, les éléments de bloc occupent tous des positions sous forme de rangées.

<style type="text/css">
    h1,p,div{
        border:1px solid red;
    }
</style>

2. Sous le modèle de flux, les éléments en ligne seront affichés horizontalement de gauche à droite dans l'élément conteneur.

<a href="http://>www.baidu.com</a><span>hello</span><em>shit</em><strong>world</strong>

www.baidu.com hello shit world sera affiché horizontalement sur la même ligne.

2. Modèle flottant FLoat

Tout élément ne peut pas flotter par défaut, mais il peut être défini comme flottant avec CSS, tel que div, p, table, img et d'autres éléments peuvent être définis pour Par exemple, pour flotter, laissez les deux éléments div suivants être affichés côte à côte sur la même ligne

div{
    border:1px solid red;
    width:200px;
    height:200px;
    float:left;//从左向右排列
}
<div>hello</div>
<div>world</div>

3. Modèle de calque Couche

peut être implémenté pour le HTML Positionnement précis des éléments (pas très utilisé, mais certains effets peuvent être obtenus en utilisant des modèles de calques localement)

Il existe trois types de modèles de calques :

Positionnement absolu : position:absolute

Faites glisser l'élément hors du flux de documents, puis utilisez les attributs gauche, droite, haut et bas pour effectuer un positionnement absolu par rapport à son parent le plus proche contenant le bloc avec un positionnement attribut. 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.

Déplacez l'élément div de 100px vers la droite et de 200px vers le bas par rapport à la fenêtre du navigateur

div{
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid red;
    left:100px;
    top:200px;
}

par rapport à : position:relative

Déplacez-vous par rapport à la position précédente, la direction et l'amplitude du mouvement sont déterminées par les attributs gauche, droite, haut et bas, et la position avant le décalage reste inchangée (eh1 est affiché à la position indiquée sur la figure, il est particulièrement important d'y prêter attention ).

   .div1{
    position:relative;
    width:200px;
    height:200px;
    border:1px solid red;
    left:200px;
    top:200px;
}
<span>hello world>
<div class="div1">position:relative</div>
<span>eh1<span>

Positionnement fixe : position:fixed

La coordonnée de mouvement relatif est 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

#div2{
    position:fixed;
    bottom:100px;
    right:100px;
    width:200px;
    height:200px;
    border:1px solid red;
}
<div id="div2">position:fixed</div>

afin que quelle que soit la quantité de contenu dans le navigateur, le div soit toujours dans le coin inférieur droit de la fenêtre.

La combinaison de position:absolute et position:relative est utilisée

D'après ce qui précède, nous savons que position:absolute est positionné par rapport au navigateur. Vous pouvez utiliser position:relative. pour atteindre position:absolu relatif Positionnement d'autres éléments mais doit respecter les points suivants :

1. L'élément référencé doit être l'élément parent de l'élément positionné

2. L'élément référencé est défini sur position:relative

3. Définissez l'élément de positionnement sur position:absolute

#div1{
 border:1px solid red;
 width:200px;
 height:200px;
 position:relative;
}
#div2{
 border:1px solid red;
 width:50px;
 height:50px;
 left:20px;
 top:20px;
 position:absolute;
}
<div id="div1">
    <div id="div2">hello</div>
</div>

De cette façon, div2 est positionné par rapport à div1.

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!