Partage de conseils de mise en page CSS incontournables

L'éditeur suivant vous apportera une astuce de mise en page CSS incontournable. L’éditeur le trouve plutôt bien, alors j’aimerais le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil.

1.max-width :

Lorsque la largeur gauche et droite de la page est réduite , afin d'éviter le défilement vers la gauche et la droite. Si vous avez une mauvaise expérience, vous pouvez utiliser max-width ! Si la page est plus petite que la largeur, elle sera automatiquement réduite~

max-width : 500px;   
margin: 0 auto;   
}

2.box-sizing :

Après avoir défini box-sizing:border-box sur un élément, déterminez la largeur, puis définissez le remplissage et la bordure. La largeur ne sera pas modifiée. Vous pouvez définir les paramètres globaux pour résoudre les problèmes de compatibilité du navigateur comme suit :

-webkit-box-sizing : border-box;   
-moz-box-sizing:border-box;   
box-sizing:border-box;   
 }

3.overflow:auto

La bordure s'adapte à la taille du contenu, et il n'y aura pas de débordement.

Solution compatible IE :

.example{ overflow:auto; zoom:1; }

4.

Après avoir utilisé les requêtes multimédias, vous pouvez définir différentes mises en page en fonction de différentes largeurs de page. La méthode est la suivante :

//页面宽度大于600px时，nav模块浮动于左侧   
@media screen and (min-width: 600px) {   
nav {   
    float: left;   
    width: 25%;   
}   
section {   
    margin-left: 25%;   
}   
}   
//页面宽度小于599时，nav模块打横，在上方   
@media screen and (max-width: 599px) {   
nav li {   
    display: inline;   
}   
}

<. 🎜>

5. Disposition du texte multi-colonnes :

.three-column { padding :1em; -moz-column-count :3; -moz-column-gap: 1em; -webkit-column-count :3; -webkit-column-gap: 1em; column-count:3; column-gap:1em; }

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!