Блочна верстка: що це і навіщо вона потрібна?

Блочна верстка: що це і навіщо вона потрібна?

Верстка починає свій шлях з тих часів, коли код писався в HTML, а розмітка виконувалася за допомогою таблиць. З часом від цього відійшли, а розмітку переклали на CSS. Зараз існує кілька способів верстки. Сучасними можна вважати Flex-box, набір інструментів Bootstrap, а також останні Grids, що дають величезні можливості творцям. Одним з перехідних варіантів у становленні Web-а є блочна верстка. Раніше використовувалася для створення розмітки всієї сторінки, нині вона вважається застарілою, але тим не менш все ще знаходить широке застосування в приватних випадках.

Що є блочною версткою?

Вона замінила собою застарілу і недосконалу табличну. Сторінка складається з так званих шарів, або блоків, а цеглинками для цього є тег, що закривається < div >. Це блочний тег, що займає всю ширину батьківського елемента і висоту за розміром контенту. Пізніше таку верстку стали називати "дивна" ". Основою для орієнтування на сторінці є так звані класи.


На даний момент такий тип верстки значно застарів, а сам тег < div > повинен використовуватися тільки за призначенням. З 'явилася маса семантично правильних тегів, які полегшують орієнтування в коді. Наприклад, для навігаційного меню існує спеціальний тег < nav >.

Для наочності блочну верстку можна уявити наступним чином:

<div class=""wrapper"">

< div class = "" element1 "> контент </div >

< div class = "" element2 "> контент </div >

< div class = "" element3 "> контент </div >


</div>

Div з класом wrapper являє собою батьківський контейнер або, іншими словами, обгортку. Елементи з класом element - це своєрідні "" цеглинки "" нашої складної структури. Зверніть увагу, що різний порожній край, порівняно з батьківським елементом, використовується в коді для наочності, щоб легше було визначити структуру та ієрархію елементів.

Використання таблиць

Таблична верстка сайтів довгий час була головним болем всіх програмістів. Після переходу на блочну модель сайтів деякий час не віталося використання таблиць взагалі, навіть за прямим призначенням.

Такий підхід, безумовно, є недоцільним і навіть шкідливим. Він змушує прості речі виконувати більш складними і незручними шляхами. Зараз же таблиця використовується тільки для відображення відповідних даних. Іншими словами - за прямим її призначенням.

Розділення ролей

Якщо раніше всю побудову виконували на HTML, блочна верстка принесла з собою повний поділ ролей. Зараз HTML є лише для розмітки, логічного форматування та створення каркасу сторінки. Стилі ж повністю винесені і входять в окремий файл, що з 'єднується в документ. Для розміщення елементів і створення привабливого і чуйного дизайну служить CSS. Для звернення до блоку використовуються класи, яким задається назва елемента. Наприклад, для блоку заголовка ми призначимо клас header. Це також дозволяє легше орієнтуватися в коді. Зараз же це частково виконують спеціалізовані теги, що з 'явилися в HTML5.

Використання блоків < div >

Активно використовується тег < div >. Він схожий з цеглою при будівництві будівлі. Складаючи основу, конструкцію сайту, він, тим не менш, не є єдиним. Подібно до дверей, вікон, вентиляції, балкону тощо, для верстки використовуються й інші елементи HTML. Це посилання, форми, зображення, списки та таблиці.

Використання тега < div > дозволило зробити код більш компактним і наочним. Перехід до блочної верстки дозволив позбавити html від зайвого, а саме від стилів. Дав можливість повністю прибрати перевантажену і складну для орієнтування табличну верстку.


Активно використовує CSS блочна верстка. За допомогою доступних інструментів можна створити будь-яку побудову сторінки з точністю до пікселю. Така верстка називається pixel perfect. Вона передбачає ідеальний збіг сайту з макетом. На фото, представленому вище, видно, що і з блочною версткою не все так просто. Перший час без таблиць обійтися було просто неможливо. Вони використовувалися для створення основної побудови сторінок, а блоки застосовувалися для окремих елементів. Так було до тих пір, поки не навчилися задавати блокам висоту.

Гідності

Блочна верстка сайту має такі переваги:

  • Немає прозорих меж шириною в пікселі, як було при верстці таблицями.
  • Блоки легко позиціонувати відносно один одного.
  • Блоки можуть змінювати розмір, що дозволяє створювати адаптивний дизайн.
  • Можливість накладатися один на одного не порушує побудову сторінки, але дозволяє додавати цікаві ефекти.

Подальший розвиток

Наразі блочна верстка div є застарілою і знаходить лише обмежене застосування, тільки як приватний випадок для певних ситуацій. На зміну їй у верстку прийшло позиціонування і обтікання. Вони мали масу недоліків, але в цілому дозволяли більше, ніж блочна верстка.

Далі з 'явилася побудова за допомогою рядково-блочних елементів. Це суттєво полегшило роботу програмістів. Цей спосіб володіє перевагами обох типів блоків і дозволяє створювати більш чуйний і адаптивний дизайн. Варто зазначити, що всі ці способи так чи інакше складалися з елемента div, що і дало назву "" дивна верстка "".

Зараз для побудови сторінки використовуються Flex-box і bootstrap. Вони помітно зменшують код і дозволяють швидше і простіше створювати якісний адаптивний дизайн. Дають можливість переміщати блоки, не ламаючи всю сторінку.


На вістрі прогресу стоїть нова технологія - Grids. Вона дозволяє дуже швидко і легко створювати дизайн будь-якої складності. А блоки, обтікання, позиціонування, як свого часу відбулося з таблицями, використовуються тільки за прямим призначенням.