Skip to content
Веб-разработка
GitHub

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

Цель: изучить блочную модель, нормальный поток в CSS, принципы позиционирования элементов.

Порядок выполнения лабораторной работы:

  1. Изучить:

    • Блочную модель;
    • Размеры элемента, отступы, поля, границы;
    • min(), max(), и clamp();
    • Переполнение;
    • Поток документа;
    • Позиционирование элементов (static, relative, absolute, fixed);
    • Слои (z-index).

  2. Выполните следующие действия в style.css из второй работы:

    1. Задайте для всех элементов расчет размеров через box-sizing: border-box;. Пример кода ниже. Проверьте наличие этого свойства в reseter.css или normalize.css.
    2. Создайте обертку для хедера, футера и секций, которая ограничивает максимальную ширину, выстраивает контент по центру (поможет margin) и не позволяет контенту прижиматься к краям экрана (padding).
    3. Задайте размеры для элементов (max-width, min-width, width, max-height, min-height, height). Работайте со свойством высоты только в крайнем случае. Используйте преимущественно относительные единицы измерения: %, em, rem.
    4. Примените функции min(), max(), и clamp() где это возможно.
    5. Задайте для элементов padding (внутренний) и margin (внешний). Проверьте корректность их использования.
    6. Проверьте отсутствие переполнений во всех элементах.

  3. Зафиксируйте результаты работы с помощью системы контроля версий git и отправить репозиторий на Github.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

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

* {
  outline: 1px solid red;
}

Требования к коду:

  1. Отсутствие ошибок на валидаторе для html и css;
  2. Код отформатирован.

Результаты выполнения лабораторной работы:

Статическая веб-страница на хостинге, со структурой, которая соответствует требованиям и сохранена в системе контроля версий.

Дополнительные источники

Вопросы для защиты

  1. Блочная модель (“Коробочная” модель, box model), ее составляющие.
  2. Как рассчитываются размеры элементов?
  3. Отличия строчных, блочных и строчно-блочных элементов.
  4. Как лучше задавать размеры элементам?
  5. Переполнение и примеры его возникновения.
  6. Стандартный поток документа.
  7. Особенности внешних отступов (margin), внешние отступы для блочных и строчных элементов.
  8. Свойство position, его значения и применение.