Wie kann ich Div-Ränder mithilfe von CSS konsistent machen?

Konsistente Div-Ränder erreichen

Beim Stylen von Div-Elementen mit einem Rand wird der Standard-CSS-Ansatz (z. B. „Rand: 1 Pixel einfarbig schwarz“) verwendet. ) fügt die Rahmendicke zur Div-Größe hinzu. Beispielsweise würde ein 1-Pixel-Rand zu einem Div führen, das 102 x 102 Pixel misst, statt der beabsichtigten 100 x 100 Pixel.

Nutzung der „Box-Sizing“-Eigenschaft

Um dieses Problem zu beheben, hat CSS die Eigenschaft „box-sizing“ eingeführt. Wenn Sie diese Eigenschaft auf „border-box“ setzen, behandelt der Browser die Rahmenbreite als Teil der Div-Abmessungen.

Implementierung im Code

Beachten Sie den folgenden Code :

div {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 20px solid #f00;
    background: #00f;
    margin: 10px;
}

Durch Angabe von „box-sizing: border-box“ misst das Div jetzt 100 Pixel x 100 Pixel, wobei der 20 Pixel-Rand in diesen Abmessungen enthalten ist.

Das obige ist der detaillierte Inhalt vonWie kann ich Div-Ränder mithilfe von CSS konsistent machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!