CSS: различия в Свойствах Дисплея

Каково различие между display:block и display:inline

5
задан Awais 21 October 2019 в 19:42
поделиться

8 ответов

Элементы блока будут обычно складывать вертикально, тогда как встроенные элементы выстроятся в линию горизонтально.

Два Отделения сложат друг на друге, но если Вы установите их на display:inline, то они будут друг рядом с другом горизонтально. Наоборот с Тегами span.

6
ответ дан 18 December 2019 в 06:13
поделиться

дисплей: блок
вызовет объект вызвать другие объекты в контейнере на новой строке.

дисплей: встроенный
попытки отобразить объект на той же строке как другие объекты.

display:block

Item 1 
Item 2 
Item 3

display:inline

Item 1 Item 2 Item 3
11
ответ дан 18 December 2019 в 06:13
поделиться

да,

display:block заставляет элемент вести себя как блок, например: <p>

display:inline делают и расположение элемента встроенный.

они могут быть применены к элементам что значение по умолчанию к противоположному типу дисплея.

Возможные значения

* none - no display at all.
* inline - An inline box.
* block - A block box.
* inline-block - effectively a block box inside an inline box. Not supported by Mozilla at time of writing. IE will only apply inline-block to elements that are traditionally inline such as span or a but not p or div. Loopy.
* run-in - Either an inline or block box depending on the context. If a block box follows the run-in box, the run-in box becomes the first inline box of that block box, otherwise it becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of writing.
* list-item - the equivalent of the default styling of the HTML li element.
* table - a block-level table - the equivalent of the default styling of the HTML table element. Not supported by IE.
* inline-table - an inline-level table. Not supported by IE.
* table-row-group - the equivalent of the default styling of the HTML tbody element. Not supported by IE.
* table-header-group - the equivalent of the default styling of the HTML thead element. Not supported by IE.
* table-footer-group - the equivalent of the default styling of the HTML tfoot element. Not supported by IE.
* table-row - the equivalent of the default styling of the HTML tr element. Not supported by IE.
* table-column-group - the equivalent of the default styling of the HTML colgroup element. Not supported by IE.
* table-column - the equivalent of the default styling of the HTML col element. Not supported by IE.
* table-cell - the equivalent of the default styling of the HTML td or th elements. Not supported by IE.
* table-caption - the equivalent of the default styling of the HTML caption element. Not supported by IE.

*источник

4
ответ дан 18 December 2019 в 06:13
поделиться

дисплей: средние по блокам, что элемент отображен как блок как абзацы и заголовки, всегда были. Блок имеет некоторый пробел выше и ниже его и не терпит элементов HTML рядом с ним, кроме тех случаев, когда заказанный иначе (путем добавления объявления плавающего к другому элементу, например). дисплей: встройте означает, что элемент отображен встроенный в текущем блоке на той же строке. Только то, когда это между двумя блоками, делает форму элемента 'анонимный блок', который однако имеет наименьшую ширину.

3
ответ дан 18 December 2019 в 06:13
поделиться

Существует два основных типа рисования контекста в CSS, который может быть присвоен элементам. Один, display: block, создает positionable поля. Другой, display: inline течет содержание как серия строк в поле.

По умолчанию блок занимает все горизонтальное место, таким образом, серия блоков будет отображена один под другим, сложена вертикально. Как встраивают поток элементов в строки, они представляются горизонтально как одно слово после другого.

В целом Вы используете блок для разметки страницы, в то время как встроенный резервируется для текстового содержания, что Вы находите в блоках текста, например, ссылок.

Существуют также другие типы рисования контекста, например, display: table, однако они более редко используются из-за их специализированного характера и/или отсутствия поддержки браузера.

Больше детали доступно в спецификации CSS 2.1.

1
ответ дан 18 December 2019 в 06:13
поделиться

Блок использует полную доступную ширину с новой строкой прежде и после. Встроенное использование только ширина этому нужно, не вызывая новые строки.

0
ответ дан 18 December 2019 в 06:13
поделиться

Важно отметить, что встроенным элементам нельзя присвоить их собственная ширина, высота или вертикальный пробел (вершина/нижняя часть поля/дополнения).

При попытке заставить элементы блока вести себя как встроенные элементы (где они складывают друг рядом с другом), необходимо использовать float. Плавания сложат рядом с другими плаваниями в том же направлении. Кроме того, любой встроенный элемент, который дан float будет автоматически дан становятся блоком.

1
ответ дан 18 December 2019 в 06:13
поделиться

Документ HTML считают потоком, думайте о стопке элементов HTML, сложенных до вершины.

Блок определяется в потоке как поле (по умолчанию столь же большой как страница) и продвинут как можно больше к вершине, не перекрывая другой блок. Примеры: отделение, p, таблица.

Встроенный элемент не определяет поле (вот почему, Вы не можете установить его ширину и высоту), это будет добавлено к другим встроенным элементам в текущем блоке. Примеры: промежуток, код, a.

0
ответ дан 18 December 2019 в 06:13
поделиться
Другие вопросы по тегам:

Похожие вопросы: