Maison > Article > interface Web > Explication détaillée des instructions de calcul de la largeur du désalignement de la mise en page Web CSS

Explication détaillée des instructions de calcul de la largeur du désalignement de la mise en page Web CSS

高洛峰original: 2017-03-17 14:20:351756parcourir

Pourquoi calculer la largeur
Calculer la largeur en pixels des pages Web consiste à CSSla mise en page des pages Web soit soignée et compatible. 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 gauche et de droite doit être inférieure à 400px, alors nous pouvons avoir 300px à gauche et 100px à droite
Code correct :

<head>

< p class="zuo">Gauche 300px

Droite 100px

< /p>

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 300 px et le côté droit est de 120 px, donc la largeur totale dépasse 20 px. Voyons quels problèmes se produiront. Le code CSS p est le suivant :

Calcul de la largeur de la structure gauche et droite www.webjx.com

300px à gauche

100px à droite

Étant donné que les structures gauche et droite ont une largeur de 1px, vous devez soustraire les bordures gauche et droite de 2 pixels chacune. La largeur, donc la largeur à gauche est de 298px et à droite est de 98px

Si la bordure n'est pas soustraite, l'effet suivant sera provoqué. :

p CSS Définir le calcul de la largeur en pourcentageParfois, nous devons également utiliser le pourcentage pour calculer la largeur. Habituellement, il s'agit également de la largeur totale en pourcentage, ce qui ne peut pas être le cas. 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 P, vous devez faire attention à la compréhension et au calcul de la largeur, en particulier lors de l'utilisation du remplissage, de la marge, des bordures, etc.Propriétés CSS, à ce stade, nous devons tous calculer la largeur occupée qu'ils définissent et comprendre fermement que la somme des Les largeurs d'une même ligne sont inférieures ou égales à la largeur totale, si elle est supérieure à la largeur totale, des problèmes de compatibilité mal placés apparaîtront. 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.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction à l'attribut de colonne en CSS3Article suivant：Introduction à l'attribut de colonne en CSS3

Articles Liés

Voir plus