Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Челендж: Спрогнозуйте Макет Сторінки | Бокс Модель та Відстань між Елементами
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

bookЧелендж: Спрогнозуйте Макет Сторінки

Завдання

Розгляньте наданий HTML-код і спрогнозуйте, як буде виглядати сторінка у браузері. Є три елементи <div>, кожен з яких містить комбінацію вбудованого елемента та блочного елемента.

Питання для розгляду:

  1. Як будуть взаємодіяти вбудовані та блокові елементи всередині кожного <div>?
  2. Як порядок елементів вплине на макет?
  3. Якою буде візуальна ієрархія вбудованих і блокових елементів всередині кожного <div>?
  1. Як будуть взаємодіяти вбудовані та блокові елементи всередині кожного <div>?
    • У першому та другому <div> елемент <span> (вбудований) з'являється перед текстом (блочний).
    • У третьому <div> елемент <span> знаходиться посередині тексту (на рівні блоку).
  2. Як порядок елементів вплине на макет?
    • У першому <div> текст "This is a block-level element.", швидше за все, з'явиться під вбудованим елементом через те, що за замовчуванням контейнер <div> працює як блочний.
    • У другому <div> порядок елементів змінено на протилежний, тому текст, швидше за все, з'явиться над вбудованим елементом.
    • У третьому <div> текст і вбудований елемент чергуються, тому в макеті текст і вбудований елемент можуть відображатися послідовно.
  3. Якою буде візуальна ієрархія вбудованих і блокових елементів всередині кожного <div>?
    • Інлайн-елемент (<span>), найімовірніше, відображатиметься в рядку з текстом у всіх випадках, але його позиція може змінюватися залежно від порядку елементів всередині <div>.
html

index

css

index

js

index

copy
Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 10
some-alt