Справочник CSS
Оформление, размеры и раскладка: понятные объяснения свойств CSS, примеры, частые ошибки и упражнения.
flex-shrink: сжатие при нехватке места
flex-shrink задаёт участие flex-элемента в распределении отрицательного свободного места, когда содержимому тесно.
flex-basis: исходный размер до распределения места
flex-basis задаёт базовый размер flex-элемента по главной оси перед распределением свободного пространства.
align-self: выравнивание отдельного элемента
align-self переопределяет выравнивание конкретного flex- или grid-элемента по соответствующей оси.
order: визуальная перестановка flex- и grid-элементов
order меняет визуальное расположение элементов в Flexbox и Grid, не перестраивая исходный HTML.
grid-template-rows: явные строки сетки
grid-template-rows задаёт размеры явных строк CSS Grid и позволяет сочетать строки по содержимому с растягиваемой областью.
grid-auto-rows: размер неявно созданных строк
grid-auto-rows задаёт размеры строк, которые Grid создаёт вне явно перечисленной сетки.
grid-column: положение по линиям колонок
grid-column задаёт начальную и конечную линии размещения grid-элемента по колонкам.
grid-auto-flow: направление автоматического размещения
grid-auto-flow управляет алгоритмом автоматического размещения элементов, которым не задали точную позицию в сетке.
object-position: положение содержимого изображения
object-position задаёт положение содержимого заменяемого элемента, например изображения, внутри его собственной коробки.
border-collapse: объединение границ таблицы
border-collapse выбирает раздельную или объединённую модель границ ячеек HTML-таблицы.
background-color: фон под изображением и текстом
background-color задаёт цвет фона элемента и остаётся полезным даже при наличии фонового изображения.
background-image: изображения и градиенты в нескольких слоях
background-image задаёт один или несколько графических слоёв фона, включая градиенты без отдельного файла.
background-size: размер фонового изображения
background-size управляет размером фонового изображения независимо от размеров самого элемента.
background-position: положение фона в области
background-position задаёт выравнивание фонового изображения внутри области позиционирования.
background-repeat: повторение фонового слоя
background-repeat определяет, повторяется ли фоновое изображение и по каким направлениям.
background-clip: граница закрашивания фона
background-clip определяет, до какой части коробки распространяется фон: границы, внутренних отступов или содержимого.
background-origin: откуда рассчитывается положение фона
background-origin выбирает область, относительно которой позиционируется фоновое изображение.
background-attachment: связь фона с прокруткой
background-attachment определяет, связан ли фон с элементом, его прокручиваемым содержимым или областью просмотра.
transform-origin: точка отсчёта преобразования
transform-origin задаёт опорную точку, относительно которой выполняются преобразования элемента.
transition-duration: длительность перехода свойства
transition-duration задаёт время, за которое анимируемое свойство переходит от старого значения к новому.
transition-timing-function: распределение скорости перехода
transition-timing-function задаёт, как меняется скорость перехода внутри его общей длительности.
transition-delay: задержка начала перехода
transition-delay определяет паузу перед началом перехода после изменения целевого состояния.
scroll-margin-top: зазор у цели якорного перехода
scroll-margin-top добавляет верхний отступ к области элемента, учитываемой при некоторых операциях прокрутки к нему.
scroll-padding-top: полезная область контейнера прокрутки
scroll-padding-top задаёт верхний внутренний отступ области прокрутки, учитываемый при размещении целевых элементов.
scroll-behavior: плавность программной и якорной прокрутки
scroll-behavior задаёт плавную или немедленную прокрутку для поддерживаемых навигационных и программных переходов.
overscroll-behavior: передача прокрутки внешнему контейнеру
overscroll-behavior управляет поведением на границе прокручиваемой области, включая передачу прокрутки предку.
padding-inline: внутренние отступы по направлению строки
padding-inline задаёт внутренние отступы по началу и концу строчной оси, учитывая направление письма.
margin-inline: внешние отступы по строчной оси
margin-inline задаёт внешние отступы по началу и концу строчной оси и подходит для направленно независимого оформления.
inset: сокращение для четырёх смещений
inset объединяет top, right, bottom и left для позиционированного элемента.
overflow-x: локальное горизонтальное переполнение
overflow-x задаёт обработку содержимого, выходящего за горизонтальные границы элемента.