Zuerst definieren wir ein Div mit einer Länge und Breite von 500 Pixeln. Sie können es sich als großes Kästchen vorstellen. Um seine Existenz deutlich zu erkennen, zeigen wir seinen Rand als durchgezogene Linie an
<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
} </style> <head>
<body>
<div class="div"></div>
</body>
</html>Es werden viele Divs darin sein. Sie können verstehen, dass eine große Kiste andere kleine Kisten enthält.
Setzen Sie eine zuerst
<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
}
#a{
width:100px;
height:100px;
background:red;
} </style> <head>
<body>
<div class="div">
<div id="a"></div>
</div>
</body>
</html>Sie werden sehen
Das Bild ist nicht vollständig. Sie können sehen, dass das Div im Inneren fest mit der oberen linken Ecke des großen Div verbunden ist
plus
margin-top:5px; margin-left:5px
wird
marge dient zum Festlegen des Randes, falls hier festgelegt
margin-right:5px; margin-bottom:5px
wird nicht Es funktioniert
weil nichts dahinter oder darunter ist
Schauen wir uns die Polsterung an
<html>
<head>
<style type="text/css">
.div{
width:500px;
height:500px;
border:solid 1px;
}
#a{
width:100px;
height:100px;
background:red;
margin-top:5px;
margin-left:5px;
padding-top:5px;
padding-left:5px;
} </style> <head>
<body>
<div class="div">
<div id="a">hello</div> </div>
</body>
</html>Der Effekt kann sich sehen lassen Sobald Sie es versuchen, ist es sehr einfach
Ich habe ein Problem festgestellt. Unter der Voraussetzung, dass die Länge und Höhe des Div in IE6- und 360-Browsern festgelegt sind, können sie sich tatsächlich anpassen Wie viel Inhalt vorhanden ist, platzt das Div nicht, sondern die ursprüngliche Länge und Höhe. Geändert
Eigentlich verstößt dies gegen die Norm. Firefox ist normal
<html>
<head>
<style type="text/css">
.div{
width:100px;
height:100px;
border:solid 1px;
}
</style> <head>
<body>
<div class="div" >
5555555555555555555555555555555555555555555555555555555555555555555555555
<br/>
<br/>
<br/>
</div>
</body>
</html>Sie können es ausprobieren und sehen, dass dies auch ein Problem mit der Browserkompatibilität ist
<html>
<head>
<style type="text/css">
.div{
width:100px;
height:100px;
border:solid 1px;
}
#a{
width:100px;
height:50px;
background:red
}
#b{
width:100px;
height:50px;
background:green
}
</style> <head>
<body>
<div class="div" >
<div id="a"></div>
<div id="b"></div>
<br/>
<br/>
<br/>
</div>
</body>
</html> Läuft unter Firefox ist 
richtig
und die Ausführung des IE6-Browsers ist 
falsch
Die Länge und Höhe eines Divs sind äußere Ränder (zwei) + Ränder (zwei) + innere Ränder (zwei) + Inhaltslänge
Denken Sie jedoch an eines: Die Länge und Breite eines Divs sind absolut. Es bezieht sich nicht darauf die Länge und Breite des Inhalts
Das Obige ist der Inhalt des neuen div+css-Weblayoutdesigns (4). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php). .cn)!
