Wie kann ich eine 100 % breite Div mit Rändern erstellen?

Anzeigen eines umrandeten Div mit 100 % Breite

Um ein erweiterbares Div mit einer Breite von 100 % und Rändern anzuzeigen, können die folgenden Methoden verwendet werden beschäftigt:

Verwenden der calc() Funktion

Diese Methode erfordert Browserunterstützung für die CSS-Funktion calc(). Der folgende Code kann verwendet werden:

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}

Verwenden von Padding und Box-Sizing

Diese Methode erfordert Browserunterstützung für die Box-Sizing-CSS-Eigenschaft und die Rahmengröße. Boxwert:

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}

Verwendung von Polsterung und Boxgröße: Mit „border-box“ kann der Rand in die Breite der Box einbezogen werden Element.

Das obige ist der detaillierte Inhalt vonWie kann ich eine 100 % breite Div mit Rändern erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!