CSS
Управление макетами

Синтаксис

• display: none | inline | блок | список | inline-list-item | встроенный блок | встроенный стол | стол | настольная ячейка | стол-стол | table-column-group | table-footer-group | table-header-group | стол-строка | table-row-group | flex | inline-flex | сетка | встроенная сетка | запуск | рубин | рубиновая основа | рубиновый текст | рубиновый-базовый контейнер | ruby-text-container | содержание;

параметры

Свойство отображения

Свойство CSS display является основополагающим для управления макетом и потоком HTML-документа. Большинство элементов имеют display умолчанию значение как block и inline (хотя некоторые элементы имеют другие значения по умолчанию).

В соответствии

inline элемент занимает ровно столько ширины по мере необходимости. Он складывается горизонтально с другими элементами одного и того же типа и может не содержать других не-встроенных элементов.

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

Как показано выше, два inline элемента, <span> и <b> , являются строчными (отсюда и название) и не прерывают поток текста.

блок

Элемент block занимает максимальную доступную ширину своего «родительского элемента». Он начинается с новой строки и, в отличие от inline элементов, не ограничивает тип элементов, которые он может содержать.

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

Элемент div по умолчанию является блочным уровнем, и, как показано выше, два элемента block вертикально сложены и, в отличие от inline элементов, поток текста прерывается.

Встроенный блок

Значение inline-block дает нам лучшее из обоих миров: оно смешивает элемент с потоком текста, позволяя нам использовать padding , margin , height и аналогичные свойства, которые не оказывают заметного влияния на inline элементы.

Элементы с этим отображаемым значением действуют так, как если бы они были обычным текстом и в результате влияли правила, управляющие потоком текста, такие как text-align . По умолчанию они также сокращаются до наименьшего размера, чтобы разместить их содержимое.

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

никто

Элемент, которому присвоено значение none для его свойства отображения, вообще не будет отображаться.

Например, давайте создадим div-элемент с идентификатором myDiv :

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

Теперь это можно пометить как не отображаемое с помощью следующего правила CSS:

#myDiv {
    display: none;
}

Когда элемент установлен для display:none; браузер игнорирует каждое другое свойство макета для этого конкретного элемента (как для position и для float ). Для этого элемента не будет показано поле, и его существование в html не влияет на положение следующих элементов.

Обратите внимание, что это отличается от установки свойства visibility на hidden . Настройка visibility: hidden; для элемента не будет отображаться элемент на странице, но элемент все равно займет пространство в процессе рендеринга, как если бы он был виден. Это повлияет на то, как на странице отображаются следующие элементы.

Значение none для свойства отображения обычно используется вместе с JavaScript, чтобы отображать или скрывать элементы по своему усмотрению, устраняя необходимость фактического удаления и повторного создания.

Чтобы получить старую структуру таблицы, используя div

Это стандартная структура таблицы HTML

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

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

Вы можете сделать такую ​​же реализацию, как это

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