Detaillierte Erläuterung der Verwendung von display in CSS

CSS ist ein wesentlicher Bestandteil des Webdesigns und das Anzeigeattribut ist eines der wichtigeren Attribute. Die Hauptfunktion des Anzeigeattributs besteht darin, den Anzeigemodus von Elementen auf der Webseite zu steuern, einschließlich Block, Inline, Inline-Block, Flex, Raster und anderen Methoden. In diesem Artikel stellen wir die Verwendung des Anzeigeattributs vor.

1. block

block ist der Standardwert des Anzeigeattributs. Wenn ein Element auf „Blockieren“ eingestellt ist, wird es als Element auf Blockebene auf der Seite angezeigt, wobei es eine ganze Zeile einnimmt und automatisch umgebrochen wird. Zu den gängigen Elementen auf Blockebene gehören p, h1~h6, div usw. Elemente auf Blockebene können Attribute wie Breite, Höhe, Ränder und Abstand festlegen oder das Element über display:none ausblenden.

Beispielcode:

<div>我是一个块级元素</div>

2. inline

inline ist ein weiteres häufiges Anzeigeattribut. Wenn ein Element auf „Inline“ eingestellt ist, wird es auf der Seite als Inline-Element angezeigt, es wird nicht umbrochen und passt in eine einzelne Zeile. Zu den gängigen Inline-Elementen gehören a, span, img usw. Die Breite und Höhe eines Inline-Elements hängt vom Inhalt des Elements ab. Ränder und Innenabstand können nicht festgelegt werden, und das Element kann nicht über display:none ausgeblendet werden.

Beispielcode:

<a href="#">我是一个内联元素</a>

3. inline-block

inline-block ist eine Kombination aus Block und Inline. Wenn ein Element auf Inline-Block gesetzt ist, wird es als Inline-Block-Level-Element auf der Seite angezeigt. Es nimmt keine ganze Zeile ein, kann aber Breite, Höhe, Ränder und Abstand haben und die Anzeige kann eingestellt werden . :keine.

Beispielcode:

<span style="display:inline-block;width:50px;height:50px;background-color:red;"></span>

4. flex

flex ist ein neu hinzugefügtes Attribut in CSS3, es kann das machen Anordnung der Elemente flexibler. Wenn ein Element auf Flex eingestellt ist, wird es zu einem Container, und die darin enthaltenen Unterelemente können Breite, Höhe und Layout flexibel anpassen, indem sie das Flex-Attribut festlegen. Sie müssen display:flex festlegen, um das Flex-Attribut zu aktivieren. Sie können Flex-Direction, Justify-Content, Align-Items, Align-Content und andere Attribute festlegen, um das Layout untergeordneter Elemente zu steuern.

Beispielcode:

<div style="display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:center;">
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:red;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:green;"></span>
  <span style="flex-basis:50px;flex-grow:1;flex-shrink:1;background-color:blue;"></span>
</div>

5. grid

grid ist ein weiteres neu hinzugefügtes Attribut in CSS3, das verwendet werden kann um Rasterlayouts zu erstellen. Ähnlich wie bei Flex müssen Sie display:grid festlegen, um das Rasterattribut zu aktivieren. Sie können das Layout des Rasters über Attribute wie „grid-template-rows“, „grid-template-columns“ und „grid-template-areas“ steuern.

Beispielcode:

<div style="display:grid;grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 50px 100px;">
  <div style="grid-row: 1/3;grid-column: 1/3;">1</div>
  <div style="grid-row: 1/2;grid-column: 3/4;">2</div>
  <div style="grid-row: 2/3;grid-column: 3/4;">3</div>
</div>

Das Obige ist die Verwendung des Anzeigeattributs entsprechend Ihren Anforderungen, um das Layout von Elementen zu steuern und den Effekt zu erzielen Webdesign.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von display in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!