Einführung in das CSS-Boxmodell

1. Der Unterschied zwischen Rand und Polsterung:

Wenn wir uns eine Webseite als Wand vorstellen, kann der Inhalt der Webseite immer so zusammengefasst werden, dass er aus Kästchen besteht, wie in der Abbildung gezeigt:

Nehmen Sie eine Schachtel separat heraus und Sie werden feststellen, dass sie aus vier Teilen besteht: Rand, Rand, Innenrand und Inhalt:

Was hier durch die rote Linie markiert ist, ist der Rand (Rand), was durch die graue Linie nach innen markiert ist, ist der Rand (Rand), was durch die blaue Linie markiert ist, ist der innere Rand (Auffüllung) und was Ist weiter innen der konkrete Inhalt (Inhalt) markiert, ist er dem Foto sehr ähnlich? Zu diesem Zeitpunkt kann man sich auch vorstellen, dass die Box im Boxmodell ein Block (div) ist, der aus dem Fotorahmen, dem Foto, dem Abstand zwischen dem Fotorahmen und der Außenwand und dem Abstand zwischen dem Foto besteht Rahmen und das Foto.

2. Beispiel:

1,

div
{

margin:3px 5px 6px;
padding:4px 6px;
border-width:6px;
border-color:black;
width:500;
height:300;
}

Diese CSS-Definition beschreibt eine solche Box:

Der Abstand zwischen dem Rand und der Oberseite beträgt 3 Pixel, der Abstand zwischen dem Rand und dem linken und rechten Teil beträgt 5 Pixel und der Abstand zwischen dem Rand und der Unterseite beträgt 6 Pixel; >seine Randbreite beträgt 6 Pixel und die Randfarbe ist schwarz;

Der Abstand zwischen seiner Polsterung und dem oberen und unteren Rand beträgt 4 Pixel und der Abstand vom linken und rechten Rand beträgt 6 Pixel; 🎜>

Die Größe des Fotos beträgt 500* 300

2. Beschreibung des Standardwerts der Box am Beispiel des Randes:

margin:4px;

bedeutet, dass der Abstand zwischen der Box und dem oberen, rechten, unteren und linken Rand 4 Pixel beträgt;

margin:4px 6px;

bedeutet, dass der Abstand zwischen der Box und dem Der obere und untere Rand beträgt 4 Pixel und der Abstand zwischen dem rechten und linken Rand beträgt 6 Pixel.

margin:4px 5px 6px;

bedeutet, dass der Abstand zwischen dem Feld und dem oberen Rand beträgt beträgt 4 Pixel, der Abstand vom rechten und linken Rand beträgt 5 Pixel und der Abstand vom unteren Rand beträgt 6 Pixel;

margin:4px 5px 6px 7px ;

bedeutet, dass der Abstand zwischen der Box und dem oberen Rand beträgt 4 Pixel, der Abstand vom rechten Rand beträgt 5 Pixel, der Abstand vom unteren Rand beträgt 6 Pixel und der Abstand vom linken Rand beträgt 7 Pixel;

Das obige ist der detaillierte Inhalt vonEinführung in das CSS-Boxmodell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!