Was ist ein Boxmodell?

Was ist ein Boxmodell?

Jedes Tag auf der Webseite entspricht einem Box-Modell, und alle Box-Modelle verfügen über fünf notwendige Attribute: Breite, Höhe, Abstand, Rand, Rand

Dann So berechnen Sie den tatsächlichen Wert Breite eines Boxmodells auf einer Webseite? ? ? ?

Zum Beispiel:

　　

Die Breite des obigen Div sollte sein: width+2*padding+2border=300+2*20+2*1=342px;

Padding: Padding: der Abstand zwischen Inhalt und Rand.

Die vier Attribute der Polsterung: Polsterung oben, Polsterung unten, Polsterung links, Polsterung rechts.

Breite: Breite.

Höhe: Höhe.

Rand: Rand.

Allgemeine Randschrift: border:1px solid #ccc repräsentiert jeweils die Breite, den Linientyp und die Farbe des Randes.

Übliche Linientypen sind: durchgezogen (durchgezogene Linie), gestrichelt (gestrichelte Linie), gepunktet (gepunktete Linie).

Die drei Grundattribute des Rahmens: border-width (Breite des Rahmens), border-style (Linienstil des Rahmens), border-color (Farbe des Rahmens); >magin: äußerer Randabstand.

Die vier Grundattribute von margin: margin-top, margin-bottom, margin-left, margin-right.

Bei der Verwendung von margin zu beachtende Punkte:

1. Kollaps: Zwischen Elementen auf Blockebene existiert ein Randkollaps. Wenn das Element zu einem Inline-Element oder einem Inline-Blockelement wird, wird es nicht ausgeblendet. Das Element wird nicht ausgeblendet, wenn es den Standarddokumentfluss verlässt.

2. Verwenden Sie margin, um die Box zu zentrieren: margin:0 auto;

Wenn Sie margin:0 auto verwenden, um die Box zu zentrieren, beachten Sie bitte: Die Box muss eine lichte Breite haben. Die Box muss sich im Standard-Dokumentenfluss befinden. margin:0 zentriert automatisch die Box, nicht den Inhalt in der Box.

Um den Text im Feld zu zentrieren, können Sie Folgendes verwenden: text-align:center; (von links nach rechts: text-align:left/right;)

Tipps: Wenn Sie möchten Verschieben Sie die Position des untergeordneten Elements. Es wird empfohlen, den Abstand des übergeordneten Elements anstelle des Rands des untergeordneten Elements zu verwenden, sofern dies nicht erforderlich ist. Wenn ein Rand verwendet werden muss, muss das übergeordnete Element einen Rand haben

Verwendungsrichtlinien: Wann Versuchen Sie mit CSS so viele Abkürzungen wie möglich.

padding:10px 20px; bedeutet, dass der obere und untere Abstand 10px und der linke und rechte Abstand 20px beträgt.

Abstand: 10px 20px 30px; bedeutet, dass der obere Abstand 10 beträgt, der untere Abstand 30px und der linke und rechte Abstand 20px beträgt.

Abstand: 10px 20px 30px 40px; bedeutet oben, rechte bzw. linke Polsterung.

Das obige ist der detaillierte Inhalt vonWas ist ein Boxmodell?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn