Heim > Web-Frontend > CSS-Tutorial > Ein genauerer Blick auf die CSS3-Randgrößeneigenschaft

Ein genauerer Blick auf die CSS3-Randgrößeneigenschaft

青灯夜游
Freigeben: 2020-12-23 10:45:31
nach vorne
2179 Leute haben es durchsucht

Ein genauerer Blick auf die CSS3-Randgrößeneigenschaft

Empfohlen: CSS-Video-Tutorial

box-sizing wird verwendet, um das standardmäßige CSS-Boxmodell zu ändern, das zur Berechnung der Breite und Höhe von Elementen verwendet wird. Es hat drei Werte: content-box, border-box und inherit. inherit bezieht sich auf das Erben der box-sizing-Ausdrucksform vom übergeordneten Element, das nicht mehr redundant ist. box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-boxborder-boxinherit三种取值。inherit指的是从父元素继承box-sizing表现形式,不再冗赘。

1. 属性讲解

content-box

默认值,也是css2.1中的盒子模型。在计算widthheight时候,不计算borderpaddingmargin高度、宽度都只是内容高度

border-box

css3新增。 widthheight属性包括内容,内边距和边框,但不包括外边距。

计算公式:

  • width = width = border + padding + 内容宽度

  • height = border + padding + 内容高度

2. 考虑盒子模型的margin

从上面可以知道,即时是border-box也是不计算margin,只是多余计算了borderpadding因为borderpadding都是盒子模型的一部分,但是margin标记的是盒子和盒子的间距。所以,border-box的解释很符合常理。

问题来了,如果有时候一定要设置margin怎么做到自由控制来保证兼容?例如,我们下面要设置一个撑满页面的盒子元素,而且有外边距干扰,怎么做?

实现如下效果图:

Ein genauerer Blick auf die CSS3-Randgrößeneigenschaft

代码:源码下载

<!DOCTYPE html>
<html>
<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>
  <div id="app">
  </div>
</body>
</html>
Nach dem Login kopieren

所以,当需要计算外边距(margin),可以配合css3中的四则运算(calc)来使用

3. 使用建议

根据项目中的使用经验和w3c的建议,推荐将box-sizing属性设置为border-box

1. Attribut Erklärung

content-box

Der Standardwert ist ebenfalls css2. 1 Boxmodell in . Bei der Berechnung von width und height werden border, padding und margin nicht berechnet. Höhe und Breite sind nur die Höhe des Inhalts.

border-box

css3Neu. Die Eigenschaften width und height umfassen Inhalt, Abstand und Rahmen, jedoch keine Ränder. Berechnungsformel:

  • 🎜width = width = border + padding + content width🎜
  • 🎜height = border + padding + content height🎜

2 Berücksichtigen Sie den margin

des Box-Modell🎜Von Wie aus dem Obigen ersichtlich ist, wird margin nicht berechnet, sondern border und <, selbst wenn es sich um border-box handelt code>padding werden redundant berechnet. Weil border und padding beide Teil des Box-Modells sind, margin jedoch den Abstand zwischen Boxen markiert. Daher ist die Erklärung von border-box sehr vernünftig. 🎜
🎜Die Frage ist, wenn es manchmal notwendig ist, einen margin festzulegen, wie erreicht man eine freie Kontrolle, 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: 🎜🎜1 .png🎜🎜Code:Quellcode herunterladen 🎜🎜
* {
  margin: 0;
  padding: 0;
}
div {
  box-sizing: border-box;
}
Nach dem Login kopieren
🎜Wenn Sie also Margen berechnen müssen, können Sie es mit den vier arithmetischen Operationen (calc) in CSS3 verwenden. 🎜

3. Nutzungsvorschläge

🎜Basierend auf den Erfahrungen im Projekt und den Empfehlungen von w3c wird empfohlen, die box-sizingfestzulegen > Attribut zu border-box. 🎜🎜rrreee🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEin genauerer Blick auf die CSS3-Randgrößeneigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage