Suche…


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

Wert Bewirken
none Blenden Sie das Element aus und verhindern Sie, dass es Platz einnimmt.
block Element blockieren, 100% der verfügbaren Breite einnehmen, Element nach dem Element abbrechen.
inline Inline-Element, keine Breite einnehmen, kein Element nach dem Element.
inline-block Bei der Verwendung von speziellen Eigenschaften von Inline- und Blockelementen ist keine Unterbrechung möglich, sie kann jedoch Breite haben.
inline-flex Zeigt ein Element als Flexcontainer auf Inline-Ebene an.
inline-table Das Element wird als Inline-Tabelle angezeigt.
grid Verhält sich wie ein Blockelement und ordnet seinen Inhalt dem Gittermodell entsprechend an.
flex Verhält sich wie ein Blockelement und ordnet seinen Inhalt gemäß dem Flexbox-Modell.
inherit Erben Sie den Wert vom übergeordneten Element.
initial Setzen Sie den Wert auf den Standardwert zurück, der aus den in den HTML-Spezifikationen oder aus dem Browser- / Benutzerstandard-Stylesheet beschriebenen Verhalten stammt.
table Verhält sich wie das HTML- table .
table-cell Das Element sollte sich wie ein <td> -Element verhalten
table-column Das Element sollte sich wie ein <col> -Element verhalten
table-row Das Element sollte sich wie ein <tr> -Element verhalten
list-item Lassen Sie das Element sich wie ein <li> -Element verhalten.

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>

Anzeige: Inline

<!--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>

Bildschirmsperre

<!--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>

Anzeige: Inline-Block

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>


Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow