Разница между «блоком» и «встроенным»

1. Элементы уровня блока
2. Встроенные элементы
3. Другие заметки
4. Бонусный совет: замененные элементы
5. Заключение

Для стилизации CSS элементы обычно можно разделить на несколько разных категорий. Две из этих категорий - это элементы уровня блока и встроенные элементы.

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

Элементы уровня блока

Блочный элемент - это элемент, который имеет, но не ограничивается следующими характеристиками:

• Если ширина не задана, естественно расширится, чтобы заполнить родительский контейнер
• Может иметь поля и / или отступы
• Если высота не задана, будет естественным образом расширяться, чтобы соответствовать дочерним элементам (при условии, что они не перемещены или не расположены)
• По умолчанию будет размещен ниже предыдущих элементов в разметке (при условии, что нет плавающих элементов или расположения на окружающих элементах)
• Игнорирует свойство вертикального выравнивания

Таким образом, для элемента блока нет необходимости задавать ему заданную ширину или ширина 100% если вы хотите, чтобы он заполнил своего родителя горизонтально. Фактически, выполнение любой из этих вещей может вызвать проблемы с ремонтопригодностью или другие нежелательные проблемы.

И, как показывает четвертый элемент в приведенном выше списке, также нет необходимости «очищать» элемент блока; Предполагая, что плавающие элементы не влияют на элемент блока, он будет очищен автоматически и начнется со следующей «строки» в выводе страницы.

Примеры элементов блока:
<p>, <div>, <form>, <header>, <nav>, <ul>, <li> и <h1>.

Встроенные элементы

Встроенный элемент имеет, но не ограничивается следующими характеристиками:

• Течет вместе с текстовым содержимым, таким образом
• Не удалит предыдущее содержимое для перехода на следующую строку, как элементы блока
• Подлежит бело-пространство настройки в CSS
• Игнорирует настройки верхнего и нижнего полей, но применяет левое и правое поля и любые отступы
• Будет игнорировать свойства ширины и высоты
• При перемещении влево или вправо автоматически становится элементом уровня блока с учетом всех характеристик блока
• Подлежит свойству вертикального выравнивания

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

Примеры встроенных элементов:
<a>, <span>, <b>, <em>, <i>, <cite>, <mark> и <code>.

Другие заметки

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

Вообще говоря, вы можете поместить любой элемент блока в другой элемент блока. Вы также можете поместить любой встроенный элемент внутри блочного элемента, а также любой встроенный элемент внутри любого другого встроенного элемента. Но вы не можете поместить элемент блока внутри встроенного элемента - за исключением (я полагаю): вы можете обернуть элемент <a> вокруг любого содержимого, будь то элементы блока, или встроенные элементы, или смесь обоих.

У вас есть возможность изменить любой элемент уровня блока на встроенный элемент, и наоборот, используя свойство display. Так что имейте это в виду, если вам нужно это сделать. Но не используйте неправильный элемент для неправильной цели. Один SEO-парень сказал мне, чтобы я поместил элемент <h2> внутри абзаца и сделал его похожим на обычный текст, потому что он хотел повысить SEO. Не очень хорошая идея, вот для чего <em>.

И последнее, на что следует обратить внимание, это то, что, хотя с точки зрения CSS блок и inline существуют, с точки зрения HTML5, различные типы элементов были переклассифицированы, чтобы они были более конкретными. Вы можете прочитать об этом модели контента в спецификации WHATWG HTML5.

Бонусный совет: замененные элементы

Вначале я сказал, что block и inline - это всего лишь два типа контента. Вообще говоря, это два основных вида, и вам не придется слишком сильно беспокоиться о других видах.

Но есть то, что называется замененные элементы , По сути, они не являются ни блочными, ни встроенными. Но вы можете классифицировать их как нечто ближе к встроенному, но с блочной структурой.

Я не буду давать подробное объяснение здесь; Вы можете проверить статью SitePoint, на которую есть ссылка в предыдущем абзаце, для более подробной информации. Но некоторые примеры замененных элементов включают в себя:

<img>, <object>, <input> и <select>.

Заключение

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

Похожие

Комментарии