Основні переваги:
Контейнери можна розмістити де завгодно на сторінці та помістити в них що завгодно.
Контейнер дозволяє здійснювати підвантаження вмісту.
Контейнери та відповідні теги є офіційно стандартизовані W3C і всіма браузерами відображаються однаково.
HTML – код контейнера досить компактний і формується одним парним тегом <DIV>.
Всі браузери відображають вміст контейнера прямо в процесі завантаження, візуально це досить швидко.
Недоліком контейнера є те, що з їх допомогою важко організувати сторінки складної структури (таблицями легше), оскільки для цього потрібно створювати складені контейнери з перехресними стилями.
Розглянемо параметри контейнера, що визначаються атрибутами стилю.
Ширина і висота:
width: auto | <size> | inherit
height: auto | <size> | inherit
Мінімальні розміри:
min-width: <size>
min-height: <size>
Вирівнювання (задає тип вирівнювання елемента відносно батьківського, весь інший вміст сторінки обтікає кнтейнер):
Float: left | right | none | inherit
Якщо задати однаковий атрибут float для декількох послідовних елементів, то вони розмістяться один під одним відносно краю батьківського елемента. Такий атрибут застосовують для контейнерів, що формують дизайн сторінки і називають їх плаваючими.
Розміщення знизу (щоб однозначно розмістити контейнер під тими, що були вирівнянні по краю батьківського елемента, наприклад для копірайту):
Clear: left | right | both | none | inherit
Якщо задати контейнеру конкретні розміри, то може виникнути ситуація, коли вміст сторінки повністю не поміститься в цей контейнер. Виникає переповнення контейнера. Його поведінка при цьому залежить від атрибутів, які ми задамо.
Overflow: visible | hidden | scroll | auto | inherit
Цей атрибут має смисл лише тоді, коли коли розміри контейнера мають абсолютне значення.
Аналогічно визначаються атрибути Overflow-x та Overflow-y, що визначають поведінку контейнера при переповненні по горизонталі та вертикалі відповідно.
У сучасному дизайні як правило, використовують контейнери з прокруткою.
Контрольні запитання
Що таке каскадна таблиця стилів?
Що таке прив’язка? Які її види?
Де описують таблицю стилів?
Які правила створення стилів?
Які є види стилів? Опишіть кожен з них.
У чому відмінність іменованого стилю від стильового класу?
Які правила написання комбінованих стилів?
Що таке зовнішня та внутрішня таблиця стилів?
Наведіть правила каскадності стилів.
Що таке контейнер?
Які є види контейнерів? Опишіть їх.
Які переваги та недоліки контейнера?
Перерахуйте параметри контейнерів. Які атрибути їх описують?
Що таке переповнення контейнера? Які можливості для його усунення?