Wie realisiert das Anzeigeattribut von CSS die gegenseitige Konvertierung zwischen Elementen auf Blockebene und Inline-Elementen?

Wir wissen, dass es in HTML zwei Arten von Elementen gibt: Elemente auf Blockebene und Inline-Elemente. Das Anzeigeattribut kann die gegenseitige Konvertierung zwischen Elementen auf Blockebene und Inline-Elementen in HTML realisieren. Kommen wir ohne weitere Umschweife direkt zum Text.

Standardmäßig ist der Standardanzeigewert von Absatz

Block, kann aber als Inline-Wert gerendert werden:

p{ display: inline;}

Warum nicht verwenden? ein HTML Was ist mit Inline-Elementen wie ?

Weil Sie das HTML-Element aufgrund seiner Bedeutung auswählen, nicht aufgrund seiner Darstellung. Wenn wir entscheiden, dass ein Absatz für unseren Inhalt am besten geeignet ist, können wir die Tags nicht nur aus Stilgründen ändern. CSS implementiert Stile.

Kurz gesagt ermöglicht die Anzeige, den Typ eines Elements zu ändern, ohne seine Bedeutung zu ändern.

Jede Anzeigeoption hat ein spezifisches Rendering-Verhalten:

Block nimmt die gesamte Breite ein

Inline wird als einfacher Text behandelt

Inline-Block als Wie der Name schon sagt, handelt es sich um eine Kombination aus Block- und Inline-Verhalten. Die Option „Das Beste aus beiden Welten“

list-item ähnelt einem Block, der die gesamte verfügbare Breite einnimmt, aber zusätzliche Aufzählungszeichen anzeigt

Tabelle, Tabellenzeile und Tabellenzelle weisen alle ein sehr spezifisches, wenn auch unerwartetes Verhalten auf, was zu interessanteren Layouts führt

Anzeige: Block

Dadurch wird jedes Element in ein Blockelement umgewandelt.

Diese Technik wird häufig bei Links verwendet, um deren anklickbaren Bereich zu vergrößern, und kann durch Einstellen der Hintergrundfarbe leicht ausgewertet werden.

.menu a{ background: red; color: white;}

rrree

Der Effekt ist wie folgt:

Wenn wir diese Links in Blöcke umwandeln, vergrößern wir ihren Zielbereich:

<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>
  </li></ul>

Der Effekt ist wie folgt:

display:inline

Dadurch wird jedes Element in ein Inline-Element konvertiert, als ob es einfach wäre Klartext.

Es wird häufig verwendet, um eine horizontale Navigation zu erstellen, bei der Listenelemente semantisch, aber optisch nicht nützlich sind.

.menu a{ background: red; color: white; display: block;}

Die Wirkung ist wie folgt:

<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>

Die Wirkung ist wie folgt:

Anzeige: Listenelement

Das einzige angezeigte HTML-Element list-item ist (wenig überraschend) das Listenelement

und die Definitionsbeschreibung

Rendern Sie Listenelemente mit Aufzählungspunkten (wenn in einer ungeordneten Liste

) oder mit inkrementellen Zahlen (wenn in einer geordneten Liste

).

Da die Darstellung dieser Aufzählungszeichen und Zahlen von Browser zu Browser unterschiedlich ist und es schwierig ist, sie in CSS zu formatieren, wird die Regel display:list-item nie verwendet. Tatsächlich wird

1. normalerweise als display:block oder display:inline gerendert, da sie flexibler sind.

   display: none

   Durch Anwenden des display: none; HTML-Elements wird es von Ihrer Webseite entfernt, als ob es nie in Ihrem Code vorhanden wäre.

   .menu li{ display: inline;}

   rrree

   Der Effekt ist wie folgt:
   

   

   Es gibt 3 Absätze im Code, aber nur 2 erscheinen, als ob der 2. Absatz nie vorhanden wäre existierte.

   Sichtbarkeit: ausgeblendet

   Sichtbarkeit und Anzeige der CSS-Eigenschaften. Etwas ähnlich. Die App verbirgt das Element auf der Seite mit sichtbarkeit: versteckt; macht es jedoch nur unsichtbar: Es nimmt immer noch den Platz ein, den es sollte.

   <p>php中文网</p>
   <p class="class">PHP中文网</p>
   <p>Php中文网</p>

   .class{ display: none;}

   Der Effekt ist wie folgt:

   

   Es gibt 5 Absätze im Code, nur 2 erscheinen, aber der Platz, den der versteckte Absatz einnehmen sollte, bleibt bestehen existiert, aber man sieht weniger als sie.

Das obige ist der detaillierte Inhalt vonWie realisiert das Anzeigeattribut von CSS die gegenseitige Konvertierung zwischen Elementen auf Blockebene und Inline-Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!