Detaillierte Erläuterung des Anzeigeattributs des CSS-Layouts

In diesem Artikel erhalten Sie eine ausführliche Erläuterung des Anzeigeattributs des CSS-Layouts, sodass jeder die Auswirkungen des Anzeigeattributs auf das CSS-Layout verstehen kann. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Wir müssen wissen, dass die Anzeige das wichtigste Attribut in CSS ist, das zur Steuerung des Layouts verwendet wird. Jedes Element verfügt über einen Standardanzeigewert, der sich auf den Typ des Elements bezieht. Ihre Standardwerte sind für die meisten Elemente normalerweise Block oder Inline. Ein Blockelement wird normalerweise als Blockebenenelement bezeichnet. Ein Inline-Element wird normalerweise als Inline-Element bezeichnet. [Weitere CSS-Video-Lerninhalte finden Sie unter: CSS-Tutorial]

Werfen wir einen Blick auf die Auswirkungen verschiedener Anzeigeattributwerte auf das CSS-Steuerelementlayout.

CSS-Blockattributwert

Das Blockelement wird als Element auf Blockebene angezeigt, mit Zeilenumbrüchen vor und nach dem Element.

Funktionen:

1. Jedes Element auf Blockebene beginnt in einer neuen Zeile, und nachfolgende Elemente beginnen ebenfalls in einer neuen Zeile. (Es ist so dominant, dass ein Element auf Blockebene seine eigene Zeile einnimmt)

2. Die Höhe, Breite, Zeilenhöhe sowie der obere und untere Rand des Elements können festgelegt werden.

3. Wenn die Breite eines Elements nicht festgelegt ist, beträgt sie 100 % des übergeordneten Containers (identisch mit der Breite des übergeordneten Elements), sofern keine Breite festgelegt ist.

Beispiel: div-Element

<div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div>
<div>div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。</div>

Rendering:

CSS-Inline-Attributwert

Inline-Elemente werden als Inline-Elemente angezeigt, ohne Zeilenumbrüche vor und nach dem Element. Ein Inline-Element kann Text innerhalb eines Absatzes umbrechen, ohne das Layout des Absatzes zu beeinträchtigen.

Funktionen:

Alle Elemente befinden sich auf derselben Zeile wie andere Elemente.

2. Die Höhe, Breite sowie der obere und untere Rand des Elements können nicht festgelegt werden ;

3. Die Breite eines Elements ist die Breite des darin enthaltenen Textes oder Bildes und kann nicht geändert werden.

Beispiel: span ist ein Standard-Inline-Element. Das a-Element ist das am häufigsten verwendete Inline-Element und kann als Link verwendet werden.

<div>测试文字，<span style="background-color: palegreen;">被span元素包围，设置span的背景颜色</span>，<a href="#">a链接</a></div>

Rendering:

CSS kein Attributwert

Noch eins Der häufig verwendete Anzeigewert für CSS-Elemente ist „None“. Dies ist der Standardanzeigewert einiger spezieller Elemente, z. B. Skripte. display:none wird von JavaScript häufig verwendet, um ein Element auszublenden oder anzuzeigen, ohne es zu entfernen. (None kann auch zusammen mit block verwendet werden. Verwenden Sie display:none, um Elemente auszublenden, und display:block, um ausgeblendete Elemente anzuzeigen; zum Beispiel: sekundäres Navigationsmenü)

Es unterscheidet sich vom Sichtbarkeitsattribut. Ein Element, dessen Anzeige auf „none“ eingestellt ist, nimmt nicht den Platz ein, den es anzeigen sollte, aber mit „visibility:hidden“ nimmt es immer noch Platz ein.

Andere Anzeigeattributwerte von CSS

Es gibt viele weitere interessante Anzeigewerte wie Inline-Block und Flex. Wir werden diese beiden Attributwerte in den folgenden Artikeln besprechen.

Konvertierung von Anzeigewerten

Wie bereits erwähnt, hat jedes Element einen Standardanzeigewert. Aber Sie können es jederzeit und überall umschreiben! Obwohl das „künstliche Erstellen“ eines Inline-Elements verwirrend erscheinen mag, können Sie ein Element mit einer bestimmten Semantik in ein Inline-Element ändern. Ein häufiges Beispiel ist: Ändern des Standardblockwerts des li-Elements in einen Inline-Wert, um ein horizontales Menü zu erstellen. Und die Konvertierungsmethode ist auch sehr einfach. Verwenden Sie den Satz:

display: inline;

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er zum Lernen aller beiträgt. Wenn Sie mehr über CSS erfahren möchten, empfehlen wir Ihnen das Lernvideo: CSS-Tutorial!

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