Verwendung des Border-Sizing-Attributs in CSS-CSS-Tutorial-php.cn

Verwendung des Border-Sizing-Attributs in CSS

不言

Freigeben： 2018-07-28 09:59:48

Original

2449 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!