Detaillierte Erläuterung des HTML-Box-Modells

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des HTML-Box-Modells geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung des HTML-Box-Modells?

1.1. Die Größe des Inhaltsbereichs der Box – Inhaltsbreite und Inhaltshöhe – hängt von mehreren Faktoren ab:

-ob das Element, das die Box generiert, „Breite“ hat oder 'height' festgelegte Eigenschaft.
--Ob das Feld Text und andere Felder enthält.
--Ob es sich bei der Box um einen Tisch usw. handelt.

1.2. Die Hintergrundfarbe der Box

--Der Hintergrundstil der Füll- und Randbereiche wird durch das Attribut „Hintergrund“ des generierten Elements angegeben (die Kiste) . Der Randhintergrund ist immer transparent

2. Randattribute: 'margin-top', 'margin-right', 'margin-bottom ', 'margin-left' und 'margin'

2.1. Das Randattribut gibt die Breite des Randbereichs der Box an

--'margin'简写属性一次性设置四周的外边距，而其它外边距属性只设置它们各侧的。这些属性适用于所有元素，但非替换的行内元素上的垂直margin将不会产生任何效果

2.2 . margin-width> Werttyp, kann einen der folgenden Werte annehmen:

--<length>
指定一个固定宽度
--<percentage>
百分比根据生成盒的包含块的width来计算。注意，这一点对于&#39;margin-top&#39;和&#39;margin-bottom&#39;也适用。如果包含块的宽度取决于该元素，那么产生的布局在CSS 2.1是未定义的
--auto
--margin属性允许负值，但可能存在具体实现限制

2.3 'margin-top', 'margin-bottom'

'margin-top', 'margin-bottom'
Value:      <margin-width> | inherit
Initial:    0
Applies to: 除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

Diese Zwei Attribute sind für nicht ersetzte Inline-Elemente ungültig

2.4 'margin-right', 'margin-left'

'margin-right', 'margin-left'
Value:      <margin-width> | inherit
Initial:    0
Applies to:     除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     指定的百分比或者绝对长度

'margin'

'margin'
Value:      <margin-width>{1,4} | inherit
Initial:    见单独的各个属性
Applies to:     除display类型为table系列中除了table-caption，table和inline-table以外的所有元素（译注：也就是说，table系列display值中，margin-只适用于table-caption, table, inline-table，其余的都不适用，但margin-对非table系列都适用）
Inherited:      no
Percentages:    参照包含块的宽度
Media:      visual
Computed value:     见单独的各个属性

3. Ränder zusammenführen

Benachbarte vertikale Ränder werden zusammengeführt, außer:

----Die Ränder des Stammelementfelds werden nicht zusammengeführt
- - --Wenn der obere Rand und der untere Rand eines Elements mit einer Lücke (Abstandsanmerkung: bezieht sich auf die Lücke, die durch die durch das Clear-Attribut verursachte Bewegung der Elementposition verursacht wird) nebeneinander liegen, ist sein Rand derselbe wie die des unmittelbar benachbarten Geschwisterblocks (Elements) werden zusammengeführt, aber nach dem Zusammenführen werden sie nicht mit dem unteren Rand des übergeordneten Blocks zusammengeführt

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall hier gelesen haben Für weitere spannende Informationen beachten Sie bitte die anderen verwandten Themen im Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So erstellen Sie schnell HTML-Header-Code in Sublime

Was sind die Längeneinheiten in CSS

CSS (Cascading Style Sheets)-Sammlung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des HTML-Box-Modells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!