Dieses Tutorial verdeutlicht die Unterscheidung zwischen CSS -Margen und Polsterung und veranschaulicht ihre Auswirkungen auf den Abstand auf Webseite. Wir werden den Rand einstürzen, die Auswirkungen verschiedener Einheiten auf reaktionsschnelles Design und mit CSS -Margin- und Polsterlayout -Techniken schlie?en.

Schlüsselkonzepte:

• Das CSS -Box -Modell ist grundlegend: CSS -Elemente sind rechteckige K?stchen, deren Dimensionen durch Inhalt, Polsterung, Rand und Rand definiert sind.
• Boxgr??e verwirrt oft Anf?nger. Der Standard box-sizing: content-box fügt der Breite und H?he des Elements Polster und Grenzen hinzu, was h?ufig Layoutprobleme verursacht. Einstellung box-sizing: border-box ist eine h?ufige L?sung.
• CSS steuert auf allen vier Seiten eines Elements genau die Polsterung und den Rand. Polsterung umgibt Inhalte; Rand ist die ?u?ere Schicht, die Platz zwischen dem Element und seinen Nachbarn erzeugt.
• Margen und Polsterung haben vielseitige Anwendungen, einschlie?lich Elemente, die sich in ihren Containern zentrieren, den Elementabstand und die Aufrechterhaltung von Bild -Seitenverh?ltnissen aufrechterhalten. Das Beherrschen dieser Techniken l?st viele Layoutprobleme auf.

Das CSS -Box -Modell erkl?rte:

CSS -Elemente sind rechteckige Boxen, die aus:

• Inhalt (der innere Text oder Bilder des Elements)
• Polsterung (Platz zwischen Inhalt und Rand)
• Grenze (der Umriss des Elements)
• Rand (externer Raum zwischen dem Element und anderen Elementen)

Das folgende Diagramm zeigt diese Struktur:

CSS -Box -Gr??en verstehen:

Boxgr??en ist eine h?ufige Quelle der Verwirrung für CSS -Newcomer. Zwei 50% Breite Elemente passen m?glicherweise aufgrund zus?tzlicher Polsterung und Grenzen nicht zu ihrem Beh?lter.

standardm??ig erh?hen Polster und Grenzen die Gesamtbreite des Elements. Um das Layout zu vereinfachen, sind die Set box-sizing: content-box so ein Padding und Grenzen in der angegebenen Breite enthalten. CSS -Resets gelten h?ufig box-sizing: border-box weltweit: border-box

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Einstellen von Polsterung in CSS:

, padding-top, padding-right, padding-bottom oder der Kurzform padding-left Eigenschaft: padding

/* All sides */
padding: 20px;

/* Vertical | Horizontal */
padding: 2em 4em;

/* Top | Horizontal | Bottom */
padding: 1em 20px 2em;

/* Top | Right | Bottom | Left */
padding: 10px 10% 2em 15%;

Rand in CSS einstellen:

, margin-top, margin-right, margin-bottom oder die Kurzform margin-left Eigenschaft: margin

/* All sides */
margin: 10px;

/* Vertical | Horizontal */
margin: 2em 4em;

/* Top | Horizontal | Bottom */
margin: 2em auto 2em;

/* Top | Right | Bottom | Left */
margin: 10px 10% 2em 15%;

Rand und Polsterüberlegungen:

• Einheiten: Vermeiden Sie absolute Einheiten (Pixel) für R?nder und Polsterung in reaktionsschnellem Design. Prozents?tze oder relative Einheiten (EM, REM) passieren sich besser an Bildschirmgr??e und Schrift?nderungen.

• Einheitsberechnung: Browser berechnen die Marge und Polsterung unterschiedlich auf der verwendeten Einheit (Prozentsatz basierend auf der Elternbreite, EM basierend auf Element -Schriftgr??e, Ansichtsfenster -Einheiten basierend auf Ansichtsfensterabmessungen).

• Rand ein Zusammenbruch: Die oberen und unteren R?nder der benachbarten Geschwister k?nnen zu einem einzigen Rand zusammenbrechen (das gr??ere der beiden). Hinzufügen von Polsterung oder Rand verhindert dies.

Praktische Anwendungen:

• Zentrieren: Elemente auf Blockebene auf Blockebene horizontal mit margin: 10px auto;.

• Abstandselemente: Verwenden Sie R?nder, um sich von Raumelementen auseinanderzusetzen, besonders nützlich bei Flexbox.

• Seitenverh?ltnisse aufrechterhalten: Padding-Top als Prozentsatz (berechnet aus dem gewünschten Seitenverh?ltnis) auf einem übergeordneten Element mit H?he: 0, um die Bildbereichsverh?ltnisse aufrechtzuerhalten.

Schlussfolgerung:

Dieses Tutorial bietet eine solide Grundlage für das Verst?ndnis und die Verwendung von CSS -R?ndern und -Polsterung. Eine weitere Untersuchung fortschrittlicher Techniken verbessert Ihre CSS -F?higkeiten.

Das obige ist der detaillierte Inhalt vonSo setzen Sie CSS -Margen und Polsterung sowie coole Layout -Tricks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!