Lorsque nous créons des pages Web, nous devons prêter attention à plusieurs points pour rendre nos pages Web belles et fluides. Alors, que devons-nous faire si la page Web CSS est mal alignée ? Ensuite, nous vous présenterons comment gérer le mauvais alignement des pages Web et comment l'éviter.
Pourquoi calculer la largeur
Le calcul de la largeur en pixels des pages Web est destiné à une mise en page soignée et compatible des pages Web CSS. Généralement, lorsque nous disposons des pages Web avec des structures à gauche et à droite ou que nous utilisons du padding et de la marge, nous calculons la largeur de la page entière. Si nous ne calculons pas la largeur, que ce soit. la largeur est trop grande ou trop petite, des problèmes de désalignement se produiront.
Comment calculer la largeur CSS
Exemple 1 : Nous calculons le style de mise en page d'une structure gauche et droite.
Si la largeur totale est de 400px, alors la somme de la gauche et de la droite doit être inférieure à 400px, alors nous pouvons avoir 300px à gauche et 100px à droite
Code correct :
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算</title>
<style type="text/css">
.yangshi{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:100px; background:#999}
</style>
</head>
<body>
<div class="yangshi">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>Page Web Calcul de la largeur CSS mal alignée
Ce qui précède est la largeur totale correcte des structures gauche et droite, qui est exactement égale à 400px
Erreur :
Si nous gardons la largeur totale inchangée, le côté gauche est de 300px, le côté droit est de 120px, donc la largeur totale dépasse 20px. Voyons quels problèmes vont survenir. Le code DIV+CSS est le suivant :
. <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算</title>
<style type="text/css">
.yangshi{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:120px; background:#999}
</style>
</head>
<body>
<div class="yangshi">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>Diagnostic de désalignement de la mise en page CSS DIV
Parce que la largeur totale est d'environ 20 pixels, les structures gauche et droite ne peuvent pas être alignées et le côté droit tombe.
De cette façon, des problèmes de compatibilité mal alignés surviennent. Généralement, dans la pratique, en raison de notre négligence dans le calcul, la différence est généralement de 1px-2px lorsque la différence est petite. De cette façon, nous ne le ferons pas. découvrez-le, donc une compatibilité mal alignée est exclue. Vous pouvez commencer par le calcul de la largeur.
Exemple 2 : Il y a des bordures de 1 px dans les structures gauche et droite
Généralement, il y a des bordures de 1 px dans les structures gauche et droite, puis certaines bordures sont ajoutées lorsque nous définissons la gauche. et à droite, nous devons faire correspondre la largeur de la bordure avec Les largeurs des structures gauche et droite sont calculées ensemble.
Exemple correct :
Les codes CSS et html sont les suivants :
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算</title>
<style type="text/css">
.yangshi{width:400px;}
.zuo{ float:left; width:298px; border:1px solid #F00; background:#CCC;}
.you{ float:right; width:98px; background:#999; border:1px solid #F00;}
</style>
</head>
<body>
<div class="yangshi">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>Parce que les structures gauche et droite ont une largeur de 1px à ce moment-là, vous devez soustraire la largeur de bordure de 2 pixels à gauche et à droite, donc le côté gauche est de 298px et le côté droit a une largeur de 98px
DIV+CSS définit le calcul de la largeur en pourcentage
Parfois, nous devons également utiliser des pourcentages pour calculer la largeur, généralement c'est aussi la largeur totale en pourcentage, qui ne peut pas dépasser 100%
Faites attention au résumé lors du calcul de la largeur CSS :
Qu'il s'agisse d'une structure gauche-droite, d'une mise en page multi-colonnes ou d'un seul paramètre de mise en page de largeur DIV Nous devons faire attention à la compréhension et au calcul de la largeur, en particulier lors de l'utilisation d'attributs CSS tels que padding, margin et border.À ce stade, nous devons calculer la largeur occupée définie par eux et saisir fermement la somme des largeurs de la même ligne. Inférieure ou égale à la largeur totale. largeur totale, il y aura des problèmes de compatibilité de désalignement. Par conséquent, en cas de désalignement général, nous pouvons commencer par calculer la largeur. Bien entendu, il existe de nombreuses raisons de désalignement. C'est également l'une des méthodes permettant de résoudre le problème de compatibilité des désalignements.
Il existe de nombreuses méthodes de traitement. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture connexe :
Comment utiliser CSS3 pour créer des effets d'icônes
Comment utiliser CSS3 pour créer des animations d'éclairage et de texte
Comment utiliser la toile pour réaliser l'interaction entre la balle et la souris
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
