Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Блочная модель

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

Процесс создания вёрстки можно описать похожими процессами. В ней так же важна роль возведения структуры и отделки. Для этого существуют несколько основных типов элементов:

  • Блочные элементы (Block level). Эти элементы отвечают за каркас страницы.
  • Строчные элементы (Inline level). Они помогают нам в процессе стилизации страницы или добавления функциональных частей.

Важно: сами по себе элементы HTML не являются блочными или строчными. HTML — всего лишь разметка. За то, будет элемент блочным или строчным, отвечает CSS. Для всех HTML-тегов существуют стандартные модели вывода, которые по умолчанию настроены в браузере, поэтому понятие блочных и строчных элементов обычно соотносят с определёнными тегами, так как они имеют стандартное поведение при добавлении на страницу. В уроках соответствие тегов и значения условно, так как это поведение легко изменить с помощью CSS свойства display.

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

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

Представьте, что у вас есть шкаф и коробки с шириной, равной ширине шкафа. В этом случае мы не можем поставить коробки рядом друг с другом, так как для этого у нас не будет пространства. Единственное решение — класть коробки друг на друга. Блочные элементы ведут себя точно таким же образом.

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

В HTML-разметке такие коробки могли бы выглядеть следующим образом:

<div class="box box-1">Коробка №1</div>
<div class="box box-2">Коробка №2</div>
<div class="box box-3">Коробка №3</div>

На примере этой разметки уже стало понятно, что элемент div является блочным элементом. Он занимает всю доступную ширину, и из-за этого другие элементы не встают с ним в один ряд.

Стоит отдельно отметить понятие «занимает всю доступную ширину». Что же именно скрывается за этой доступной шириной? Ширина всей страницы, ширина экрана или ширина дороги близ деревни Ракушки? На самом деле доступная ширина — вся доступная ширина родителя. То есть, если наш блок лежит внутри body, то эта ширина будет равна именно ширине body. Стоит изменить ширину body, так сразу изменится и ширина блочного элемента внутри.

Какие же ещё элементы являются блочными? На самом деле их так много, что просто делать перечисление не очень верно. В процессе углубления в вёрстку вы сами обнаружите, какие элементы являются блочными. Основными же блочными элементами являются:

  • div
  • p
  • Теги списков ul/ol/li
  • Заголовки h1-h6

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

<div class="article">
    <div class="article-header">
        <h1>Заголовок статьи</h1>
    </div>
    <div class="article-body">
        <p>А здесь находится текст статьи</p>
    </div>
</div>

Как вы видите, внутрь блочных элементов div мы положили другие такие же блоки, а также заголовок и параграф. Такая вложенность может достигать любого уровня.

Важно: хоть HTML и позволяет бесконечно вкладывать блоки друг в друга, лучше сохранять здравый смысл. Дело в том, что процесс вывода вёрстки достаточно долгий для браузеров. На это тратится довольно много ресурсов. И чем больше вложенность блоков друг в друга, тем сложнее браузеру и компьютеру всё это обработать.

Вложенность блочных элементов друг в друга ограничена только несколькими пунктами:

  1. Нельзя вкладывать заголовки в заголовки.
  2. Нельзя вкладывать параграфы в параграфы.

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

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

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

Давайте добавим в прошлый пример строчный элемент:

<div class="article">
    <div class="article-header">
        <h1>Заголовок статьи</h1>
    </div>
    <div class="article-body">
        <p>А <a href="#">здесь</a> находится текст статьи</p>
    </div>
</div>

Что произошло? Мы обернули слово здесь в ссылку, которая уведёт пользователя в то место, которое мы укажем. Что произойдёт в браузере при добавлении этого тега? Ссылка станет синего цвета и появится подчёркивание. Но сам текст останется на месте, так как ширина ссылки будет равна ширине слова здесь.

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

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

Это главная отличительная черта строчных элементов. Помимо этого есть важная особенность, связанная с применением свойств width и height в CSS. Для строчных элементов эти свойства не работают. Их применение не даст никакого эффекта.

Наиболее часто используемыми строчными элементами являются:

  • span
  • a
  • Теги выделения текста i, em, b, strong

Так же, как и блочные элементы, мы можем вкладывать строчные элементы внутрь строчных. Это распространённая практика, которая вам пригодится. Например:

<span>Длинный текст, который мы обернули в строчный элемент span. Внутри span мы так же можем вставить тег <i>i</i>, <strong>strong</strong> и так далее.</span>

Важно: не вкладывайте внутрь строчных элементов блочные. Это нарушает семантику и усложняет чтение кода.

Блочная модель документа

Ещё до работы с CSS полезно понимать, как браузер выводит элементы на вашу страницу. Помимо естественных свойств высоты и ширины, любой элемент на странице может иметь следующие свойства:

  • padding — Внутренние отступы элемента.
  • margin — Внешние отступы от элемента.
  • border — Видимые границы элемента.

Каждое из них не просто выполяет ту функцию, которая указана, но и напрямую влияет на конечные значения высоты и ширины элемента.

Блочная модель

Представьте, что у нас есть квадрат со стороной 150 пикселей. Мы добавили к нему рамку в 2 пикселя, внутренний отступ в 10 пикселей с каждой стороны и по 20 пикселей внешнего отступа с каждой стороны.

Сколько места будет занимать наш квадрат на странице? Для этого нам надо суммировать все значения.

Ширина: 150px (начальная ширина) + 2px (граница справа) + 2px (граница слева) + 10px (внутренний отступ справа) + 10px (внутренний отступ слева) + 20px (Внешний отступ справа) + 20px (Внешний отступ слева) = 214px

Высота: 150px (начальная высота) + 2px (граница сверху) + 2px (граница снизу) + 10px (внутренний отступ сверху) + 10px (внутренний отступ снизу) + 20px (Внешний отступ сверху) + 20px (Внешний отступ снизу) = 214px

Дополнительное задание

Воспользуйтесь любым онлайн сервисом, который умеет преобразовывать HTML разметку. Например, https://htmlcodeeditor.com/ .

Вставьте в левую область следующую разметку:

<div class="article">
    <div class="article-header">
        <h1>Заголовок статьи</h1>
    </div>
    <div class="article-body">
        <p>А здесь находится текст статьи</p>
    </div>
</div>

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


<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».