calc() позволяет делать простые вычисления прямо в значениях CSS. Это удобно, когда нужно «смешать» разные единицы: например, «90% ширины плюс 20 пикселей» или «высота в 3 строки минус шапка». Синтаксис: как писать, чтобы браузер понял Базовый вид: css свойство: calc(выражение); Важные правила: Операторы +, -, *, / обязательно окружаются пробелами: calc(100% — 20px) — правильно, […]
  Загрузка... |
Просмотров: 6 | Читать статью |
Эти значения помогают блоку не занимать «лишнее» место, а подстраиваться под контент. Разберём, чем они отличаются, и посмотрим на живые примеры. В чём разница: коротко и по делу min-content — «самый узкий вариант, при котором текст не ломается без необходимости». Браузер старается сделать блок как можно уже, но не ломает слова там, где можно этого […]
| Загрузка... |
Просмотров: 7 | Читать статью |
Когда нужно, чтобы блок сохранял пропорции (например, карточка товара, превью видео, сетка галереи), раньше часто делали костыли: вставляли пустой div‑обёртку, задавали ей padding-top в процентах или писали JS, который пересчитывал высоту. Сейчас всё это можно сделать одной строкой CSS — через свойство aspect-ratio. Что такое aspect-ratio aspect-ratio задаёт соотношение ширины к высоте блока. Например, 16/9 […]
| Загрузка... |
Просмотров: 10 | Читать статью |
Когда верстаешь под разные экраны, блок может вести себя неадекватно: на мобильном сжимается так, что текст становится нечитаемым, а на огромном мониторе растягивается на полэкрана — и читать неудобно из‑за длинных строк. Чтобы этого не было, используют min-width и max-width. Они задают «границы приличия» для ширины блока: не уже X и не шире Y. Что делают эти […]
| Загрузка... |
Просмотров: 9 | Читать статью |