Heim >Web-Frontend >CSS-Tutorial >Zusammenfassung dessen, worauf Sie beim Schreiben von CSS bezüglich Border achten müssen
Zusammenfassung dessen, worauf Sie beim Schreiben von CSS bezüglich Border achten müssen
- PHP中文网Original
- 2017-03-30 14:54:191789Durchsuche
Ich habe heute beim Schreiben plötzlich daran gedacht und es mit euch geteilt. padding ist in verschiedenen Browsern unterschiedlich, aber Sie haben das vielleicht nicht bemerkt;
Lassen Sie uns zunächst über ein Szenario sprechen, zum Beispiel:
Ein gelbes Kästchen mit einer Breite von 400 Pixeln, ein kleines blaues Kästchen mit einer Breite von 300 Pixeln auf der rechten Seite. Das sollte genau hineinpassen, oder? ist genau 400! Okay, lass es uns zuerst versuchen!
Ich habe angefangen zu schreiben (Kopf weggelassen):
<style>
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;}
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;}
</style>
400px
<p id="yellow">
<p id="blue">300px</p>
<p id="red">100px</p>
</p>Sehen Sie sich den Effekt an:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.8;}
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;}
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;}
</style>
</head>
<body>
400px
<p id="yellow">
<p id="blue">300px</p>
<p id="red">100px</p>
</p>
</body>
</html>Der endgültige Effekt ist so:
Der Grund, warum ich es nicht abgelegt habe, ist, dass ich einen Rand geschrieben habe: 1px; Dann lasst uns ihn entfernen und einen Blick darauf werfen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.8;}
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}
#blue{ width:300px; height:100px; background:#00CCFF; float:left;}
#red{ width:100px; height:100px; background:#FF9900; float:right;}
</style>
</head>
<body>
400px
<p id="yellow">
<p id="blue">300px</p>
<p id="red">100px</p>
</p>
</body>
</html>Nun, das ist Richtig, legen Sie es einfach ab.
Der Rand wird außerhalb der Breite berechnet. Schauen wir uns den Code unten an:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.8;}
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;}
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;}
</style>
</head>
<body>
400px
<p id="yellow">
<p id="blue">300px</p>
<p id="red">100px</p>
</p>
</body>
</html>Wenn Sie IE verwenden. dann sehen Sie, dass der Abstand zwischen ihnen viel kleiner ist, FIREFOX sollte derselbe sein wie der ursprüngliche Effekt
Dann schauen Sie sich den letzten Effekt an:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.8;}
#yellow{ width:400px; background:#FFCC99; float:left;}
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;}
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;}
</style>
</head>
<body>
400px
<p id="yellow">
<p id="blue">300px</p>
<p id="red">100px</p>
</p>
</body>
</html>Die beiden kleinen Kästchen im Inneren haben Ränder , und die Breite hat sich nicht geändert, ich habe sie im IE abgelegt. Sehen Sie sich den Codeunterschied an, ich habe weniger hinzugefügt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">Programmcode
Absatz übertragen:
DOCTYPE ist die Abkürzung für
document
type (Dokumenttyp), die verwendet wird, um anzugeben, welche Version von XHTML oder HTML Sie verwenden.
Die DTD (z. B. xhtml1-transitional.dtd im obigen Beispiel) wird als Dokumenttypdefinition bezeichnet, die die Regeln des Dokuments enthält. Der Browser interpretiert die Identität Ihrer Seite basierend auf der von Ihnen definierten und angezeigten DTD Es. Hier finden Sie eine freundliche Erinnerung daran, dies beim Schreiben von CSS zu beachten. Wenn die Anforderungen an den Seitenvergleich nicht ganz streng sind, versuchen Sie, bei der Berechnung eine kleine Lücke zu lassen. Selbst wenn ein 1-Pixel-Rand vorhanden ist, hat dies keine gravierenden Auswirkungen auf die Seite. 1 Pixel ist besser, aber wenn es 10 Pixel ist, ist Ihre Seite fertig. Ich bevorzuge: Wenn das Feld breit ist, fügen Sie keine Polsterung hinzu. Es ist unmöglich, keinen Rand hinzuzufügen. Niemand wird über mehrere Sätze mit einer oder zwei Ebenen lachen. Dadurch können viele Probleme mit der Browserkompatibilität vermieden werden.
Das Obige ist eine Zusammenfassung dessen, worauf Sie beim Schreiben von CSS achten müssen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!