Урок 46. Обзор урока: Типичные ошибки вёрстки и раскладки

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

⚡ Кратко

Каталог типовых ошибок раскладки и их лечение: 100vw → горизонтальный скролл, забытый box-sizing, фиксированная height, схлопывание margin, «магические числа», войны !important и спрятанный overflow.

О чём урок

Это урок-каталог типовых дефектов вёрстки и раскладки. Для каждой ошибки показываем «как ломается» (живой результат) и «как правильно». Разбираем горизонтальный скролл от 100vw, забытый box-sizing: border-box, фиксированную высоту вместо min-height, схлопывание вертикальных margin, «магические числа», войны !important и overflow, который прячет нужный контент.

Цель — собрать чеклист, который можно прогонять перед сдачей любого макета.

Ключевые понятия

  • width: 100vw → горизонтальный скролл
  • box-sizing: border-box
  • min-height vs height
  • margin collapse
  • «магические числа» vs var()/относительные единицы
  • !important и специфичность
  • overflow: hidden
  • чеклист качества раскладки

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Инструменты проверки и короткие примеры.

💻 Примеры

Пары «как ломается ❌ → как правильно ✅».

⚖️ Старый vs Новый

Хрупкая раскладка → устойчивая.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы и исправления.

🏠 Домашнее задание

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация