Вход

Единицы измерения css для блочных элементов

Единицы измерения css для блочных элементов

В данной статье речь пойдёт про единицы измерения css для блочных элементов. В css3 у нас расширился инструментарий для работы с блоками такими правилами как: width, height, padding, margin, border-radius

1. em — padding, margin, border-radius рассчитывается относительно font-size, где значение font-size:20px = padding: 1em

1
2
3
4
div{
   font-size:20px;
   padding: 2em; // 40px с каждой стороны
}

2. rem рассчитывается на основе тега html (правила font-size, если значение не указано, то берётся по умолчанию браузера = 16px)

padding, margin, border-radius рассчитывается относительно font-size

3. vw – 1% ширины окна

4. vh – 1% высоты окна

5. vmin – наименьшее из (vw, vh)

1
2
3
4
div{
   width: 100vmin;
   height: 100vmin;
}

6. vmax – наибольшее из (vw, vh)

14 января 2020 /

11936 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Получать уведомления о новых комментариях
Уведомлять
guest
0 комментариев
Inline Feedbacks
View all comments