HTML Css Starter - Margin html5 css3 Homework

Урок посвящен работе с отступами элементов с помощью свойства margin. Будут рассмотрены внешние отступы, проваливание, изменение типа элемента. Задания касаются центрирования, создания меню и панели соцсетей.

Загружено:

Cryptot Menchik

Авторское право

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

Доступные форматы

Скачать в формате PDF, TXT или читать онлайн в Scribd

0% нашли этот документ полезным (0 голосов)

58 просмотров2 страницы

HTML Css Starter - Margin html5 css3 Homework

Загружено:

Cryptot Menchik

Авторское право

Доступные форматы

Скачать в формате PDF, TXT или читать онлайн в Scribd

Вы находитесь на странице: 1/ 2

Работа с отступами, свойство margin

№ урока: 5 Курс: HTML5 & CSS3 Стартовый

Средства обучения: Любое IDE (VSCode, webshtorm и т.д.) или текстовый редактор

Обзор, цель и назначение урока

Вы познакомитесь с механикой работы внешних отступов у элементов. Узнаете, что такое

проваливание (схлопывание) и в каких случаях оно присутствует. Будут рассмотрены неявные
отступы при работе со строчно-блочными элементами.

Изучив материал данного занятия, учащийся сможет:

• Добавлять или убирать внешние отступы у элементов.

• Находить и поправлять не явные отступы из-за проваливания(схлопывания).
• Менять тип элемента через CSS.

Содержание урока

1. Внешние отступы элемента

2. Проваливание
3. Поведение при смешанном типе элемента

Резюме

• Внешние отступы (margin) — определение расстояния от элемента, до внешних по

отношению к нему других элементов, расположенных со всех четырех сторон.
• Проваливание, а также Схлопывание — изначальный механизм работы margin-нов,
который работает для нижней и верхней стороны элемента, вычисляя итоговый
промежуток между тегами.
• Строчно-блочный элемент (inline-block) — свойство элемента, которое содержит в себе
и строчное поведение так и блочное.

Закрепление материала

• Принимает ли margin отрицательные значения?

• Как можно центрировать блочный элемент?
• Что такое проваливание(схлопывание)?
• Возможно ли поменять тип элемента? Как?

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

Задание
Создайте прямоугольник с шириной 400 пикселей, использовав заголовок и прописав в нем
любой текст и добавив цвет фона. Оттолкните его с верхнего края страницы на 100px, а по
горизонтали центрируйте.

Самостоятельная деятельность учащегося

Задание 1

Page | 1

CyberBionic Systematics ® Tel. 0 800 750 312 Title: [HTML5 & CSS3 Стартовый]
19 Eugene Sverstyuk Str., 5 floor E-mail: [email protected] Lesson: 5
Kyiv, Ukraine
Site: www.edu.cbsystematics.com
| itvdn.com
Создайте меню, использовав смешанный тип элемента.

Задание 2
Создайте блок, в котором, вне зависимости от ширины, вложенный текст, выделенный фоном,
будет прижат к правой стороне.

Задание 3
Создайте панель соцсетей, используя картинки в папке DZ. Изображение должны быть
ссылками.

Рекомендуемые ресурсы

https://webref.ru/
https://html5book.ru/
http://htmlbook.ru/
https://www.w3schools.com/

Page | 2