Свойства, влияющие на габариты элементов. Свойство display. Блочная модель и основы верстки. Псевдоэлементы. Создание UI-элементов страницы.

1. Габаритные свойства и
псевдоклассы
Курс Frontend-разработки на Javascript + Vue/React

2. Габаритные свойства
• Габаритными называют свойства, которые изменяют размеры или
отступы элемента.
• Габаритные свойства применяются в основном только к блочным
тегам. Строчные теги имеют частичную поддержку габаритных
свойств.

3. Габаритные свойства

4. Габаритные свойства

5. Габаритные свойства

6. Блочная модель
• Размеры блочного элемента вычисляются следующим образом:
• Если ширина/высота не заданы
• Ширина = ширине родителя, высота = высоте содержимого.
• При использовании внешних отступов размер элемента уменьшается по
ширине так, чтобы внешние отступы полностью помещались в родительский
элемент.
• Если заданы ширина/высота элемента
• Габариты элемента = ширина + внутренние отступы + границы (левая и правая), высота +
внутренние отступы + границы (верхняя и нижняя)
• Если задан box-sizing: border-box
• Габариты элемента = ширина, высота. Размеры контента внутри сужаются при использовании
внутренних отступов.

7. Пример.
• Вычисление размером элементов при разных единицах измерения
и разных настройках блочной модели
• Размер блока и контента с использованием overflow

8. Задача 1.

9. Задача 1 (самостоятельно)

10. Дополнительные стилевые
свойства
• Свойство border-radius позволяет задать закругления для углов
элемента – со всех сторон. Свойства наподобие border-top-left-
radius задают закругления только конкретного угла. В качестве
значения принимаются единицы измерения CSS.
• Свойство box-shadow позволяет задать тень от элемента.
• Первое значение – отклонение тени по горизонтали, второе –
отклонение по вертикали, третье – радиус размытия тени
ипоследнее – цвет тени
border-radius: 50%;
border-top-left-radius: 10px;
box-shadow: 3px 5px 10px #eff4f4;

11. Свойство display
• Свойство display позволяет указать, как элемент будет вести себя в
рамках блочно-строчной модели.
• Любому элементу может быть перезадан его тип отображения.

12. Виды блоков
Тип display Описание
block Блочный элемент. Обладает собственной шириной, высотой,
внутренними и внешними отступами. Следующие за ним элементы
переносятся на следующую строку. По умолчанию ширина равна ширине
родителя, высота – высоте содержимого.
inline Строчный элемент. Не имеет собственной ширины, высоты, вертикальных
отступов. Ширина и высота равна ширине и высоте содержимого.
Следующее содержимое не переносится на новую строку.
inline-block Блочно-строчный элемент. Обладает всеми свойствами блочного за
исключением того, что следующие за ним элементы не переносятся на
новую строку.
none Элемент не виден на странице и не занимает на ней место.

13. Псевдоклассы
• Псевдоклассы являются частью
компонента селекторов.
• Псевдокласс позволяет
обратиться к элементу, когда
тот находится в каком-то
конкретном состоянии.
• Псевдоклассы (и
псевдоэлементы)
записываются при помощи
знака двоеточия в конце
компонента селектора.
div.wrapper button:hover {}
body a:active {}
div.list li.item:last-child {}

14. Псевдоклассы (2)

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

16. Псевдоэлементы
• Псевдоэлементами называются
особые части элемента на
странице, которые не задаются в
HTML-коде, но могут быть описаны
и выведены при помощи CSS.
• Для появления псевдоэлемента
ему необходимо задать свойство
content.
.item:before {
content: 'X';
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
.block:after {
content: '';
display: block;
width: 100%;
height: 1px;
background-color: #efefef;
}

17. Источники медиаконтента
• Стоковые фото: https://pixabay.com/ru/
• Иконки: https://www.iconfinder.com/
• Стоковые видео: https://www.pexels.com/videos/
• Бесплатные макеты для верстки: https://www.os-templates.com/free-
psd-templates (простейшие)

18. Задача 3
• При наведении мышкой кнопка
становится чуть более бледной
• При нажатии мышкой кнопка
должна «опускаться» (нижняя
граница пропадает).
• Отступы между кнопок должны
быть соблюдены
• Иконки и цвета могут
использоваться любые (но белые).

19. Задача 3 (самостоятельно)
• Сверстать кнопки из изображения
справа. Всего 4 кнопки, в первой
колонке – состояние по умолчанию,
во второй – при наведении, в третьей
– при нажатии на кнопку.

20. Дополнительные материалы
Box Sizing
https://webref.ru/css/box-sizing
Псевдоклассы CSS
https://developer.mozilla.org/ru/docs/Web/
CSS/%D0%9F%D1%81%D0%B5%D0%B2%
D0%B4%D0%BE-
%D0%BA%D0%BB%D0%B0%D1%81%D1%
81%D1%8B
Псевдоэлементы CSS
https://developer.mozilla.org/ru/docs/Web/
CSS/Pseudo-elements
CSS Display
http://htmlbook.ru/css/display
Iconfinder
https://www.iconfinder.com/
Pixabay
https://pixabay.com/ru/
Бесплатные макеты для верстки
https://www.os-templates.com/free-psd-
templates