Назад к вопросам
Junior
74
questionbank
Какие CSS-раскладки вы знаете?
Sobes Copilot
Получайте ответы в реальном времени
Ответ от нейросети
sobes.tech AI
- Flexbox (гибкий контейнер) — позволяет выравнивать элементы в одном направлении (строка или столбец).
- Grid (сеточная раскладка) — дает двумерную систему для расположения элементов по строкам и столбцам.
- Float (плавающие элементы) — позволяет обтекать элемент другим содержимым. Устаревший метод для создания раскладок.
- Inline-block — элементы отображаются как строчные, но обладают свойствами блочных (можно задавать ширину и высоту).
- Position (позиционирование) — управляет размещением элемента относительно его исходного положения или другого элемента.
| Тип Position | Описание |
|---|---|
static |
Положение по умолчанию, элемент следует обычному потоку документа. |
relative |
Элемент позиционируется относительно своего обычного положения. |
absolute |
Элемент позиционируется относительно ближайшего позиционированного предка. |
fixed |
Элемент позиционируется относительно окна просмотра (viewport) и остается на месте при прокрутке. |
sticky |
Элемент ведет себя как relative до тех пор, пока не достигнет определенного смещения, после чего становится fixed. |
/* Пример использования Flexbox */
.container {
display: flex;
justify-content: center; /* выравнивание по центру по горизонтали */
align-items: center; /* выравнивание по центру по вертикали */
}
/* Пример использования Grid */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* две колонки равной ширины */
gap: 20px; /* отступ между элементами сетки */
}