Блокова модель. Позиціонування

Лабораторна робота №7.

Тема: Блокова модель. Позиціонування.

Мета: Формування вмінь використовувати технологію CSS  при використанні блокової моделі.

Питання для вивчення:

1. Блокова модель у CSS. Поняття блоку.
2. Структура блоку (властивості margin, border, padding).
3. Вкладені блоки.
4. Види схем позиціонування у CSS.
5. Нормальний потік.
6. Відносне позиціонування.
7. Абсолютне позиціонування.
8. Плаваючі блоки.
9. Фіксовані блоки.

Завдання:

1. Вибрати два довільних абзаци неформатованого тексту.
2. У середовищі HTML-kit оформити цей текст у вигляді двох блоків, для яких указати розміри, відступи, поля, рамки.
3. У створений перший блок вставити картинку, яка займає 40% від загального розміру блоку.
4. Титульну сторінку курсової роботи представити у вигляді:

Контрольні запитання

1. Що таке блок у технології CSS?
2. Яку структуру має блок?
3. Для чого призначена властивість margin?
4. Для чого призначена властивість border? Які має значення?
5. Для чого призначена властивість padding?
6. Як створити вкладені блоки?
7. Що таке позиціонування у технології CSS?
8. Для чого призначена властивість position? Які має значення?
9. У чому полягає суть позиціонування в нормальному потоці?
10. У чому полягає суть відносного позиціонування?
11. У чому полягає суть абсолютного позиціонування?
12. Яка принципова різниця між відносним та абсолютним позиціонуванням?
13. Як у HTML-документ додати плаваючі блоки?
14. Для чого використовуються фіксовані блоки?