Heim > Artikel > Web-Frontend > Verwendung des Border-Sizing-Attributs in CSS

Verwendung des Border-Sizing-Attributs in CSS

不言Original: 2018-07-28 09:59:482393Durchsuche

Dieser Artikel führt Sie in die Verwendung des Border-Sizing-Attributs in CSS ein. Ich hoffe, dass er Freunden in Not helfen kann.

Box-Sizing ändert das standardmäßige CSS-Boxmodell, das zur Berechnung der Elementbreite und -höhe verwendet wird. Es hat drei Werte: Content-Box, Border-Box und Inherit. Unter „Erben“ versteht man das Erben der Boxgrößenform vom übergeordneten Element, das nicht mehr redundant ist.

## 1. Attributerklärung

#### content-box
Der Standardwert ist auch das Box-Modell in CSS2.1. Bei der Berechnung von width und height werden border, padding und margin nicht berechnet. Höhe und Breite entsprechen nur der Inhaltshöhe.

#### border-box
css3Neu. Die Attribute width und height umfassen Inhalt, Abstand und Rahmen, jedoch keine Ränder.

Berechnungsformel:

Breite = Breite = Rand + Innenabstand + Inhaltsbreite
Höhe = Rand + Polsterung + Inhaltshöhe

## 2. Unter Berücksichtigung des margin
des Box-Modells können wir aus dem Obigen erkennen, dass es auch dann border-box ist , es wird nicht berechnet margin Es ist nur eine unnötige Berechnung von border und padding. Weil border und padding beide Teil des Boxmodells sind, margin jedoch den Abstand zwischen Box und Box markiert. Daher ist die Erklärung von border-box sehr vernünftig.

Die Frage ist: Wenn manchmal eine Marge festgelegt werden muss, wie kann diese frei gesteuert werden, um die Kompatibilität sicherzustellen? Wir möchten beispielsweise ein Box-Element einrichten, das die gesamte Seite ausfüllt und durch Ränder behindert wird. Wie sollen wir das tun?

Erzielen Sie die folgenden Renderings:
Verwendung des Border-Sizing-Attributs in CSS

Code: Quellcode-Download

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>yuanxin.me</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #app {
      box-sizing: border-box; /* 指定计算方式 */
      margin: 10px; /* 外边距干扰 */
      /* 利用 css3 的 calc */
      width: calc(100vw - 2*10px);
      height: calc(100vh - 2*10px);
    }
  </style>
</head>
<body>
  <p id="app">
  </p>
</body>
</html>

Also, wenn Sie es brauchen Um die Ränder (Margin) zu berechnen, können Sie calc mit den vier Rechenoperationen () in CSS3 verwenden.

## 3. Verwendungsvorschläge

Basierend auf den Erfahrungen im Projekt und den Empfehlungen von w3c wird empfohlen, das Box-Sizing-Attribut auf border-box zu setzen.

* {
  margin: 0;
  padding: 0;
}
p {
  box-sizing: border-box;
}

Verwandte Empfehlungen:

Wie verwende ich reines CSS, um dynamisch fahrende Züge zu implementieren

Was sind die CSS-Selektoren? Umfassende Zusammenfassung der CSS-Selektoren (mit Code)

Das obige ist der detaillierte Inhalt vonVerwendung des Border-Sizing-Attributs in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist CSS? Einführung in den CSS-Kaskadenstil (Code)Nächster Artikel：Was ist CSS? Einführung in den CSS-Kaskadenstil (Code)

In Verbindung stehende Artikel

Mehr sehen