Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verwenden Sie die Anzeige in CSS

下次还敢
Freigeben: 2024-04-26 14:18:19
Original
341 Leute haben es durchsucht

Das Display-Attribut steuert, wie Elemente auf der Webseite angezeigt werden, und hat die folgenden möglichen Werte: inline (horizontale Anordnung, kein Zeilenumbruch), Block (belegt die gesamte Zeile, Zeilenumbruch), inline-block (horizontale Anordnung oder Zeilenumbruch), keine Anzeige (kein Zeilenumbruch), Flex (Flexbox-Layout) und Grid (Rasterlayout).

So verwenden Sie die Anzeige in CSS

Anzeigeverwendung in CSS

Was ist das Anzeigeattribut?

Das Anzeigeattribut steuert, wie Elemente auf Webseiten angezeigt werden. Sie bestimmt, ob Elemente angezeigt werden, wie sie angeordnet sind und wie viel Platz sie einnehmen.

Mögliche Werte für das Anzeigeattribut

Das Anzeigeattribut hat die folgenden möglichen Werte:

  • inline: Elemente werden horizontal ohne Umbruch angeordnet.
  • block: Das Element nimmt die gesamte Zeile ein und wird umbrochen.
  • inline-block: Elemente können horizontal angeordnet oder umwickelt werden.
  • none: Das Element wird nicht angezeigt.
  • flex: Ordnen Sie Elemente gemäß den Flexbox-Layoutregeln an.
  • Raster: Ordnen Sie Elemente gemäß den Regeln des Rasterlayouts an.

Verwendung des Anzeigeattributs

Mit dem Anzeigeattribut können Sie steuern, wie ein Element angezeigt wird. Zum Beispiel:

<code class="css">#myElement {
  display: none;
}</code>
Nach dem Login kopieren

Dadurch wird das Element mit der ID „myElement“ ausgeblendet.

<code class="css">#myElement {
  display: flex;
}</code>
Nach dem Login kopieren

Dadurch wird das Element mit der ID „myElement“ mithilfe des Flexbox-Layouts angeordnet.

Wählen Sie den richtigen Anzeigewert

Die Auswahl des richtigen Anzeigewerts hängt davon ab, wie Sie das Element anzeigen möchten. Hier sind empfohlene Werte in gängigen Szenarien:

  • Text oder Link: inline
  • Titel oder Absatz: block
  • Schaltfläche oder Bild: inline-block
  • Auszublendendes Element: none
  • Flexibles Layout: flex
  • Rasterlayout: grid

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Anzeige in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage