CSS
Kontrola układu

Składnia

• wyświetl: brak | inline | blok | element listy | element listy inline | blok wbudowany | wbudowany stół | stół | komórka stołowa | tabela-kolumna | tabela-kolumna-grupa | grupa-stopka | tabela-nagłówek-grupa | wiersz tabeli | table-row-group | flex | inline-flex | siatka | inline-grid | docieranie | rubin | baza rubinowa | ruby-tekst | pojemnik na ruby | pojemnik na tekst ruby | zawartość;

Parametry

Właściwość display

Właściwość display CSS ma podstawowe znaczenie dla kontrolowania układu i przepływu dokumentu HTML. Większość elementów ma domyślną wartość display albo w block albo w inline (chociaż niektóre elementy mają inne wartości domyślne).

Inline

Element inline zajmuje tylko tyle szerokości, ile jest konieczne. Układa się poziomo z innymi elementami tego samego typu i nie może zawierać innych elementów nieliniowych.

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

Jak pokazano powyżej, dwa elementy inline , <span> i <b> , są umieszczone w jednej linii (stąd nazwa) i nie przerywają przepływu tekstu.

Blok

Element block zajmuje maksymalną dostępną szerokość swojego elementu nadrzędnego. Zaczyna się od nowej linii i, w przeciwieństwie do elementów inline , nie ogranicza rodzaju elementów, które może zawierać.

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

Element div jest domyślnie na poziomie bloku i jak pokazano powyżej, dwa elementy block są ułożone pionowo i, w przeciwieństwie do elementów inline , przepływ tekstu jest przerywany.

Blok wbudowany

Wartość inline-block daje nam to, co najlepsze z obu światów: łączy element z przepływem tekstu, jednocześnie umożliwiając stosowanie padding , margin , height i podobnych właściwości, które nie mają widocznego wpływu na elementy inline .

Elementy o tej wartości wyświetlanej działają tak, jakby były zwykłym tekstem, w wyniku czego mają na nie wpływ reguły kontrolujące przepływ tekstu, takie jak text-align . Domyślnie są one również zmniejszane do najmniejszego możliwego rozmiaru, aby pomieścić ich zawartość.

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

Żaden

Element, który ma wartość none dla swojej właściwości display, nie będzie w ogóle wyświetlany.

Na przykład stwórzmy element div, który ma identyfikator myDiv :

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

Można to teraz oznaczyć jako nie wyświetlane przez następującą regułę CSS:

#myDiv {
    display: none;
}

Gdy element ma być display:none; przeglądarka ignoruje każdą inną właściwość układu dla tego konkretnego elementu (zarówno position jak i liczba float ). Żadne pole nie będzie renderowane dla tego elementu, a jego istnienie w HTML nie wpływa na pozycję następujących elementów.

Zauważ, że różni się to od ustawienia właściwości visibility na hidden . Ustawienie visibility: hidden; ponieważ element nie wyświetlałby elementu na stronie, ale element nadal zajmowałby miejsce w procesie renderowania, tak jakby był widoczny. Wpłynie to zatem na sposób wyświetlania następujących elementów na stronie.

none wartości właściwości display jest powszechnie używany wraz z JavaScriptem do pokazywania lub ukrywania elementów do woli, eliminując potrzebę faktycznego ich usuwania i ponownego tworzenia.

Aby uzyskać starą strukturę tabeli za pomocą div

To jest normalna struktura tabeli HTML

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

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

Możesz wykonać taką samą implementację jak ta

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