CSS
Layoutsteuerung

Syntax

• Anzeige: keine | inline | Block | Listenelement | Inline-Listenelement | Inline-Block | Inline-Tabelle | Tabelle | Tabellenzelle | Tabellenspalte | Tabellenspaltengruppe | Fußzeile-Gruppe | Tabellenkopfgruppe | Tischreihe | Tabellenzeilengruppe | flex | Inline-Flex | Gitter | Inline-Gitter | Einlauf | Rubin | Rubinbasis | Ruby-Text | Rubin-Behälter | Ruby-Text-Container | Inhalt;

Parameter

Die Anzeigeeigenschaft

Die Eigenschaft display CSS ist für die Steuerung des Layouts und des Flusses eines HTML-Dokuments von grundlegender Bedeutung. Die meisten Elemente haben eine display von entweder block oder inline (obwohl einige andere Elemente Standardwerte haben).

In der Reihe

Ein inline Element nimmt nur so viel Breite wie nötig ein. Es kann horizontal mit anderen Elementen desselben Typs gestapelt werden und darf keine anderen Nicht-Inline-Elemente enthalten.

<span>This is some <b>bolded</b> text!</span>

Wie oben gezeigt, sind die beiden inline Elemente <span> und <b> inline (daher der Name) und unterbrechen den Textfluss nicht.

Block

Ein block nimmt die maximal verfügbare Breite seines übergeordneten Elements ein. Es beginnt mit einer neuen Zeile und beschränkt im Gegensatz zu inline Elementen nicht die Art der darin enthaltenen Elemente.

<div>Hello world!</div><div>This is an example!</div>

Das div Element ist standardmäßig auf Blockebene, und wie oben gezeigt, sind die beiden block vertikal gestapelt, und im Gegensatz zu den inline Elementen inline der Textfluss.

Inline-Block

Der inline-block Wert gibt uns das Beste aus beiden Welten: Er fügt das Element in den Textfluss ein und erlaubt die Verwendung von padding , margin , height und ähnlichen Eigenschaften, die auf inline Elemente keinen sichtbaren Effekt haben.

Elemente mit diesem Anzeigewert wirken so, als ob sie normaler Text wären, und werden daher von Regeln beeinflusst, die den Textfluss steuern, wie z. B. text-align . Standardmäßig werden sie auch auf die kleinstmögliche Größe geschrumpft, um ihren Inhalt unterzubringen.

<!--Inline: unordered list-->
<style>
li {
    display : inline;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--block: unordered list-->
<style>
li {
    display : block;
    background : lightblue;
    padding:10px;

    border-width:2px;
    border-color:black;
    border-style:solid;
    }
</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

<!--Inline-block: unordered list-->
<style>
li {
    display : inline-block;
    background : lightblue;
    padding:10px; 

    border-width:2px;
    border-color:black;
    border-style:solid;
    }

</style>    

<ul>
<li>First Element </li>
<li>Second Element </li>
<li>Third Element </li>
</ul>

keiner

Ein Element, das seiner Anzeigeeigenschaft den Wert none zugewiesen hat, wird überhaupt nicht angezeigt.

Erstellen wir zum Beispiel ein div-Element mit der ID myDiv :

<div id="myDiv"></div>

Dies kann jetzt als nicht angezeigt markiert werden durch die folgende CSS-Regel:

#myDiv {
    display: none;
}

Wenn ein Element als display:none; Der Browser ignoriert alle anderen Layout-Eigenschaften für dieses bestimmte Element (sowohl position als auch float ). Es wird keine Box für dieses Element gerendert und seine Existenz in html hat keinen Einfluss auf die Position der folgenden Elemente.

Beachten Sie, dass sich dies von der Einstellung der visibility auf hidden . visibility: hidden; einstellen visibility: hidden; Ein Element würde das Element nicht auf der Seite anzeigen, das Element würde jedoch beim Rendern den Platz beanspruchen, als wäre es sichtbar. Dies beeinflusst daher, wie die folgenden Elemente auf der Seite angezeigt werden.

Der Wert " none für die Anzeigeeigenschaft wird im Allgemeinen zusammen mit JavaScript verwendet, um Elemente nach Belieben anzuzeigen oder auszublenden. Dadurch müssen sie nicht wirklich gelöscht und neu erstellt werden.

Um eine alte Tabellenstruktur mit div zu erhalten

Dies ist die normale HTML-Tabellenstruktur

<style>
    table {
        width: 100%;
    }
</style>

<table>
  <tr>
    <td>
        I'm a table
    </td>
  </tr>
</table>

Sie können dieselbe Implementierung wie folgt durchführen

<style>
    .table-div {
        display: table;
    }
    .table-row-div {
        display: table-row;
    }
    .table-cell-div {
        display: table-cell;
    }
</style>

<div class="table-div>
  <div class="table-row-div>
    <div class="table-cell-div>
      I behave like a table now
    </div>
  </div>
</div>