Единицы измерения в CSS
В CSS размеры задаются разными единицами. Одни привязаны к экрану (px), другие — к родительскому элементу (%), третьи — к окну браузера (vw, vh).
1. Пиксели — px
Самая популярная единица. Один пиксель — это одна точка на экране. Пиксели не зависят от размера шрифта или окна браузера. Используются для точных размеров.
font-size: 16px;
width: 200px;
padding: 10px;
border: 1px solid black;
200px
Текст размером 16px
📌 Правило: Для точных размеров (границы, отступы, ширина картинок) используйте
px.
2. Проценты — %
Размер задаётся относительно родительского элемента. Если у родителя ширина 400px, а дочернему блоку задать width: 50%, он будет шириной 200px.
.parent {
width: 400px;
}
.child {
width: 50%; /* 200px */
}
50% от 400px = 200px
📌 Проценты удобны для адаптивной вёрстки. Например, картинка шириной 100% всегда будет растягиваться на всю ширину родителя.
3. vw и vh — относительно окна браузера (viewport)
1vw= 1% от ширины окна браузера1vh= 1% от высоты окна браузера
Используются для создания адаптивных блоков, которые всегда занимают определённую часть экрана.
.full-width {
width: 100vw; /* на всю ширину экрана */
height: 50vh; /* половина высоты экрана */
}
Ширина 50% от окна браузера (50vw)
Попробуйте изменить ширину окна — блок подстроится.
📌 Важно: vw и vh считаются от размера окна браузера, а не от родительского элемента. Это удобно для полноэкранных блоков.
4. Сравнение и выбор единиц
| Единица | Относительно чего | Когда использовать |
|---|---|---|
px |
абсолютная (пиксели экрана) | границы, точные размеры, мелкие отступы |
% |
родительского элемента | адаптивная ширина, раскладка |
vw, vh |
размера окна браузера | блоки на всю ширину/высоту экрана |
📌 О других единицах:
em и rem мы разберём в лекции, посвящённой шрифтам и тексту, потому что они привязаны к размеру шрифта.
📓 Из тетради: «Правило большого пальца: границы и мелкие отступы — в px, ширину блоков — в % или vw, полноэкранные блоки — в vw/vh. А для шрифтов — своя история, к ней вернёмся позже».