Was ist ein Margenkollaps? Unter welchen Umständen erscheint es? Wie kann man es lösen?

In diesem Artikel erfahren Sie mehr über das CSS-Box-Modell und stellen vor, was Margin Collapse ist. Unter welchen Umständen kommt es zu einem Margenverfall? Und über Lösungen reden.

In CSS sind alle Elemente von „Boxen“ umgeben. Wir verwenden häufig zwei Arten von „Boxen“ – Boxen auf Blockebene (block box ) und Inline-Boxen (inline Feld). block box) 和 内联盒子 (inline box)。

什么是 CSS 盒模型？

在 CSS 中，盒模型（box model）是在设计和布局时使用。

盒模型的定义可以分成这几部分：

• Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
• Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
• Border box: 包裹内容和内边距。大小通过 border 相关属性设置。
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

块级盒子完整地应用了 CSS 盒模型，内联盒子只使用盒模型中定义的部分内容。

box-sizing

box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。

• content-box（默认值），即标准盒模型，width: 100px 指的是内容区会有 100px 宽。
  • 盒子的大小 = content(100px) + padding + border
• border-box，即替代（IE）盒模型，width: 100px 指的是 内容区 + 边框 + 内边距 的总和是 100px 宽。
  • 盒子的大小 = content + padding + border = 100px

不论那种模型，margin 都是不计入实际大小 —— 当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。

display

这里可以补充一个概念 -- 内部和外部显示类型。

• 外部显示类型，我们通过对盒子 display 属性的设置，比如 inline 或者 block ，来控制盒子的是内联还是块级。
• 内部显示类型，它决定了盒子内部元素是如何布局的。

如果设置 display: flex，在一个元素上，外部显示类型是 block，但是内部显示类型修改为 flex。 该盒子的所有直接子元素都会成为 flex 元素，会根据 弹性盒子（Flexbox ）规则进行布局。

还有一个特殊的值 -- display: inline-block，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用:不发生换行，但可以设定宽度和高度，也就是说实现了块级的部分效果：

• 设置 width 和 height 属性会生效。
• padding, margin, 以及 border 会推开其他元素。

行内元素 / 块级元素

HTML4 中，元素被分成两大类: inline (内联元素) 与 block (块级元素)。

1. 什么是行内元素？

一个行内元素只占据它对应标签的边框所包含的空间。

常见的行内元素有 a、 b、 span、 img、 strong、 sub sup、 button、 input、 label、 select、 textarea

2. 什么是块级元素？

块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。

常见的块级元素有 div、ul 、ol、 li、 dl、 dt、 dd、 h1、 h2、 h3、h4 、 h5、h6 、p

Was ist das CSS-Box-Modell?

In CSS wird das Box-Modell für Design und Layout verwendet. 🎜🎜Die Definition des Box-Modells kann in folgende Teile unterteilt werden: 🎜

• Inhaltsbox: Dieser Bereich wird zur Anzeige von Inhalten verwendet. Die Größe kann durch die Einstellung festgelegt werden width und height.
• Padding box: Ein leerer Bereich außerhalb des Inhaltsbereichs. Die Größe wird durch den festgelegt padding-bezogene Eigenschaften.
• Randfeld: Umschließt Inhalt und Polsterung. Die Größe wird über die border-bezogenen Eigenschaften festgelegt.
• Randbox: Dies ist der äußerste Bereich, der leere Raum zwischen der Box und anderen Elementen. Die Größe wird über die margin-bezogenen Eigenschaften festgelegt.

🎜🎜🎜Boxen auf Blockebene wenden das CSS-Boxmodell vollständig an, während Inline-Boxen nur einen Teil des im Boxmodell definierten Inhalts verwenden. 🎜

box-sizing

🎜box-sizing Attribut definiert das Browser-Wie Soll die Gesamtbreite und Gesamthöhe eines Elements berechnet werden? 🎜

• content-box (Standardwert), das ist das Standard-Box-Modell, width: 100px bezieht sich auf den Inhalt Bereich Es ist 100 Pixel breit.
  • Boxgröße = content(100px) + padding + border
