Зміст курсу
Основи CSS
Основи CSS
Челендж: Спрогнозуйте Макет Сторінки
Завдання
Розгляньте наданий HTML-код і спрогнозуйте, як буде виглядати сторінка у браузері. Є три елементи <div>
, кожен з яких містить комбінацію вбудованого елемента та блочного елемента.
Питання для розгляду:
- Як будуть взаємодіяти вбудовані та блокові елементи всередині кожного
<div>
? - Як порядок елементів вплине на макет?
- Якою буде візуальна ієрархія вбудованих і блокових елементів всередині кожного
<div>
?
- Як будуть взаємодіяти вбудовані та блокові елементи всередині кожного
<div>
?- У першому та другому
<div>
елемент<span>
(вбудований) з'являється перед текстом (блочний). - У третьому
<div>
елемент<span>
знаходиться посередині тексту (на рівні блоку).
- У першому та другому
- Як порядок елементів вплине на макет?
- У першому
<div>
текст "This is a block-level element.", швидше за все, з'явиться під вбудованим елементом через те, що за замовчуванням контейнер<div>
працює як блочний. - У другому
<div>
порядок елементів змінено на протилежний, тому текст, швидше за все, з'явиться над вбудованим елементом. - У третьому
<div>
текст і вбудований елемент чергуються, тому в макеті текст і вбудований елемент можуть відображатися послідовно.
- У першому
- Якою буде візуальна ієрархія вбудованих і блокових елементів всередині кожного
<div>
?- Інлайн-елемент (
<span>
), найімовірніше, відображатиметься в рядку з текстом у всіх випадках, але його позиція може змінюватися залежно від порядку елементів всередині<div>
.
- Інлайн-елемент (
index
index
index
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 3. Розділ 10