Блок 6. Размеры, поток, display, overflow, box-sizing

Задача 1. Карточки

Горы

Горные вершины

Захватывающие виды горных пейзажей. Идеально для треккинга и активного отдыха на свежем воздухе вдали от городского шума.

Подробнее
Океан

Океанские просторы

Бескрайние водные пространства.

Подробнее
Лес

Дремучий лес

Тихое место для отдыха. Грибы, ягоды, пение птиц и запах хвои. Отличный вариант для пешего похода с палаткой на несколько дней.

Подробнее
Пустыня

Пески пустыни

Безграничные дюны и звёздное небо ночью.

Подробнее
Город

Ночной город

Огни мегаполиса, бесконечная энергия улиц и тысячи историй за каждым окном. Идеально для городских прогулок и стритфотографии.

Подробнее
Водопад

Водопады джунглей

Мощные потоки воды в окружении тропической растительности.

Подробнее
Снег

Зимние просторы

Белоснежные поля, морозный воздух и полная тишина. Идеально для лыж, сноуборда и горячего чая у камина после насыщенного дня.

Подробнее
Закат

Закат на горизонте

Золотой час.

Подробнее

Задача 2. Display

block

Я block
Я тоже block — занимаю всю строку

inline

Я inline Я рядом Мы все в одной строке

inline-block

inline-block 1 inline-block 2 inline-block 3

none

Следующий блок скрыт через display: none — его нет в потоке:

Меня не видно

← здесь должен был быть блок, но его нет

Задача 3. Overflow

visible

Текст вылезает за пределы блока и не обрезается. Это поведение по умолчанию. Контент просто выходит наружу и перекрывает соседние элементы.

hidden

Текст обрезается по границе блока. Всё что не влезло — скрыто и недоступно. Полосы прокрутки не появляются.

scroll

Полосы прокрутки появляются всегда, даже если контент влезает. Можно прокрутить чтобы увидеть весь текст внутри блока фиксированного размера.

auto

Полоса прокрутки появляется только если контент не влезает. Умный режим — не засоряет интерфейс лишними скроллбарами когда они не нужны.

Задача 4. Box-sizing

content-box

width: 300px, padding: 20px, border: 5px

Итого: 300 + 40 + 10 = 350px

border-box

width: 300px, padding: 20px, border: 5px

Итого: ровно 300px

Задача 5. Каталог

Продукт

Очень длинное название товара которое может сломать раскладку

Описание товара. Качественный продукт для ежедневного использования.

Купить
Продукт

Товар

Короткое описание.

Купить
Продукт

Средний товар с нормальным названием

Подробное описание товара с характеристиками, отзывами покупателей и условиями доставки по всей стране.

Купить
Продукт

Ещё один товар

Описание средней длины для демонстрации выравнивания кнопок.

Купить