sonyps4.ru

A блочный или строчный. Блочные и строчные элементы

Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги , , , , и др., а также элементы, у которых свойство display установлено как inline . В основном они используются для изменения вида текста или его логического выделения.

По аналогии с блочными элементами перечислю их характерные особенности.

  • Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
  • Эффект схлопывания отступов не действует.
  • Свойства, связанные с размерами (width , height ) не применимы.
  • Ширина равна содержимому плюс значения отступов, полей и границ.
  • Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
  • Можно выравнивать по вертикали с помощью свойства vertical-align .

Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег , который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

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

,

И подобные широко распространённые теги. Тем не менее, блочные и строчные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц. В примере 3.16 показано использование тега для выделения отдельных слов.

Пример 3.16. Применение тега

Строчные элементы

Лягте животом на пол. Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперед до полного сокращения мышц живота. Задержитесь на две секунды. Выполните восемь повторений.

Результат примера показан ниже (рис. 3.25).

Рис. 3.25. Текст, оформленный с помощью стилей

В данном примере тег и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счёт фонового цвета, рамки вокруг текста и сменой его цвета. Обратите внимание, что в результате переноса текста рамка вокруг него также перенеслась на другую строку. Во многих случаях это выглядит не очень красиво, поэтому можно запретить перенос текста через white-space : nowrap .

Для текста, который не обрамлён строчным тегом вроде создаётся анонимный строчный элемент. Для примера выше схема элементов будет следующей (рис. 3.26).

Рис. 3.26. Анонимные строчные элементы

Серым цветом на рисунке помечен текст внутри тега , а пунктиром анонимные строчные элементы. Для таких элементов задать стиль напрямую нельзя, он наследуется от родителя.

Преобразование в строчный элемент

Строчные элементы можно превращать в блочные с помощью свойства display и его значения block . Также возможно и обратное действие через значение inline (пример 3.17).

Пример 3.17. Свойство display

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Строчные элементы

Примечание

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

Результат примера приведен на рис. 3.27.

Рис. 3.27. Замена блочного элемента на строчный

В данном примере блочный тег

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

В виде строчного элемента. В принципе, аналогичным решением будет использовать вместо

Тег .

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

Очевидно вы уже заметили, что элементы заголовков

-
и абзацев

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

Пример: Блочные и встроенные элементы

  • Попробуй сам »

Блочный элемент

занимает всю ширину родительского элемента и ограничен сверху и снизу пустыми строками

Блочный элемент

Начинается с новой строки, а встроенный элемент





Блочный элемент (h2) занимает всю ширину родительского элемента
и ограничен сверху и снизу пустыми строками

Блочный элемент (p) начинается с новой строки,
а встроенный элемент (em)
не начинается с новой строки, а остается в составе абзаца


Обратите внимание как выглядит текст, который мы пометили как курсивный (еm). Он не начинается с новой строки, а остается в составе абзаца. Это происходит потому, что элемент является встроенным или строчным. Встроенные элементы не начинаются с новой строки, а находятся в составе блочных. Встроенным элементам достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в них.

Разница между блочными и строчными элементами следующая:

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

Примеры блочных элементов:

  • -

Примеры строчных элементов:

Общие элементы
и

Элемент

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

Итак, тег

служит для того, чтобы:
– применять какие-либо настройки к отдельному информационному блоку на сайте;
– быть контейнером для текста, изображений и других элементов HTML-документа.

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

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги

,
,
,
, ,

,...,

,
,
    ,

    , 

    , 
,