Содержание
HTML состоит из различных элементов, которые служат строительными блоками веб-страниц. Каждый из этих элементов попадает в одну из двух категорий: элементы уровня блока или встроенный элемент. Понимание различий между этими двумя типами элементов является важным шагом в создании веб-страниц.
Элементы уровня блока
Так что же такое элемент уровня блока? Элемент уровня блока — это элемент HTML, начинающий новую строку на веб-странице и расширяющий всю ширину доступного горизонтального пространства его родительского элемента. Он создает большие блоки контента, такие как абзацы или разделы страниц. Фактически, большинство элементов HTML являются элементами уровня блока.
Элементы уровня блока используются в теле документа HTML. Они могут содержать встроенные элементы, а также другие элементы уровня блока.
Встроенные элементы
В отличие от элемента уровня блока, встроенный элемент:
- Может начинаться в пределах строки
- Не начинается новая строка
- Его ширина простирается только настолько, насколько это определяется его тегами.
Примером встроенного элемента является , который делает шрифт содержимого текста, выделенного жирным шрифтом. Встроенный элемент обычно содержит только другие встроенные элементы или вообще ничего не может содержать, например
сломать тег
Существует также третий тип элементов в HTML: те, которые вообще не отображаются. Эти элементы предоставляют информацию о странице, но не отображаются при визуализации в веб-браузере.
Например:
- определяет стили и таблицы стилей.
- определяет метаданные.
- является элементом документа HTML, который содержит эти элементы.
Переключение линейных и блочных элементов
Вы можете изменить тип элемента со встроенного на блочный или наоборот, используя одно из следующих свойств CSS:
дисплей: блок;
Дисплей: встроенный;
Дисплей: нет;
Свойство отображения CSS позволяет изменить встроенное свойство на блок или блок на встроенное или вообще не отображать.
Когда менять свойство отображения
В общем, оставьте свойство display в покое, но в некоторых случаях может быть полезна замена свойств inline и block display.
- Горизонтальный список меню: Списки являются элементами уровня блока, но если вы хотите, чтобы ваше меню отображалось горизонтально, вам необходимо преобразовать список во встроенный элемент, чтобы каждый пункт меню не начинался с новой строки.
- Заголовки в тексте: Иногда вы можете захотеть, чтобы заголовок остался в тексте, но сохраните значения заголовка HTML. Изменение значений от h1 до h6 на inline позволит тексту, который идет после закрывающего тега, продолжать течь рядом с ним на той же строке, а не начинаться с новой строки.
- Удаление элемента: Если вы хотите полностью удалить элемент из обычного потока документа, вы можете настроить отображение на
никто
Одно примечание, будьте осторожны при использовании дисплея: нет. Хотя этот стиль действительно делает элемент невидимым, вы никогда не захотите использовать его, чтобы скрыть текст, который вы добавили по причинам SEO, но не хотите показывать его посетителям. Это верный способ оштрафовать ваш сайт за черный подход к SEO.
Распространенные ошибки форматирования встроенного элемента
Одна из наиболее распространенных ошибок новичка в веб-дизайне — попытка установить ширину встроенного элемента. Это не работает, потому что ширина встроенных элементов не определяется контейнером.
Встроенные элементы игнорируют несколько свойств:
ширина
а также
высота
Максимальная ширина
а также
максимальная высота
мин-ширина
а также
мин-высота
Microsoft Internet Explorer (замененный Microsoft Edge) в прошлом неправильно применял некоторые из этих свойств даже для встроенных блоков. Это не соответствует стандартам. Это может не относиться к новым версиям веб-браузера Microsoft.
Если вам нужно определить ширину или высоту, которую должен занимать элемент, вам нужно применить его к элементу блочного уровня, содержащему ваш встроенный текст.
