Практика по CSS

Box-sizing

1. Отличие

Мы получаем квадрат, шириной 290*290, т.к. при свойстве content-box габариты объекта складываются с двумя padding и с двумя border:
height 250px + top padding 15px + bottom padding 15px + top border 5px + bottom border 5px = 290px

Content-box

Мы получаем квадрат, размера 250*250, т.к. при свойстве box-sizing: border-box; габариты объекта уже включают в себя два padding и два border

Border-box

2. Размещение нескольких блоков

Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8

Двойное нажатие как в Инстаграмм

Иконка сердца Инста-пост

Анимация тающего шоколада

Chocolate

Поле для ввода пароля с переключением видимости пароля

Глаз