Ответ
Абсолютные единицы:
px(пиксели) — фиксированный размер, не зависит от окружения.pt(пункты) — 1pt = 1/72 дюйма, часто для печати.in,cm,mm— дюймы, сантиметры, миллиметры (редко в вебе).
Относительные единицы:
%— процент от размера родителя.em— относительно размера шрифта родителя (наследуется).rem— относительно размера шрифта корневого элемента (<html>).vw,vh— 1% от ширины/высоты viewport.vmin,vmax— 1% от меньшего/большего размера viewport.ch— ширина символа "0" текущего шрифта.
Пример:
.container {
width: 80%; /* 80% от родителя */
font-size: 1.2rem; /* 1.2 × размер шрифта <html> */
padding: 2em; /* 2 × текущий font-size */
}Ответ 18+ 🔞
О, смотри-ка, какие у нас тут единицы измерения подъехали! Прямо как на рынке, блядь: одни фиксированные, другие — пиздят размер у соседей. Давай разбираться, пока голова не треснула.
Вот эти, абсолютные, они как гранитный хуй — стоят и ни на кого не смотрят.
px— пиксели. Всё, точка. Хоть родитель плачь, хоть вьюпорт танцуй — он свой размер не поменяет.pt,in,cm,mm— это вообще из другой оперы, для бумаги. В вебе их юзать — это как гвоздями суп хлебать, ёпта. Хуй с ними.
А вот относительные — это уже цирк, блядь. Настоящие приспособленцы.
%— классика жанра. "Мама, папа, дайте мне 80% от вашей ширины!" И родители, мудаки, делятся.em— хитрая жопа. Смотрит на размер шрифта у своего непосредственного предка и умножает. Наследуется, сука, как фамильная драгоценность, только вот если по цепочке накрутить — в итоге получишь овердохуища непонятного размера.rem— умный родственникem. Не ебёт мозг родителям, а смотрит прямиком на корень, на<html>. Стабильность, блядь. Люблю его.vw/vh— это уже от размера окна браузера пляшут. 10vw — это 10% от ширины окна. Окно сузил — всё поплыло. Красота, а не жизнь.ch— ширина цифры "0". Полезно, когда надо выровнять что-то по тексту, но выглядит как понты для гиков.
Пример, чтобы всё встало на свои ебалы:
.container {
width: 80%; /* Отожму у родителя 80% ширины, и похуй */
font-size: 1.2rem; /* Возьму базовый размер шрифта с корня и увеличчу на 20%. Без сюрпризов. */
padding: 2em; /* А вот тут, сука, внимание! Это 2 раза от МОЕГО ТЕКУЩЕГО font-size (то есть от 1.2rem). Вот так вот ебушки-воробушки! */
}Короче, rem для глобальных размеров — надёжно. em — когда надо, чтобы внутренние отступы масштабировались относительно шрифта внутри блока. А % и vw — когда хочешь, чтобы всё плыло и адаптировалось, как хитрая жопа. Главное — не смешивать всё в одну кучу, а то будет пиздец, а не вёрстка.