• border-box, ein alternatives (IE) Box-Modell, width: 100px bezieht sich auf den Inhaltsbereich + border Die Summe aus + padding ist 100 Pixel breit.
  • Boxgröße = Inhalt + Padding + Rahmen = 100px

🎜Egal welches Modell, der Rand wird nicht in die tatsächliche Größe eingerechnet – er wirkt sich natürlich auf den Platz aus, den das Feld auf der Seite einnimmt , aber Was beeinflusst, ist der äußere Raum der Box. 🎜

display

🎜Hier können Sie ein Konzept hinzufügen – intern und extern Anzeigetyp. 🎜

• Externer Anzeigetyp, wir legen das display-Attribut der Box fest, z. B. inline oder block, um zu steuern, ob die Box inline oder auf Blockebene ist.
• Interner Anzeigetyp, der bestimmt, wie die Elemente innerhalb der Box angeordnet sind.

🎜Wenn Sie display: flex für ein Element festlegen, ist der externe Anzeigetyp block, aber der interner Anzeigetyp Der Typ wird in flex geändert. Alle direkten untergeordneten Elemente der Box werden zu flex-Elementen und werden gemäß den Regeln der flexiblen Box (Flexbox) angeordnet. 🎜🎜Es gibt auch einen besonderen Wert – display: inline-block, der einen Zwischenzustand zwischen Inline und Block bereitstellt. Dies ist für die folgenden Situationen sehr nützlich: Es findet kein Zeilenumbruch statt, aber die Breite und Höhe können eingestellt werden, was bedeutet, dass einige Effekte auf Blockebene erzielt werden: 🎜

• Set width und das Attribut height werden wirksam.
• padding, margin und border verdrängen andere Elemente.

Inline-Elemente/Elemente auf Blockebene

🎜In HTML4 sind Elemente in zwei Kategorien unterteilt: inline (Inline-Elemente) und block (Elemente auf Blockebene). 🎜

1 Was sind Inline-Elemente?

🎜Ein Inline-Element nimmt nur den Platz ein, der durch den Rand seiner entsprechenden Beschriftung enthalten ist. 🎜🎜Zu den üblichen Inline-Elementen gehören a, b, span, img, strong >, sub sup, button, input, label, select , textarea🎜

2. Was ist ein Element auf Blockebene?

🎜Ein Element auf Blockebene nimmt den gesamten Raum seines übergeordneten Elements (Containers) ein und erstellt so einen „Block“. Normalerweise fügen Browser vor und nach Elementen auf Blockebene eine neue Zeile ein. 🎜🎜Zu den allgemeinen Elementen auf Blockebene gehören div, ul, ol, li, dl code>, <code>dt, dd, h1, h2, h3, h4 , h5, h6 , p🎜

3. Der Unterschied?

• Format (standardmäßig), Inline-Elemente werden nicht umbrochen, Elemente auf Blockebene jedoch.

• Auf Inhalt (standardmäßig) können Inline-Elemente nur Daten und andere Inline-Elemente enthalten. Elemente auf Blockebene können Inline-Elemente und andere Elemente auf Blockebene enthalten.

• Zu den Attributen:

  • Inline-Elemente
    • width und height-Einstellungen sind ungültig (Zeilenhöhe kann eingestellt werden), width 和 height 设置无效（可以设置 line-height)，
    • 内边距（padding）、外边距（margin） 和 边框（border） 在 上下方向 不会对其他元素产生影响。
  • 块级元素
    • width 和 height 属性可以发挥作用，
    • 内边距（padding）、外边距（margin） 和 边框（border） 会将其他元素从当前元素周围“推开”

外边距（margin）折叠

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为 边距折叠。

什么情况才会出现

2 个或多个毗邻的的普通流中的块元素垂直方向上的 margin 会折叠

• 毗邻： 是指没有被非空内容、padding、border 或 clear 分隔开
• 垂直方向： 是指只有垂直方向的 margin 才会

如何解决？

• 创建了 BFC 的元素 和它的子元素/兄弟元素不会发生折叠

