Существует ли какое-либо руководство по теме «Когда использовать display: block когда: inline, а когда: inline-block» и почему?

Question

Знаете ли вы какую-нибудь хорошую статью на тему "Когда использовать display:block, когда :inline, а когда :inline-block" и почему?

и когда нам придется переопределить отображение: ?? через css для любого тега / элемента HTML?

Answer 1

inline - Обрабатывает элемент, как если бы он был встроенным фрагментом текста.width и height не имеют смысла

block - Обрабатывает элемент как прямоугольник.width и height могут быть указаны

inline-block - обтекает элемент в соответствии с текстом, но позволяет указывать width и height.

Элементы по умолчаниюодин из них в любом случае.Например:

<span>, <em>, <strong> -> inline

<div>, <p> -> block

Answer 2

quirksmode.org имеет хорошее объяснение со скриншотами:

http://www.quirksmode.org/css/display.html

Answer 3

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

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

Примечание: в 90% случаев вам не нужно указывать свойство display, просто используйте соответствующие элементы с классами, например <strong> или <em> для встроенных, <div> или <p> для блоков , Основной способ вступления в игру заключается в том, что при сокрытии вещей с помощью Javascript вам просто нужно вернуть элемент к его исходному / естественному атрибуту отображения.

Answer 4

По умолчанию разделение отображается как блок. Это помещает его в собственную строку и расширяет, чтобы заполнить его контейнер. Встроенный элемент в основном делает разделение на диапазон (в его состоянии по умолчанию). Вы больше ничего не можете применить к нему, и он будет отображаться внутри любого текста. Вы можете получить медиану между двумя: inline-block. Это позволяет выполнять больше стилей при делении, в том числе задавать ширину и высоту, но при этом отображать «блок» внутри текста, как изображение.

Таким образом, inline, inline-block и block больше похожи на уровни элемента, каждый из которых имеет определенные стили, которые можно / нельзя применять к элементу.