Quelles sont les mises en page courantes en CSS ?

Les dispositions courantes en CSS sont : 1. Centrage horizontal, les éléments en ligne sont centrés horizontalement, les éléments au niveau du bloc sont centrés horizontalement et les éléments à plusieurs niveaux de blocs sont centrés horizontalement 2. Centrage vertical, les éléments en ligne à une seule ligne sont centrés verticalement ; les éléments centrés et multilignes sont centrés verticalement ; 3. Utiliser une disposition flexible ; 4. Disposition sur une seule colonne ;

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

1. Centrage horizontal :

Centrage horizontal des éléments en ligne

Utilisez text-align: center pour obtenir un centrage horizontal des éléments en ligne à l'intérieur des éléments de niveau bloc. Cette méthode est efficace pour le centrage horizontal des éléments en ligne (inline), des blocs en ligne (inline-block), des tableaux en ligne (inline-table) et des éléments inline-flex.

Code principal :

.center-text {
  text-align: center;
}

Les éléments au niveau du bloc sont centrés horizontalement

En définissant la marge gauche et la marge droite des éléments au niveau du bloc à largeur fixe sur auto, vous pouvez centrer les éléments au niveau du bloc horizontalement.

Code principal :

.center-block {
  margin: 0 auto;
}

Plusieurs éléments de niveau bloc sont centrés horizontalement

Utilisation d'un bloc en ligne

S'il y a deux éléments de niveau bloc ou plus dans une rangée, définissez le type d'affichage des éléments de niveau bloc sur en ligne -block et L'attribut text-align du conteneur parent centre ainsi horizontalement les éléments de plusieurs niveaux de blocs.

Code principal :

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

2. Centrage vertical

Les éléments en ligne (inline-) sur une seule ligne sont centrés verticalement

En définissant la hauteur (hauteur) et la hauteur de ligne (hauteur de ligne) de l'élément en ligne. être égal, de sorte que l'élément soit centré verticalement.

Code principal :

#v-box {
    height: 120px;
    line-height: 120px;
}

Les éléments multilignes sont centrés verticalement

Utilisation de la disposition du tableau (table)

Utilisation de l'alignement vertical : milieu de la disposition du tableau pour obtenir le centrage vertical des éléments enfants.

Code principal :

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

3. Utilisez la disposition flexible (flex)

Utilisez la disposition flexible pour obtenir un centrage vertical, où flex-direction: colonne définit la direction de l'axe principal comme verticale. La mise en page flexible étant définie en CSS3, il existe des problèmes de compatibilité dans les anciens navigateurs.

Code principal :

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

4. Disposition sur une seule colonne

Il existe deux types principaux :

- l'en-tête, le contenu et le pied de page ont la même largeur, et il y a une largeur maximale

- l'en-tête et le pied de page occupe 100 % de la largeur du navigateur, le contenu a une largeur maximale

Premier type

<header style="background-color: red; width: 600px; margin: 0 auto;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

Deuxième type :

<header style="background-color: red;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow;">尾部</footer>

5 Disposition sur deux colonnes

float + margin

Utilisez float pour tirer la barre latérale. et le contenu principal sur une seule ligne, puis définissez la marge principale du contenu.

<main style="background-color: red;">
  <aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

Apprentissage recommandé : Tutoriel vidéo 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!