• 设置 padding / border ，一些具体的场景：

  • 父元素的 margin-top 和子元素的 margin-top 发生重叠。

    发生重叠是因为它们是相邻的，所以我们可以通过这一点来解决这个问题。我们可以为父元素设 border-top、padding-top 值来分隔它们。

  • 高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 发生重叠。

    发生重叠一个是因为它们相 邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置 border-bottom、 padding-bottom 来分隔它们，也可以为父元素设置一个高度，max-height 和 min-height 也能解决这个问题。

  • 是没有内容的元素，自身的 margin-top 和 margin-bottom 发生的重叠。

    我们可以通过为其设置 border、padding 或者高度来解决这个问题。

触发 BFC 的因素

• float（除了 none）
• overflow（除了 visible）
• display（table-cell / table-caption / inline-block）
• position
Innenabstände (padding), Ränder (margin) und Rahmen (border) wirken sich nicht auf andere Elemente in der

oben- und unten-Richtung

aus.

🎜🎜Elemente auf Blockebene🎜🎜🎜width- und height-Attribute können eine Rolle spielen, 🎜🎜Padding (padding), außen Randabstand (margin) und Rand (border) „schieben“ andere Elemente vom aktuellen Element weg 🎜🎜🎜🎜🎜🎜🎜🎜

🎜Margin (margin) Collapse🎜

🎜Der obere Rand (margin-top) und der untere Rand (margin-bottom) des Blocks werden manchmal zusammengeführt (kollabiert). ) ) ist ein einzelner Rand, dessen Größe dem Maximum des einzelnen Rands entspricht (oder nur einer davon, wenn sie gleich sind), ein Verhalten, das als „Margenkollaps“ bezeichnet wird. 🎜

🎜Was passiert, wenn 🎜🎜🎜zwei oder mehr benachbarte Blockelemente im normalen Fluss vertikale Ränder haben, die kollabieren🎜🎜🎜🎜angrenzend🎜: Das bedeutet, dass sie nicht durch getrennt sind Nicht leerer Inhalt, Auffüllung, Rand oder klar 🎜🎜🎜Vertikale Richtung🎜: Dies bedeutet, dass nur der vertikale Rand 🎜🎜

🎜Wie wird das Problem gelöst? 🎜🎜🎜🎜🎜🎜Das Element, das BFC erstellt hat🎜 und seine untergeordneten Elemente/Geschwisterelemente werden nicht gefaltet🎜🎜🎜🎜Setzen Sie padding / border, einige spezifische Szenarien: 🎜🎜🎜🎜Der margin-top des übergeordneten Elements überschneidet sich mit dem margin-top des untergeordneten Elements . 🎜🎜Die Überlappung entsteht, weil sie benachbart sind, sodass wir das Problem dadurch lösen können. Wir können die Werte border-top und padding-top für das übergeordnete Element festlegen, um sie zu trennen. 🎜🎜🎜🎜Der margin-bottom des übergeordneten Elements mit der Höhe auto überschneidet sich mit dem margin-bottom des untergeordneten Elements. 🎜🎜Eine Überlappung entsteht, weil sie benachbart sind, und die andere, weil die Höhe des übergeordneten Elements nicht festgelegt ist. Daher können wir border-bottom und padding-bottom für das übergeordnete Element festlegen, um sie zu trennen, oder wir können eine Höhe für das übergeordnete Element festlegen, max- height und min-height können dieses Problem ebenfalls lösen. 🎜🎜🎜🎜 ist ein Element ohne Inhalt, bei dem sich sein eigener margin-top und margin-bottom überlappen. 🎜🎜Wir können dieses Problem lösen, indem wir border, padding oder height dafür festlegen. 🎜🎜🎜🎜🎜

🎜Faktoren, die BFC auslösen🎜🎜🎜🎜float (außer keinem)🎜🎜 Überlauf (außer sichtbar) 🎜🎜display (Tabellenzelle / Tabellenüberschrift / Inline-Block) 🎜🎜Position (außer statisch / relativ) 🎜🎜 🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideos🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWas ist ein Margenkollaps? Unter welchen Umständen erscheint es? Wie kann man es lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!