CSS网页布局错位:CSS宽度计算
为什么计算宽度
计算网页像素宽度是为了CSS网页布局整齐与兼容。常见的我们布局左右结构网页或使用padding、margin布局的时候将计算整页宽度，如果不计算无论是宽度过大过小就会出现错位问题。
怎么计算CSS宽度
例一：我们计算一个左右结构的布局样式。
假如总宽度为400px，那么左右加起来就应当小于400px，那我们可能左边为300px，右边为100px
正确代码：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:100px; background:#999}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>以上为正确的左右结构总宽度刚好等于400px
错误：
假如我们在总宽度不变情况下，左边为300px，而右边为120px那总宽度超过了20px，我们看看会出现什么问题，DIV+CSS代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{width:400px;}
.zuo{ float:left; width:300px; background:#CCC;}
.you{ float:right; width:120px; background:#999}
</style>
</head>
<body>
<div class="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>我们根据上图可看出因为总宽度大约了20px，所以导致了左右结构不能平齐，就出现了右边往下掉。
这样就出现了错位的兼容问题，一般在实际中因为我们计算的疏忽，一般相差小的时候是1px-2px，那样就不会被我们发现，所以排除错位兼容可以从宽度计算入手。
例二：左右结构中有1px边框实例
一般左右结构中有1px边框，然后再加上有些边框这时我们设置左右结构时候就需要将此边框宽度与左右结构宽度计算在一起。
正确例子：
CSS与html代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右结构宽度计算www.webjx.com</title>
<style type="text/css">
.webjxcom{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="webjxcom">
<div class="zuo">左边300px</div>
<div class="you">右边100px</div>
</div>
</body>
</html>因左右结构都有1px的宽度这个时候各需要减去左右2像素的边框宽度，所以左边最后是298px，右边为98px的宽度
如果不减去边框将会造成一下效果：
DIV+CSS设置百分比宽度计算
有时候我们也需要使用百分比来计算宽度，通常情况也是总的百分比宽度，不能超过100%
CSS宽度计算时候注意总结：
无论是左右结构、多列的布局还是单独一个DIV宽度的布局设置都需要注意宽度的把握与计算，特别是使用了padding、margin、边框等CSS属性，这个时候我们都需要将它们设置的占用宽度计算入内，牢牢把握同排各宽度之和小于或等于总宽度，如果大于总宽度将会出现错位的兼容问题。所以一般错位时我们就可以从计算宽度入手，当然错位还有很多原因这里也是解决错位兼容问题的方法之一。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques
Mar 08, 2025 am 09:45 AM
Ceci est le 3ème article d'une petite série que nous avons faite sur l'accessibilité. Si vous avez manqué le deuxième article, consultez "Gestion de la mise au point des utilisateurs avec: Focus-visible". Dans
Créez un formulaire de contact JavaScript avec le cadre Smart Forms
Mar 07, 2025 am 11:33 AM
Ce tutoriel montre la création de formulaires JavaScript professionnels à l'aide du cadre Smart Forms (Remarque: non plus disponible). Bien que le cadre lui-même ne soit pas disponible, les principes et techniques restent pertinents pour d'autres constructeurs de formulaires.
Ajout d'ombres de boîte aux blocs et éléments WordPress
Mar 09, 2025 pm 12:53 PM
Le CSS Box-Shadow et les propriétés de contour ont gagné le thème. Laissez regarder quelques exemples de la façon dont cela fonctionne dans des thèmes réels et des options que nous devons appliquer ces styles aux blocs et éléments WordPress.
Créer un éditeur de texte en ligne avec l'attribut satisfaistable
Mar 02, 2025 am 09:03 AM
La construction d'un éditeur de texte en ligne n'est pas triviale. Le processus commence par rendre l'élément cible modifiable, gérer des exceptions potentielles de syntaxerror en cours de route. Créer votre éditeur Pour créer cet éditeur, vous devrez modifier dynamiquement le contenu
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Téléchargement de fichiers avec Multer dans Node.js et Express
Mar 02, 2025 am 09:15 AM
Ce tutoriel vous guide dans la création d'un système de téléchargement de fichiers à l'aide de Node.js, Express et Multer. Nous couvrirons les téléchargements de fichiers uniques et multiples, et nous ferons même de la démonstration de stockage d'images dans une base de données MongoDB pour une récupération ultérieure. Tout d'abord, configurez votre projec
Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)
Mar 04, 2025 am 10:22 AM
Cet article explore les meilleurs scripts de générateur de formulaires PHP disponibles sur le marché Envato, en comparant leurs fonctionnalités, leur flexibilité et leurs design. Avant de plonger dans des options spécifiques, comprenons ce qu'est un constructeur de formulaires PHP et pourquoi vous en utiliseriez un. Un formulaire PHP
