21. Блочные и встроенные элементы.
Структуру блочных элементов (block element) мы рассмотрели ранее,
см. урок 18
Блочный элемент занимает всю возможную ширину в родительском элементе и вставляет разрывы строки в своем начале и в своем конце.
Примеры блочных элементов: <div>, <h1>, <p> и т.д.
Встроенные элементы (инлайновые элементы, inline element) имеют такую же структуру, как и у блочных элементов, за исключением отсутствия у встроенных элементов верха и низа.
Встроенный элемент занимает по ширине столько место, сколько ему необходимо для отображения своего контента. Встроенный элемент не вставляет разрывы строки в своем начале и в своем конце.
Примеры встроенных элементов: <span>, <a> и т.д.
Блочные элементы могут быть родителями по отношению к другим блочным элементам, встроенным элементам и могут содержать контент.
Встроенные элементы могут быть родителями по отношению к другим встроенным элементам и могут содержать контент. Встроенные элементы не могут быть родителями по отношению к блочным элементам.
Иногда из-за соображений дизайна блочные элементы отображаются как встроенные, используя свойство display:
display:inline;
Можно также встроенные элементы отобразить как блочные:
display:block;
Следует заметить, что манипулируя свойством display, мы меняем лишь способ отображения элемента, но не его суть. Например, даже если мы отображаем встроенный элемент как блок, все равно, нельзя его сделать родителем для другого блока и т.д.
Теперь исследуем на практическом примере:
css_021_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_021_001.zip ← скачайте пример, чтобы установить на свой сайт...
Блочный элемент занимает всю возможную ширину в родительском элементе и вставляет разрывы строки в своем начале и в своем конце.
Примеры блочных элементов: <div>, <h1>, <p> и т.д.
Встроенные элементы (инлайновые элементы, inline element) имеют такую же структуру, как и у блочных элементов, за исключением отсутствия у встроенных элементов верха и низа.
Встроенный элемент занимает по ширине столько место, сколько ему необходимо для отображения своего контента. Встроенный элемент не вставляет разрывы строки в своем начале и в своем конце.
Примеры встроенных элементов: <span>, <a> и т.д.
Блочные элементы могут быть родителями по отношению к другим блочным элементам, встроенным элементам и могут содержать контент.
Встроенные элементы могут быть родителями по отношению к другим встроенным элементам и могут содержать контент. Встроенные элементы не могут быть родителями по отношению к блочным элементам.
Иногда из-за соображений дизайна блочные элементы отображаются как встроенные, используя свойство display:
display:inline;
Можно также встроенные элементы отобразить как блочные:
display:block;
Следует заметить, что манипулируя свойством display, мы меняем лишь способ отображения элемента, но не его суть. Например, даже если мы отображаем встроенный элемент как блок, все равно, нельзя его сделать родителем для другого блока и т.д.
Блочный элемент div занимает всю возможную ширину...
Встроенный элемент span более скромен...
Блочный элемент ul отображается как блок по умолчанию...
Блочные элементы li отображаются как встроенные, если применить свойство display:inline;...
Теперь исследуем на практическом примере:
css_021_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_021_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.