Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes-tutoriel CSS-php.cn

Ce que cet article vous apporte, c'est quelles sont les mises en page courantes en CSS ? Une introduction à 5 mises en page courantes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Cet article présentera les 5 mises en page courantes suivantes :

Mise en page à une seule colonne
Deux colonnes Disposition adaptative
Disposition Shengfei et disposition à double aile volante
Disposition pseudo-contour
Disposition de la colle

1. Disposition en une seule colonne

Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes

1. Disposition commune à une seule colonne :

Mise en page à une seule colonne avec une largeur égale d'en-tête, de contenu et de pied de page
en-tête et disposition sur une seule colonne avec une largeur de pied de page égale et un contenu légèrement plus étroit

Comment mettre en œuvre

Pour le premier type, commencez par définir uniformément la largeur : 1 000 px pour l'en-tête, le contenu et le pied de page ; ou la largeur maximale : 1000 px (la différence entre les deux est que lorsque l'écran est inférieur à 1 000 px, le premier aura un barre de défilement, alors que cette dernière ne le sera pas, et la largeur réelle sera affichée) ; puis définissez margin:auto pour réaliser le centrage.

<p></p>
<p></p>
<p></p>

Copier après la connexion

.header{
    margin:0 auto; 
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.content{
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

Copier après la connexion

Pour le deuxième type, la largeur du contenu de l'en-tête et du pied de page n'est pas définie et les éléments au niveau du bloc remplissent tout l'écran, mais les zones de contenu de l'en-tête, du contenu et du pied de page sont réglé sur la même largeur et passé par margin :auto réalise le centrage.

<p>
    </p><p></p>

<p></p>
<p></p>

Copier après la connexion

.header{
    margin:0 auto;
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.nav{
    margin: 0 auto;
    max-width: 800px;
    background-color: darkgray;
    height: 50px;
}
.content{
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

Copier après la connexion

2. Disposition adaptative à deux colonnes

La disposition adaptative à deux colonnes signifie qu'une colonne est prise en charge par le content Méthode de mise en page pour une autre colonne pour remplir la largeur restante

1.float+overflow:hidden

S'il s'agit d'un deux- normal. une disposition en colonnes, Floating + margin d'éléments ordinaires peut être obtenue, mais s'il s'agit d'une disposition adaptative à deux colonnes, elle peut être obtenue en utilisant float+overflow:hidden Cette méthode. déclenche principalement BFC par débordement, et BFC ne chevauchera pas les éléments flottants. Étant donné que la définition de overflow:hidden ne déclenchera pas l'attribut haslayout du navigateur IE6, zoom:1 doit être défini pour être compatible avec le navigateur IE6. Le code spécifique est le suivant :

<p>
    </p><p>
        </p><p>left</p>
    
    <p>
        </p><p>right</p>
        <p>right</p>

Copier après la connexion

.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}

Copier après la connexion

Remarque : Si la barre latérale est à droite, faites attention à l'ordre de rendu. Autrement dit, en HTML, écrivez d'abord la barre latérale, puis le contenu principal

2 Mise en page flexible

Mise en page flexible, également appelée boîte flexible. layout , vous pouvez réaliser la mise en page de différentes pages avec seulement quelques lignes de code.

//html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

Copier après la connexion

3.disposition en grille

La disposition en grille est un système de disposition en deux dimensions basé sur une grille, conçu pour optimiser la conception de l'interface utilisateur .

//html部分同上
.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
}

Copier après la connexion

Disposition à trois colonnes

Caractéristiques : largeur adaptative dans la colonne du milieu, largeur fixe des deux côtés, il existe de nombreuses façons de mettre en œuvre une mise en page à trois colonnes (vous pouvez cliquer sur plusieurs méthodes pour obtenir une mise en page à trois colonnes). Cet article se concentre sur la mise en page Saint Graal et la mise en page à double aile.

1. Mise en page du Saint Graal

① Caractéristiques

Une mise en page plus spéciale à trois colonnes , la même chose Il est également de largeur fixe des deux côtés et adaptatif au milieu. La seule différence est que la structure DOM doit être écrite en premier dans la colonne du milieu, afin que la colonne du milieu puisse être chargée en premier.

  .container {
    padding-left: 220px;//为左右栏腾出空间
    padding-right: 220px;
  }
  .left {
    float: left;
    width: 200px;
    height: 400px;
    background: red;
    margin-left: -100%;
    position: relative;
    left: -220px;
  }
  .center {
    float: left;
    width: 100%;
    height: 500px;
    background: yellow;
  }
  .right {
    float: left;
    width: 200px;
    height: 400px;
    background: blue;
    margin-left: -200px;
    position: relative;
    right: -220px;
  }

Copier après la connexion

  <article>
    <p>
      </p>
<p>圣杯布局</p>
    
    <p></p>
    <p></p>
  </article>

Copier après la connexion

② Étapes de mise en œuvre

Les trois parties sont laissées flottantes, sinon le contenu sur le gauche et droite Si vous ne pouvez pas monter, vous ne pouvez pas être dans la même rangée que la colonne du milieu . Ensuite, définissez la largeur du centre à 100 % ( pour réaliser le contenu adaptatif de la colonne du milieu À ce moment, les parties gauche et droite passeront à la ligne suivante

Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes

En définissant margin-left sur une valeur négative, remettez les parties gauche et droite sur la même ligne que la partie centrale

Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes

En définissant les paramètres padding-left et padding-right du conteneur parent, laissez un espace sur les côtés gauche et droit.

Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes

En définissant le positionnement relatif, déplacez les parties gauche et droite des deux côtés.

Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes

③ Inconvénients

La largeur minimale de la partie centrale ne peut pas être plus petit que la largeur de la partie gauche, sinon la partie gauche tombera sur la ligne suivante
如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助伪等高布局可解决)

Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes

④ 伪等高布局

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。

此处我们通过伪等布局便可解决圣杯布局的第二点缺点，因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，并在所有列外面加上一个容器，并设置overflow:hidden把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下：

      .center,
      .left,
      .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
      }
      .container {
        padding-left: 220px;
        padding-right: 220px;
        overflow: hidden;//把溢出背景切掉
      }

Copier après la connexion

Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes

2.双飞翼布局

① 特点

同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。

    .container {
        min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }

Copier après la connexion

    <article>
        <p>
            </p>
<p>双飞翼布局</p>
        
        <p></p>
        <p></p>
    </article>

Copier après la connexion

② 实现步骤(前两步与圣杯布局一样)

三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
通过设置margin-left为负值让left和right部分回到与center部分同一行；
center部分增加一个内层p，并设margin: 0 200px；

③ 缺点

多加一层 dom 树节点，增加渲染树生成的计算量。

3.两种布局实现方式对比:

两种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

四、粘连布局

1.特点

有一块内容<main></main>，当<main></main>的高康足够长的时候，紧跟在<main></main>后面的元素<footer></footer>会跟在<main></main>元素的后面。
当<main></main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer></footer>元素能够“粘连”在屏幕的底部

当main足够长时

Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes

当main比较短时

Quelles sont les mises en page courantes en CSS ? Introduction à 5 mises en page courantes

具体代码如下：

    <p>
      </p><p>
        main <br>
        main <br>
        main <br>
      </p>
    
    <p>footer</p>

Copier après la connexion

   * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;//高度一层层继承下来
      }
      #wrap {
        min-height: 100%;
        background: pink;
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

Copier après la connexion

2.实现步骤

(1)footer必须是一个独立的结构，与wrap没有任何嵌套关系

(2)wrap区域的高度通过设置min-height，变为视口高度

(3)footer要使用margin为负来确定自己的位置

(4)在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

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!