Урок 46. Задания: Типичные ошибки вёрстки

📁 Раздел: Качество вёрстки ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#width #height #margin-left #color #overflow

⚡ Кратко

Почини три «сломанных» фрагмента раскладки: горизонтальный скролл от 100vw, забытый box-sizing и фиксированную высоту. Сверься с решениями.

Задания

  1. Убрать горизонтальный скролл. Дан баннер .hero { width: 100vw; }, из-за которого появляется прокрутка вбок. Перепиши свойство так, чтобы блок занимал всю доступную ширину контейнера без скролла.

    Ожидаемый результат: блок во всю ширину, скролла вправо нет.

  2. Вернуть блок в контейнер. Поле формы width: 100%; padding: 16px; border: 2px solid вылезает за родителя. Не меняя width и padding, заставь его уместиться.
    контейнер поле должно влезть сюда
    Цель задания 2: поле полностью внутри пунктирного контейнера.
  3. Перестать резать текст. Карточка height: 60px; overflow: hidden; обрезает длинное описание. Сделай так, чтобы карточка росла под содержимое, сохранив минимальную высоту 60px.
  4. Чеклист. Составь свой чеклист из 4–6 пунктов, который прогоняешь перед сдачей макета (опираясь на справочник урока).

Навигация