Міністерство освіти і науки України

Черкаський національний університет імені Богдана Хмельницького

Навчально-науковий інститут інформаційних та освітніх технологій
Кафедра автоматизації та комп’ютерно-інтегрованих технологій

Дисципліна: «Основи веб технологій»

ЗВІТ до лабораторної роботи № 8

CSS: Display and Positioning

Виконав: студент 2-В курсу

Герасімов Денис Сергійович
Викладач: К. С. Дєєв

Черкаси – 2023
1. HTML потік

2. Позиція
3. Відносне позиціонування

4. Абсолютне позиціонування
5. Фіксоване абсолютне позиціонування

6. Липке позиціонування
7. Шари

8. Строчне відображення
9. Блочне відображення

10. Строчно-блочне відображення

11. Плаваючі об'єкти

12. Перетин елементів

 ВИСНОВОК
Я вивчав тему Display and Positioning в CSS, щоб краще розуміти,
як розміщувати та показувати елементи на веб-сторінці. Ця тема
дозволила мені контролювати макет та розташування елементів на
сторінці, надаючи мені більшу гнучкість у створенні зовнішнього
вигляду веб-додатків.

Під час вивчення Display, я ознайомився з різними значеннями

цього властивості, такими як `block`, `inline`, `inline-block`, `flex` та
`grid`. Кожне з цих значень має свої особливості та вплив на те, як
елементи відображаються на сторінці. Наприклад, елемент зі
значенням `block` займає весь доступний горизонтальний простір
та переходить на новий рядок, тоді як елемент зі значенням `inline`
займає тільки необхідний простір та не переходить на новий рядок.

Крім властивості Display, я також вивчав різні способи

позиціонування елементів за допомогою властивості Position. Це
включає значення `static`, `relative`, `absolute` та `fixed`. Кожне з цих
значень визначає спосіб, яким елементи розміщуються відносно
своїх батьківських елементів або відносно вікна перегляду.
Наприклад, елемент зі значенням `absolute` позиціонується
відносно найближчого батьківського елемента з позицією `relative`,
а елемент зі значенням `fixed` залишається на фіксованій позиції
незалежно від прокрутки сторінки.

Вивчаючи ці концепції, я також практикував їхнє застосування,

створюючи різні макети та вирішуючи різні завдання з розміщенням
елементів на сторінці. Це дало мені більшу впевненість у контролі
розміщення елементів та покращило мої навички у веб-розробці.
Застосування правильних значень Display та Position може
покращити як вигляд, так і функціональність веб-сторінки,
дозволяючи створювати зручний та ефективний інтерфейс для
користувачів.