So setzen Sie CSS -Margen und Polsterung sowie coole Layout -Tricks

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:

bestehen,

• 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;
}

Experimentieren Sie mit interaktiven Demos, um Ihr Verständnis zu festigen.

Einstellen von Polsterung in CSS:

Kontrollpolsterung mit

, 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:

Ähnlich wie bei der Polsterung, verwenden Sie

, 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%;

Ränder schaffen Platz zwischen den Elementen.

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!