Wie wirkt sich „box-sizing: border-box' auf die Größe eines HTML-Elements mit Rahmen aus?

Innen- oder Außenränder

Beim Gestalten eines HTML-Elements mit einem Rahmen ist es wichtig zu berücksichtigen, wo der Rahmen relativ zum positioniert ist Abmessungen des Elements. Standardmäßig werden CSS-Rahmen außerhalb des Elements platziert, wodurch beide Seiten breiter werden.

Div-Größe mit Box-Sizing beibehalten

Um sicherzustellen, dass die Abmessungen eines Divs unverändert bleiben Wenn ein Rahmen hinzugefügt wird, kommt die Eigenschaft der Boxgröße ins Spiel. Wenn Sie es auf „border-box“ setzen, wird der Rahmen innerhalb der angegebenen Breite und Höhe des Elements eingeschlossen.

CSS-Implementierung

Hier ist ein CSS-Beispiel, das die Wirkung von Box demonstriert. Größe:

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

In diesem Beispiel hat das Div einen Rand von 20 Pixeln. Ohne box-sizing: border-box hätte das Div eine Gesamtbreite von 140 Pixel (100 Pixel für den Inhalt und 20 Pixel für den Rand auf jeder Seite). Bei „box-sizing: border-box“ wird der Rahmen jedoch innerhalb der angegebenen Breite von 100 Pixeln eingeschlossen, wodurch sichergestellt wird, dass die tatsächliche Breite des Divs 100 Pixel beträgt.

Das obige ist der detaillierte Inhalt vonWie wirkt sich „box-sizing: border-box' auf die Größe eines HTML-Elements mit Rahmen aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!