CSS: поток, размеры, позиционирование

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

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

1. Изучить следующие темы:

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

2. Для выполнения работы необходимо в style.css из предыдущей работы:

   • Для всех элементов задать расчет размеров через box-sizing: border-box;. Пример кода ниже. Проверяйте есть ли это в reseter.css или normalize.css;
   • Задать размеры для элементов (max-height, max-width, min-height, min-width, width, height) Высоту для элементов задавайте только если вы уверены зачем это необходимо;
   • Начать расставлять padding, margin для элементов идущих в нормальном потоке.
   • Использовать подходящее позиционирование (relative, absolute или fixed) для случаев когда один элемент находится поверх другого и при необходимости использовать z-index.

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

4. Убедиться в том, что нигде нет переполнений.

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

6. Загрузить проект на хостинг.

Требования к html и css:

• Код html и css отформатирован;
• Корректное использование тегов;
• Корректное использование селекторов и свойств в css;
• Отсутствие ошибок на валидаторе для html и css.

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

Результаты работы проверены наставником.

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

Материалы

• Блочная модель - mdn
• Блочная модель - doka.guide
• Свойства блочной модели - mdn
• Введение в CSS вёрстку
• Основы CSS
• MDN CSS

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

• Getting Started With CSS Layout
• CSS ALMANAC - position
• Chrome DevTools

Codepens

• Блочная модель
• Позиционирование
• Codepen преподавателя

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

1. В чем суть блочной модели?
2. Как рассчитываются размеры элементов?
3. Как задатать box-sizing для всех элементов?
4. Чем отличаются строчные элементы от блочных?
5. В чем особенности блочных элементов?
6. В чем особенности строчных элементов?
7. Как лучше задавать размеры элементам?
8. Что такое переполнение и как оно возникает?
9. Что такое поток документа?
10. Какие есть особенности поведения margin?
11. Когда использовать margin, а когда padding?
12. Как работает обертка для ограничения ширины и центрирования контента?
13. Для чего нужно свойство position?
14. Чем отличаются разные варианты позиционирования?

Задать вопрос наставнику