Quels sont les modèles de mise en page CSS ? Introduction aux trois modèles de mise en page de CSS

Cet article vous explique quels sont les modèles de mise en page CSS ? L'introduction des trois modèles de mise en page CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Modèle de flux (flow)

Mode de mise en page de page Web par défaut
* Les éléments de bloc seront étendus verticalement et répartis de haut en bas dans l'élément contenant
* Les éléments en ligne seront affichés horizontalement de gauche à droite dans l'élément conteneur

Modèle flottant (float)

Tout élément ne peut pas être utilisé par défaut Flottant, mais peut être défini avec CSS comme flottant

两个 div 元素一行
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:left;
    }
 <div id="div1"></div>
<div id="div2"></div>

设置两个元素 右浮动 实现一行 
float:right;
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:right;
    }

设置两个元素一左一右
div{
    width:200px;    
    height:200px;    
    border:2px red solid;
    }
#div1{float:left;}
#div2{float:right;}

Modèle de calque (couche)

Il existe trois formes de modèle de calque :
- Positionnement absolu (position : absolue)
- Positionnement relatif (position : relative)
- Positionnement fixe (position : fixe)

Le modèle de disposition des calques est comme la fonction d'édition de calques très populaire du logiciel d'image PhotoShop. Chaque calque peut être positionné et utilisé avec précision

<. 🎜>1. Positionnement absolu

position:absolute (indiquant un positionnement absolu), la fonction de cette instruction est de faire glisser l'élément hors du flux de documents, puis d'utiliser gauche, droite, top, la propriété bottom est positionnée de manière absolue par rapport à son bloc parent le plus proche qui possède une propriété 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.

实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:absolute;    
    left:100px;    
    top:50px;
    }
    <div id="div1"></div>

2. Positionnement relatif

position : relative (indique un positionnement relatif), il Déterminez la position de décalage de l'élément dans le flux de documents normal 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 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.

相对于以前位置向下移动50px，向右移动100px;
#div1{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:relative;    
    left:100px;    
    top:50px;
    }
<div id="div1"></div>

3. Positionnement fixe

fixe : indique un positionnement fixe, identique à l'absolu. type de positionnement Similaire, mais les coordonnées de son mouvement relatif sont la vue (la fenêtre de la 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 ;

相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
    width:200px;   
     height:200px;    
        border:2px red solid;   
        position:fixed;    
        left:100px;    
        top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> 
....

4. Utilisez Relatif et Absolu en combinaison

pour vous positionner par rapport à d'autres éléments

1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>box1是box2的父元素

2、参照定位的元素必须加入position:relative;
#box1{
    width:200px;    
    height:200px;    
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
    position:absolute;    
    top:20px;    
    left:30px;         
}

Recommandations associées :

Mise en page CSS Holy Graal Layout et Double Flying Wing Layout_html/css_WEB-ITnose

css +div layout (1) - css+div implémente le layout_html/css_WEB-ITnose

Modèle de mise en page CSS

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!