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

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

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

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

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

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

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

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

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

5. Загрузить проект на сервер через sftp или используя ssh.

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

• Удобочитаемый код (Руководство по оформлению HTML/CSS кода от Google);
• Код отформатирован;
• Корректное использование тегов;
• Отсутствие ошибок на валидаторе для 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. Чем отличаются строчные элементы от блочных?
4. В чем особенности блочных элементов?
5. В чем особенности строчных элементов?
6. Как лучше задавать размеры элементам?
7. Что такое переполнение и как оно возникает?
8. Что такое поток документа?
9. Какие есть особенности поведения margin?
10. Для чего нужно свойство position?
11. Чем отличаются разные варианты позиционирования?

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