Есть ли любое руководство по, “Когда использовать display:block когда: встроенный и когда: встроенный блок” и почему?
Вы знаете какую-либо хорошую статью о, "Когда использовать display:block когда :inline и когда :inline-block"и почему?
и когда мы должны будем переопределить дисплей:?? через CSS для какого-либо HTML-тэга / элемент?
4 ответа
По умолчанию раздел отображается в виде блока. Это помещает его в отдельную строку и расширяется, чтобы заполнить свой контейнер. Встроенный элемент в основном делает разделение на диапазон (в состоянии по умолчанию). Вы больше ничего не можете применить к нему, и он отображается вместе с любым текстом. Вы можете получить медианное значение между двумя: встроенный блок. Это позволяет сделать больше стиля для разделения, включая установку ширины и высоты, но по-прежнему отображает «блок» внутри текста, как изображение.
Таким образом, inline, inline-block и block больше похожи на уровни элемента, каждый из которых имеет определенные стили, которые могут / не могут быть применены к элементу.
inline - Рассматривает элемент как встроенный фрагмент текста. width и height не имеют смысла
block - Рассматривает элемент как прямоугольник. width и height могут быть указаны
inline-block - Обтекает элемент в линию с текстом, но позволяет указать width и height.
Элементы по умолчанию имеют одно из этих значений. Например:
, , -> inline
-> block
quirksmode.org имеет хорошее объяснение со скриншотами:
Сценарии использования блочного и встроенного типов довольно очевидны. Используйте встроенный, если вы хотите применить стиль к короткому отрезку текста (например, нескольким словам), и используйте блок для прямоугольных областей с шириной / высотой.
Что касается inline-block, он, естественно, используется для изображений. Это полезно, когда вы хотите, чтобы небольшие блоки перемещались слева направо, сверху вниз, как обычный текст, но при этом они оставались как блоки.
Примечание: в 90% случаев вам не нужно указывать свойство display , просто используйте соответствующие элементы с классами, например или для встроенных, для блоков. Основной способ, которым он вступает в игру, - это скрытие материала с помощью Javascript, вам просто нужно вернуть элемент к его исходному / естественному атрибуту отображения.