L'utilisation de la disposition en pourcentage de largeur dans la disposition CSS

Comment utiliser la disposition en pourcentage ? Cet article vous présentera l'utilisation de la disposition en largeur en pourcentage dans la mise en page CSS. 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.

Quel est le pourcentage ? Comment le configurer ?

Le pourcentage est une unité de mesure relative au bloc contenant.

Calcul de la largeur en pourcentage : Largeur de l'élément cible/largeur de l'élément parent = largeur en pourcentage

C'est très utile pour les images : comme suit on se rend compte que la largeur de l'image est toujours de 50% de la largeur du conteneur. Vous pouvez l'exécuter et modifier la taille de la page pour voir l'effet !

Vous pouvez également utiliser min-width et max-width en même temps pour limiter le rapport de largeur maximum ou minimum de l'image !

Disposition en pourcentage de largeur

Jetons un coup d'œil à un exemple de disposition en pourcentage de largeur :

nav {
  float: left;
  width: 25%;
}
section {
  margin-left: 25%;
}

Lorsque la largeur du conteneur parent est : 800px

Lorsque la largeur du conteneur parent est : 500px

Une fois la largeur définie en pourcentage, les balises de navigation et de section changeront à mesure que la largeur du conteneur parent change.

Jetons un coup d'œil aux paramètres de pourcentage des attributs couramment utilisés dans la mise en page CSS

Explication : La mise en page en pourcentage nécessite

1. Commencez par diviser la page entière en blocs et prenez le pourcentage correspondant à la largeur de chaque module.

2. Lorsque vous définissez la largeur de la zone de contenu et la distance entre les zones, c'est-à-dire l'espacement visible pour chaque modèle de boîte, vous devez utiliser un pourcentage, et vous ne devez pas utiliser de largeur fixe. . Même margin-left margin-right doit utiliser des pourcentages !

3. Lorsque vous effectuez une mise en page en pourcentage, essayez de passer autant que possible des gros blocs aux petits blocs, quelles que soient les entités de contenu spécifiques, et utilisez des pourcentages pour ces blocs. (Entités de contenu, c'est-à-dire texte de contenu, images, icônes, etc. qui seront affichées. Blocs, pas de contenu.)

Disposition en pourcentage de largeur Problèmes rencontrés :

Mise en page en pourcentage, le taux de fenêtre est réduit à 50 % et la page sera gâchée. Dans les présentations en pourcentage, il n'y a souvent aucun problème lors d'un zoom avant, mais il y a un problème lors d'un zoom arrière. Il est recommandé de choisir un écran d'ordinateur plus petit pour le développement. Si l'écran est trop grand, la fenêtre peut être réduite à environ 15 pouces selon la situation.

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

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!