🎨

Модуль 2. CSS и оформление

Занятие 15
Блочная модель

Сегодня мы сделаем аккуратную карточку и поймём, из каких «слоёв» состоит каждый блок на странице.

👀

Сегодня сделаем вот такое

📦

Всё на странице — коробки

Заголовок, абзац, картинка, ссылка — прямоугольные коробки.

Справа — страница с «рентгеном»: обведён каждый элемент.

Понял коробку — сверстаешь что угодно.

<h1>Мой сайт</h1>
<p>Абзац с <a href="#">ссылкой</a> и <strong>важным</strong> словом.</p>
<img src="/images/cat.svg" alt="Кот" width="90">
* { outline: 2px solid tomato; }
body { font-family: sans-serif; }
🎁

Коробка как посылка

  1. 🎁 content — подарок (width, height)
  2. 🫧 padding — пузырчатая плёнка
  3. 📦 border — стенки коробки
  4. ↔️ margin — расстояние до соседних посылок
<div class="box">content</div>
body { background: #dfe6e9; font-family: sans-serif; }
.box {
  width: 160px;
  padding: 30px;
  border: 8px solid #e17055;
  margin: 40px;
  background: #ffeaa7;
  text-align: center;
}
🫧

padding или margin?

🫧 padding
воздух внутри
фон его закрашивает
↔️ margin
расстояние снаружи
всегда прозрачный
<p class="pad">Большой padding</p>
<p class="mar">Большой margin</p>
p { background: #74b9ff; border: 2px solid #0984e3; }
.pad { padding: 30px; }
.mar { margin: 30px; }
🕛

Сокращённая запись

  • padding: 20px — все стороны
  • padding: 10px 20px — верх/низ · лево/право
  • padding: 5px 10px 15px 20px — по часовой ⏰ с 12 часов
  • margin: 0 auto — по центру
🖼

Рамка и размеры

  • border: 3px solid #ff9f43 — толщина · стиль · цвет
  • Стили: solid dashed dotted double
  • max-width: 600px — «не шире чем»
  • height лучше не задавать
<p class="a">solid</p>
<p class="b">dashed</p>
<p class="c">dotted</p>
<p class="d">border-left</p>
p { padding: 8px; max-width: 260px; }
.a { border: 4px solid #6c5ce7; }
.b { border: 4px dashed #00b894; }
.c { border: 4px dotted #e17055; }
.d { border-left: 10px solid #fdcb6e; }
🧮

Магия box-sizing

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

Без border-box
350px 😵
С border-box
300px 😊

* { box-sizing: border-box; } — в начало каждого CSS.

🃏

Собираем карточку

  1. Ширина и белый фон
  2. padding — воздух внутри
  3. border — рамка
  4. margin: 30px auto — по центру
  5. Картинка — на всю ширину
<div class="card">
  <img src="/images/cat.svg" alt="Кот">
  <h2>Кот Барсик</h2>
  <p>Любит спать на клавиатуре.</p>
</div>
* { box-sizing: border-box; }
body { background: #f1f2f6; font-family: sans-serif; }
.card {
  width: 240px;
  margin: 20px auto;
  padding: 16px;
  border: 3px solid #ff9f43;
  background: white;
}
.card img { width: 100%; }
🃏

Запомни!

  • width / heightШирина / высота
  • padding: 16pxВнутренний отступ
  • border: 2px solid #333Рамка: толщина, стиль, цвет
  • margin: 20px autoВнешний отступ, auto — по центру
  • background: #fffФон
  • box-sizing: border-boxУдобный подсчёт размеров
⌨️

Практика: Карточка с отступами и рамкой

  1. Задай карточке ширину 300px и белый фон.
  2. Добавь внутренний отступ 20px и рамку 3px.
  3. Выровняй карточку по центру с помощью margin: 40px auto.
  4. Картинке внутри задай width: 100%.
  5. Открой F12 и найди, где padding, а где margin.

🚀 Со звёздочкой: Сделай три карточки разного цвета. Проверь, как ведут себя margin двух соседних блоков по вертикали (они «схлопываются»).

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

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Нарисуй блочную модель в тетради и подпиши все четыре слоя.