Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)-CSS-Tutorial-php.cn

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)

黄舟

Freigeben： 2016-12-29 14:28:00

Original

1238 Leute haben es durchsucht

Sprechen wir über das Problem der Zusammenführung von Innen- und Außenrändern

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

Nach dem Login kopieren

Der untere Rand von Ebene a beträgt 20 Pixel
Sehen Sie sich das Bild unten an

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)

Als nächstes ändern Sie den oberen Rand der grünen Ebene auf 10 Pixel

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

Nach dem Login kopieren

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)

Kein Unterschied

Einfach ausgedrückt bedeutet Randverschmelzung, dass zwei vertikale Ränder, wenn sie aufeinandertreffen, einen einzigen Rand bilden. Die Höhe des zusammengeführten Randes entspricht der größeren der Höhen der beiden zusammengeführten Ränder.
Sehen Sie sich das Bild an

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)

Was ist, wenn die beiden die gleichen Pixel haben? Wenn sie alle 20 Pixel groß sind

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:20px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

Nach dem Login kopieren

der Effekt ist immer noch derselbe

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)

Testen Sie es unten

<html>
<head>
<style type="text/css"> #a{
width:100px;
height:100px;
background:red;
margin-top:20px;
}
#b{
width:50px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"><div id="b"></div></div> 
</body>
</html>

Nach dem Login kopieren

ie6-Anzeige

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)

Firefox-Anzeige

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)

Es ist ersichtlich, dass IE6 nicht zusammengeführt wird, Firefox jedoch zusammengeführt wird

Einige Leute sind vielleicht neugierig
Warum bleibt die rote Farbe nicht im Browserfeld hängen? oben
Tatsächlich hat kein Browser standardmäßige innere und äußere Ränder

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)

Sie müssen nur

<html>
<head>
<style type="text/css"> 
*{
margin:0;
padding:0;
} #a{
width:100px;
height:50px;
background:red;
margin-bottom:20px;
}
#b{
width:100px;
height:50px;
background:green;
margin-top:10px;
} 
</style> <head>
<body> <div id="a"></div>
<div id="b"></div> </body>
</html>

Nach dem Login kopieren

sehen, um
< zu sehen 🎜>

Ein neuer Anfang für das Design von div+css-Webseitenlayouts (5)

Einige Browser müssen möglicherweise

body{
margin:0;
padding:0;
}

Nach dem Login kopieren

Das Obige ist der Inhalt eines neuen Anfangs des div + CSS-Weblayout-Designs (5 ). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!