- Attribute, die nur für Elemente auf Blockebene gelten
Breite, Höhe (diese beiden können zum Ersetzen von Elementen verwendet werden)
Text – ausrichten, Text – Einzug, vertikal – ausrichten (kann auch für Tabellenzellen und Ersatzelemente wie input/img verwendet werden)
background-position (beachten Sie den Unterschied zwischen Prozentsatz und Absolutwert, und dieses Attribut wirkt sich auf den Kacheleffekt aus)
[Grundlegende visuelle Formatierung]
1. Box-Modell :
– Der Hintergrund umfasst normalerweise das Inhaltsfeld, den inneren Rand und den Rand transparent, zeigt den Hintergrund des Elements
2. Horizontale Attribute :
- linker (rechter) Rand, linker (rechter) Abstand ) Rand und Inhalt des untergeordneten Elements Die Summe der Werte der Boxbreite muss gleich der Inhaltsboxbreite des übergeordneten Elements sein
-wenn zwei der Werte margin-left, margin-right, width vorhanden sind (Nur diese drei Werte können auf „Auto“ gesetzt werden.) Wenn ein bestimmter Wert festgelegt ist, ist der verbleibende Wert „Auto“, dann wird der auf „Auto“ gesetzte Attributwert automatisch berechnet, um die Breite des übergeordneten Elements auszufüllen:
＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto； ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0； ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！
– Der Abstand des übergeordneten Elements überschneidet sich mit dem Rand des untergeordneten Elements.
– Die Standardbreite eines nicht ersetzten Elements wird durch seinen Inhalt bestimmt Ist das ersetzte Element auf „Auto“ eingestellt (z. B. „img“), entspricht sein Wert der ursprünglichen Breite. Wenn nur die Breite festgelegt ist, ändert sich die Höhe proportional.
3. Vertikales Attribut :
ähnelt dem horizontalen Attribut, der Unterschied/Hinweis ist:
- Wenn Rand oben oder Rand unten Wenn es auf „Auto“ eingestellt ist, wird es standardmäßig auf 0 gesetzt, sodass es nicht vertikal zentriert werden kann, es sei denn, die Einstellung wird mit einem bestimmten Wert angezeigt.
– Wenn Sie einen Prozentsatz zum Festlegen der Höhe eines untergeordneten Elements verwenden, wenn der Höhenwert von Wenn das übergeordnete Element nicht explizit festgelegt wird, beträgt die Höhe des untergeordneten Elements standardmäßig „Auto“. Wenn das übergeordnete Element nur untergeordnete Elemente auf Blockebene enthält, wird die Höhe des übergeordneten Elements nicht berücksichtigt Rand des untergeordneten Elements, es sei denn, das übergeordnete Element verfügt über einen Rand oder eine Polsterung! ! Warum, weil sich die Ränder in vertikaler Richtung überlappen? Unter diesem Gesichtspunkt müssen Sie zur Vermeidung von Überlappungen Rahmen und Abstand verwenden, um benachbarte Ränder zu trennen.
Inline-Elemente : - Zeilenhöhe (Zeilenfeldhöhe) für ein ersetztes Element, die Höhe seines Inhalts. Daher hat das ersetzte Element keinen Zeilenabstand (Zeilenhöhe – Schriftgröße); bei nicht ersetzten Elementen ist es die Höhe seines Inhaltsfelds plus dem Zeilenabstand
; Der Zeilenabstand kann geändert werden. Nur Zeilenhöhe, Schriftgröße und vertikale Ausrichtung.
Nicht-Ersatzelemente:
– Wenn der Wert für die Zeilenhöhe kleiner als die Schriftgröße ist, kann es zu Textüberlappungen kommen, um dieses Phänomen zu vermeiden. height auf 1 em (Schriftgröße muss festgelegt werden) oder 1 (Skalierungsfaktor basierend auf der Schriftgröße). Außerdem wird der berechnete Wert des übergeordneten Elements und nicht der Literalwert geerbt, sofern nicht explizit definiert >– der Inhalt des Inline-Elements Ränder, Ränder und Rahmen haben keinen Einfluss auf die Zeilenhöhe. Die äußeren Ränder gelten nur links und rechts, nicht oben und unten. Wenn jedoch ein positiver Abstand und ein Hintergrund vorhanden sind, werden möglicherweise benachbarte Zeilen abgedeckt (die Zeilenhöhe und das Layout, dh die Zeile, werden dadurch jedoch nicht beeinträchtigt). Höhe ändert sich nicht, wenn der Abstand eingestellt ist) Höhe); Höhe sowie der obere und untere Rand sind gültig.
– Das Festlegen eines Höhenwerts für „img“ wirkt sich auf die Zeilenhöhe aus, aber der effektive Wert von „line-height“ ändert sich nicht. Einige Attribute wie „vertikal-align“ verwenden weiterhin den effektiven Wert von „line-height“ für die Berechnung - Wenn ein Ersatzelement, das der einzige Nachkomme eines Blockebenenelements oder einer Tabellenzelle ist, auf der Grundlinie platziert wird, wie z. B. img in p. Lösung: Verwenden Sie einen negativen Rand, um ihn nach unten zu ziehen, oder stellen Sie die Anzeige auf „Blockieren“ ein, um die Erzeugung von Linienkästen zu vermeiden.4. Andere
- Anzeigeattribut:Marge
– Bei Verwendung eines Prozentsatzes ist der berechnete Wert relativ zum Breitenwert (nicht zur Höhe) des übergeordneten Elements. Auch wenn es marginal ist!
* 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余； * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。 * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。
Rahmen
– Der Standardwert wird verwendet, wenn der Wert nicht angegeben ist, z. B.:Die zweite Rahmeneinstellung hier überschreibt die erste Erstens: Da im zweiten Artikel kein Rahmenstil festgelegt ist, ist der Standardwert „Keine“, sodass kein Rahmen vorhanden ist 🎜>
Floating:
Die Ränder von Floating-Elementen werden nicht zusammengeführt
{ border: solid 1px dotted;
border: 1px;
}Das Floating-Element generiert eine Blockebene Box, unabhängig vom Element selbst;
Die Oberseite eines schwebenden Elements kann nicht höher sein als die Oberseite seines übergeordneten Elements oder aller vorherigen schwebenden Elemente;
(2) Wenn es sich um ein Inline-Element handelt, werden dessen Inhalt, Rahmen und Hintergrund über dem schwebenden Element liegen und nicht überschrieben.
Dies hat nichts mit der Reihenfolge zu tun, in der Elemente im Dokumentenfluss erscheinen.使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。
定位：
绝对定位
*如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
*通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
*除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
*水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
*假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；
固定定位
*right的值总是等于－left，bottom的值总是等于－top。
持续更新中。。。。。
本文参考 《css权威指南》
- Attribute, die nur für Elemente auf Blockebene gelten
Breite, Höhe (diese beiden können zum Ersetzen von Elementen verwendet werden)
Text – ausrichten, Text – Einzug, vertikal – ausrichten (kann auch für Tabellenzellen und Ersatzelemente wie input/img verwendet werden)
background-position (beachten Sie den Unterschied zwischen Prozentsatz und Absolutwert, und dieses Attribut wirkt sich auf den Kacheleffekt aus)
[Grundlegende visuelle Formatierung]
1. Box-Modell :
– Der Hintergrund umfasst normalerweise das Inhaltsfeld, den inneren Rand und den Rand transparent, zeigt den Hintergrund des Elements
2. Horizontale Attribute :
- linker (rechter) Rand, linker (rechter) Abstand ) Rand und Inhalt des untergeordneten Elements Die Summe der Werte der Boxbreite muss gleich der Inhaltsboxbreite des übergeordneten Elements sein
-wenn zwei der Werte margin-left, margin-right, width vorhanden sind (Nur diese drei Werte können auf „Auto“ gesetzt werden.) Wenn ein bestimmter Wert festgelegt ist, ist der verbleibende Wert „Auto“, dann wird der auf „Auto“ gesetzte Attributwert automatisch berechnet, um die Breite des übergeordneten Elements auszufüllen:
＊ 如果三个值都为非auto的特定值（over constrained），那么margin-right会被强制设置为auto； ＊ 如果margin中某一个设置为auto，另一个设置特定值，width设置为auto，则设置为auto的margin会被置为0； ＊ 如果width设置为特定值，两个margin设置为auto，则会**水平居中**！！
– Der Abstand des übergeordneten Elements überschneidet sich mit dem Rand des untergeordneten Elements.
– Die Standardbreite eines nicht ersetzten Elements wird durch seinen Inhalt bestimmt Ist das ersetzte Element auf „Auto“ eingestellt (z. B. „img“), entspricht sein Wert der ursprünglichen Breite. Wenn nur die Breite festgelegt ist, ändert sich die Höhe proportional.
3. Vertikales Attribut :
ähnelt dem horizontalen Attribut, der Unterschied/Hinweis ist:
- Wenn Rand oben oder Rand unten Wenn es auf „Auto“ eingestellt ist, wird es standardmäßig auf 0 gesetzt, sodass es nicht vertikal zentriert werden kann, es sei denn, die Einstellung wird mit einem bestimmten Wert angezeigt.
– Wenn Sie einen Prozentsatz zum Festlegen der Höhe eines untergeordneten Elements verwenden, wenn der Höhenwert von Wenn das übergeordnete Element nicht explizit festgelegt wird, beträgt die Höhe des untergeordneten Elements standardmäßig „Auto“. Wenn das übergeordnete Element nur untergeordnete Elemente auf Blockebene enthält, wird die Höhe des übergeordneten Elements nicht berücksichtigt Rand des untergeordneten Elements, es sei denn, das übergeordnete Element verfügt über einen Rand oder eine Polsterung! ! Warum, weil sich die Ränder in vertikaler Richtung überlappen? Unter diesem Gesichtspunkt müssen Sie zur Vermeidung von Überlappungen Rahmen und Abstand verwenden, um benachbarte Ränder zu trennen.
Inline-Elemente : - Zeilenhöhe (Zeilenfeldhöhe) für ein ersetztes Element, die Höhe seines Inhalts. Daher hat das ersetzte Element keinen Zeilenabstand (Zeilenhöhe – Schriftgröße); bei nicht ersetzten Elementen ist es die Höhe seines Inhaltsfelds plus dem Zeilenabstand
; Der Zeilenabstand kann geändert werden. Nur Zeilenhöhe, Schriftgröße und vertikale Ausrichtung.
Nicht-Ersatzelemente:
– Wenn der Wert für die Zeilenhöhe kleiner als die Schriftgröße ist, kann es zu Textüberlappungen kommen, um dieses Phänomen zu vermeiden. height auf 1 em (Schriftgröße muss festgelegt werden) oder 1 (Skalierungsfaktor basierend auf der Schriftgröße). Außerdem wird der berechnete Wert des übergeordneten Elements und nicht der Literalwert geerbt, sofern nicht explizit definiert >– der Inhalt des Inline-Elements Ränder, Ränder und Rahmen haben keinen Einfluss auf die Zeilenhöhe. Die äußeren Ränder gelten nur links und rechts, nicht oben und unten. Wenn jedoch ein positiver Abstand und ein Hintergrund vorhanden sind, werden möglicherweise benachbarte Zeilen abgedeckt (die Zeilenhöhe und das Layout, dh die Zeile, werden dadurch jedoch nicht beeinträchtigt). Höhe ändert sich nicht, wenn der Abstand eingestellt ist) Höhe); Höhe sowie der obere und untere Rand sind gültig.
– Das Festlegen eines Höhenwerts für „img“ wirkt sich auf die Zeilenhöhe aus, aber der effektive Wert von „line-height“ ändert sich nicht. Einige Attribute wie „vertikal-align“ verwenden weiterhin den effektiven Wert von „line-height“ für die Berechnung - Wenn ein Ersatzelement, das der einzige Nachkomme eines Blockebenenelements oder einer Tabellenzelle ist, auf der Grundlinie platziert wird, wie z. B. img in p. Lösung: Verwenden Sie einen negativen Rand, um ihn nach unten zu ziehen, oder stellen Sie die Anzeige auf „Blockieren“ ein, um die Erzeugung von Linienkästen zu vermeiden.4. Andere
- Anzeigeattribut:Marge
– Bei Verwendung eines Prozentsatzes ist der berechnete Wert relativ zum Breitenwert (nicht zur Höhe) des übergeordneten Elements. Auch wenn es marginal ist!
* 设置元素display属性为inline-block时， 其表现类似行内替换元素；如果没有显式定义width，则它会自动收缩以适应内容宽度，也就是说会使其宽度刚好能包含所有内容且没有多余； * 设置元素display属性为run-in，表示如果该元素后面是一个display为block的元素，则该元素表现为行内元素放在后面那个元素的开头，否则其本身将显示为块级元素。 * 对于浮动或绝对定位元素，计算值与声明值可能不同。除inline-table之外大部分声明值（包括inline，inline-block，run-in）都会被计算为block。
Rahmen
– Der Standardwert wird verwendet, wenn der Wert nicht angegeben ist, z. B.:Die zweite Rahmeneinstellung hier überschreibt die erste Erstens: Da im zweiten Artikel kein Rahmenstil festgelegt ist, ist der Standardwert „Keine“, sodass kein Rahmen vorhanden ist 🎜>
Floating:
Die Ränder von Floating-Elementen werden nicht zusammengeführt
{ border: solid 1px dotted;
border: 1px;
}Das Floating-Element generiert eine Blockebene Box, unabhängig vom Element selbst;
Die Oberseite eines schwebenden Elements kann nicht höher sein als die Oberseite seines übergeordneten Elements oder aller vorherigen schwebenden Elemente;
(2) Wenn es sich um ein Inline-Element handelt, werden dessen Inhalt, Rahmen und Hintergrund über dem schwebenden Element liegen und nicht überschrieben.
Dies hat nichts mit der Reihenfolge zu tun, in der Elemente im Dokumentenfluss erscheinen.使用clear属性清除浮动时，例如clear: left，实际上是为设置clear属性的元素增加margin-top。因此，有可能即使该元素设置了margin-top，也会与浮动元素紧紧相连，除非margin-top的值足够大。要使两者之间有间隔，可以设置浮动元素的margin-bottom。
定位：
绝对定位
*如果父元素是块级元素且position的值为非static，则子元素absolute定位是其外边距外界相对于父元素的边框界定区域定位；
*通过指定top, bottom, left, right的值，可以隐式指定元素的宽高；
*除bottom外被设置成auto的属性，会默认与元素静态位置的对应值一致；
*水平／垂直方向上，当元素过度受限时（left和right的值以及元素水平方向的各尺寸之和不等于父元素width），会忽略right／bottom的值。如果有设置为auto的属性，则改变其值来满足前等式，如果两个则平分，所以可以用来做居中（margin设为auto，其他值均为0）！
*假设一个元素有设置z-index值，那么其所有子元素都是相对于这个叠放上下文来放置，并且css2.1中规定所有元素绝对不能放在其叠放上下文的背景之下，但可以在其内容之下；
固定定位
*right的值总是等于－left，bottom的值总是等于－top。
更多css属性总结 相关文章请关注PHP中文网！
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
