CSS implémente simplement la disposition du Saint Graal et la disposition de la double aile volante

1. Que pouvez-vous apprendre?

①Comment utiliser les variables css ②Réaliser l'idée simple de la disposition du Saint Graal et des doubles ailes volantes ③Comprendre les caractéristiques du flotteur et de la marge

Paramètres des variables CSS (parties partagées par les deux mises en page)

:root{
    
    
    /* 左边栏宽度 */
    --lw:300px;
    /*负左边栏宽度*/
    --lwf:-300px;
    /* 右边栏宽度 */
    --rw:400px;
    /*负左边栏宽度*/
    --rwf:-400px;
    /* 高度 */
    --height:300px;
}

Deux, le code html et css de la mise en page du Saint Graal

partie html

  <div class="holyGrail">
    <div class="hg_main">main</div>
    <div class="hg_left">left</div>
    <div class="hg_right">right</div>
  </div>

css implémente les quatre classes correspondantes

.holyGrail {
    
    
    height: var(--height);
    /* 留出左右两栏的布局 为了字体不被覆盖*/
    padding-left: var(--lw);
    padding-right: var(--rw);
}
.hg_main{
    
    
    width:100%;
    float: left;
    height: var(--height);
    background-color: blanchedalmond;
}
.hg_left{
    
    
    position: relative;
    left: var(--lwf);
    float: left;
    margin-left: -100%;
    width:var(--lw);
    height: var(--height);
    background-color: blueviolet;
}
.hg_right{
    
    
    float: left;
    margin-right: var(--rwf);
    width:var(--rw);
    height: var(--height);
    background-color: brown;
}

Troisièmement, le code html et css de la disposition de la double aile volante

partie html

<div class="doubleWing">
    <div class="dw_main">
      <div class="dw_con">main</div>
    </div>
    <div class="dw_left">left</div>
    <div class="dw_right">right</div>
  </div>

css implémente les cinq classes correspondantes

.doubleWing{
    
    
    padding-right: var(--rw);
}
.dw_left{
    
    
    float: left;
    margin-left: -100%;
    width:var(--lw);
    height: var(--height);
    background-color: blueviolet;
}
.dw_main{
    
    
    width:100%;
    float: left;
    height: var(--height);
    background-color: blanchedalmond;
}
.dw_con {
    
    
margin-left: var(--lw);
}
.dw_right{
    
    
    float: left;
    margin-right: var(--rwf);
    width:var(--rw);
    background-color: brown;
    height: var(--height); 
}

Quatre, apprenez les points d'attention des deux mises en page

Disposition du Saint Graal

Laissez la largeur des colonnes gauche et droite sur les côtés gauche et droit de la classe la plus externe (HolyGrail) (utilisez padding-left, padding-right)
Le div du milieu.hg_main est placé en haut, le rendu en premier, le div du milieu est adaptatif et la largeur est de 100%
Les div dans les colonnes de gauche, du milieu et de droite sont tous définis sur float, et la colonne de gauche est déplacée vers le même point de départ que le div du milieu par margin-left: -100%, puis par position: relative;
left: - (la largeur de la colonne de gauche); il se déplacera vers l'extérieur La zone de la marge intérieure gauche du div de calque (le côté gauche du div du milieu)
La colonne de droite peut être déplacée vers la zone de la marge intérieure droite du div le plus extérieur par margin-right :-( la largeur de la colonne de droite) (le côté droit du div du milieu)

Disposition de l'aile volante double

Ajoutez un autre div au div dans la colonne du milieu et définissez margin-left: la largeur de la colonne de gauche, de sorte que vous puissiez omettre le div dans la colonne de gauche et le déplacer avec les attributs de la position et de gauche
La division la plus externe n'a pas besoin de réserver la position de la colonne de gauche

Cinq, les avantages et les inconvénients de la comparaison des deux mises en page

agencement	avantage	Désavantage
Saint Graal	Pas de dom supplémentaire	Lorsque la largeur médiane est plus petite que les largeurs gauche et droite, la structure est chaotique
Double aile	Peut supporter différentes largeurs, forte polyvalence	Besoin d'ajouter une couche supplémentaire de dom

Adresse de téléchargement du code

N'oubliez pas de le faire vous-même

remercier

Si vous pensez qu'il est utile pour votre travail d'étude, partagez-le avec ceux qui en ont besoin, ou aimez-le et encouragez-le, merci pour
votre soutien. Vous pouvez ajouter un favori, et je continuerai de le mettre à jour. . .