Ausführliche Erläuterung der Anweisungen zur Berechnung der Fehlausrichtungsbreite des CSS-Webseitenlayouts-CSS-Tutorial-php.cn

Warum die Breite berechnen Die Berechnung der Pixelbreite von Webseiten dient dazu, dass das CSS Webseitenlayout sauber und kompatibel ist. Wenn wir Webseiten mit linken und rechten Strukturen gestalten oder Padding und Rand verwenden, berechnen wir normalerweise die Breite der gesamten Seite Ist die Breite zu groß oder zu klein, treten Fehlausrichtungsprobleme auf.

So berechnen Sie die CSS-Breite Beispiel 1: Wir berechnen den Layoutstil einer linken und rechten Struktur. Wenn die Gesamtbreite 400 Pixel beträgt, sollte die Summe aus links und rechts weniger als 400 Pixel betragen. Dann haben wir möglicherweise links 300 Pixel und rechts 100 Pixel. Richtiger Code:

head > .webjxcom{ width :400px;} . you{ float :right ; width:100px; background:#999} Links 300px

Rechts 100px

Oben ist die korrekte Gesamtbreite der linken und rechten Strukturen angegeben, die genau 400 Pixel entspricht

Fehler: Wenn wir die Gesamtbreite unverändert lassen, beträgt die linke Seite 300 Pixel und die rechte Seite 120 Pixel, sodass die Gesamtbreite 20 Pixel überschreitet. Der p+CSS-Code lautet wie folgt:

Berechnung der linken und rechten Strukturbreite www.webjx.com

.webjxcom{width:400px;} .zuo{ float:left; width:300px; background:#CCC;}

.you{ float:right; width:#999🎜>&lt ;/head> Left 300px

Right 100px

Das können wir auf dem Bild oben sehen Da die Gesamtbreite etwa 20 Pixel beträgt, können die linke und rechte Struktur nicht bündig sein und die rechte Seite fällt nach unten. Auf diese Weise treten in der Praxis aufgrund unserer Nachlässigkeit bei der Berechnung im Allgemeinen Probleme mit der Kompatibilität von Fehlausrichtungen auf, wenn der Unterschied gering ist, was von uns nicht entdeckt wird Kompatibilität können wir mit der Breitenberechnung beginnen.

Beispiel 2: Es gibt einen 1-Pixel-Rand in der linken und rechten Struktur. Im Allgemeinen gibt es einen 1-Pixel-Rand in der linken und rechten Struktur, und dann werden einige Ränder hinzugefügt Für die rechten Strukturen müssen wir die Randbreite mit der Breite der zusammen berechneten linken und rechten Strukturen abgleichen. Korrektes Beispiel: CSS- und

HTML-Code

lautet wie folgt:

&lt ;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Berechnung der linken und rechten Strukturbreite www.webjx.com .webjxcom{width:400px;} .zuo{ float:left; width:298px; border:1px solid #F00; :#CCC;} .you{ float:right; width:98px; border:1px solid #F00;🎜>

300px auf der linken Seite

100px rechts

Da die linken und rechten Strukturen eine Breite von haben 1 Pixel, Sie müssen die Breite des linken und rechten Rands um jeweils 2 Pixel subtrahieren, sodass die Breite links 298 Pixel und rechts 98 Pixel beträgt.

Wenn der Rand nicht subtrahiert wird, wird der folgende Effekt verursacht :

p+CSS

Berechnung der prozentualen Breite festlegen Manchmal müssen wir auch den Prozentsatz zur Berechnung der Breite verwenden. Normalerweise ist es auch die prozentuale Gesamtbreite darf 100 % nicht überschreiten

Achten Sie bei der Berechnung der CSS-Breite auf die Zusammenfassung: Ob es sich um eine Links-Rechts-Struktur, ein mehrspaltiges Layout oder eine einzelne p-Breite-Layouteinstellung handelt, Sie müssen auf das Verständnis und die Berechnung der CSS-Breite achten Breite, insbesondere bei Verwendung von Polsterung, Rand, Rahmen usw. CSS-Eigenschaften , zu diesem Zeitpunkt müssen wir alle die von ihnen festgelegte belegte Breite berechnen und fest im Griff haben, dass die Summe der Die Breite derselben Zeile ist kleiner oder gleich der Gesamtbreite. Wenn sie größer als die Gesamtbreite ist, wird ein Kompatibilitätsproblem an der falschen Stelle angezeigt. Daher können wir bei einer allgemeinen Fehlausrichtung mit der Berechnung der Breite beginnen. Natürlich gibt es viele Gründe für eine Fehlausrichtung. Dies ist auch eine der Methoden, um das Problem der Fehlausrichtung zu lösen.