Поняття потоку на сторінці

HTML документ являє собою живий документ. Навіть без будь-якого застосування CSS, HTML-документ вже містить свої власні правила:
  • мінливість: як вміст адаптується до розмірів браузера; 
  • черговість: порядок, в якому з'являються елементи; 
  • накладення: як елементи з'являються один над одним. 
Це природна поведінка є логічною.

В HTML вміст - це король. Всі блокові елементи є гнучкими. Вони природним чином адаптують свою компоновку, щоб пристосувати внутрішній вміст:
  • width: 100% : Блок буде займати всю доступну ширину. 
  • Перенесення слів.  Якщо вбудований вміст в блоці не поміщається на одному рядку, воно буде продовжено на новому рядку. 
  • height: auto. Висота блоку змінюється автоматично, щоб вона відповідала розміру його вмісту.
Елементи HTML відображаються в тому порядку, в якому вони записані в коді. Перший в коді - перший в браузері.

Кожен блок з'являється в тому порядку, в якому він з'являється в коді HTML, зверху вниз.

У браузера є три виміри.

Кожен елемент HTML належить уявному шару.

Порядок накладення залежить від того, як елементи вкладені одна в одий: дочірні елементи з'являються поверх своїх батьків.

Кожен вкладений елемент з'являється поверх свого батька.
Чим глибше він по ієрархії, тим вище в накладенні.


Хоча поведінка браузера за замовчуванням є ефективною, цього може не вистачити для потреб вашого дизайну.

Деякі властивості CSS дозволяють порушити потік:
  • height і width можуть поміняти властивість елементу;
  • float порушує поведінку елемента, а також його оточення;
  • значення absolute і fixed у властивості position видаляють елемент з потоку;
  • z-index може змінювати порядок накладення елементів

    1 коментар: