14. Блокова модель

Курси веб розробки онлайн: блокова модель

Курси веб розробки онлайн – це серія безплатних освітніх статей про програмування. Кожен елемент CSS укладений у блок, і розуміння роботи цих блоків необхідно для задання розкладки за допомогою CSS, тобто вибудовувати одні елементи щодо інших елементів. У цьому уроці, курси веб розробки онлайн, ми детально розглянемо блокову модель CSS, щоб ви могли створювати складніші розкладки, розуміючи принцип її роботи та термінологію, яка до неї відноситься.

Блокові та рядкові елементи

У CSS є два типи елементів – блокові та рядкові. Ці характеристики стосуються поведінки блоків у контексті потоку сторінки та щодо інших блоків на сторінці.

Якщо елемент визначений як блоковий, то він поводитиметься таким чином:

• Почнеться з нового рядка.
• Розширюватиметься вздовж рядка таким чином, щоб заповнити весь простір, доступний у його контейнері. У більшості випадків це означає, що блок стане такою ж шириною, як і його контейнер, заповнюючи 100% доступного простору.
• Застосовуватимуться властивості width і height.
• Зовнішні та внутрішні відступи, рамки будуть відсувати від нього інші елементи.

Якщо не змінити навмисно тип відображення на рядковий, то такі елементи, як заголовки (наприклад, <h1>) і <p>, всі використовують block як свій зовнішній тип відображення за умовчанням.

Якщо елемент має тип відображення inline (рядковий), то:

• Він не буде починатися з нового рядка.
• Властивості width та height не будуть застосовуватись.
• Вертикальні зовнішні та внутрішні відступи, рамки будуть застосовуватись, але не будуть відсувати інші рядкові елементи.
• Горизонтальні зовнішні та внутрішні відступи, рамки будуть застосовуватись та відсуватимуть інші рядкові елементи.

Елемент <a>, використовується для посилань<span>, <em> і <strong> — все це приклади за умовчанням рядкових елементів.

Тип відображення, що застосовується до елемента, визначається значеннями властивості display, такими як block та inline, і належать до зовнішнього значення display.

Типи відображення: внутрішній та зовнішній

З’ясуймо, що таке внутрішні та зовнішні типи зображення. Кожен блок CSS має зовнішній тип відображення, саме він визначає – блоковий або рядковий елемент.
Внутрішній тип відображення – визначає розташування елементів усередині них. За замовчуванням елементи всередині блоку розташовуються в нормальному потоці: вони поводяться так само як і будь-які інші блокові або рядкові елементи (писали про це вище).

Але ми можемо змінити внутрішній тип відображення, використовуючи такі значення display як flex. Якщо ми встановимо display: flex; для елемента зовнішній тип відображення прийме значення block, але внутрішній тип зміниться на flex. Будь-які прямі дочірні елементи цього блоку стануть flex-об’єктами та будуть розміщені відповідно до правил, викладених у специфікації Flexbox, про яку ви дізнаєтесь пізніше.

Коли ви перейдете до більш поглибленого вивчення CSS верстки, ви зустрінете flex та інші внутрішні значення, які можуть бути у ваших елементів, наприклад grid.

Однак, блокове і рядкове розташування – це поведінка web-елементів за умовчанням. Як було сказано вище, це іноді називають нормальним потоком (normal flow), тому що за відсутності будь-якої іншої інструкції елементи мають блокове або  рядкове розташування.

Приклади різних типів відображення: курси веб розробки онлайн

Продовжмо та розглянемо деякі приклади. Нижче ми маємо три різні елементи HTML із зовнішнім типом відображення block. Перший – це абзац, який має обрамлення, вказане в CSS. Браузер відображає його як блоковий елемент, тому абзац починається з нового рядка та розширюється на всю доступну йому ширину.

Другий – це список, який зверстаний з використанням display: flex. Це встановлює flex-розташування для елементів усередині контейнера, проте сам список – блоковий елемент та – як і абзац – розширюється на всю ширину контейнера і починається з нового рядка.

Нижче ми маємо абзац блокового типу, всередині якого є два елементи. Ці елементи за замовчуванням мають тип inline, однак один з них має клас block, для якого ми встановили display: block.

 

Ми можемо бачити, як рядкові елементи (inline) поводяться в наступному прикладі. Елементи <span> в першому абзаці рядкові за умовчанням і тому не призводять до перенесення рядка.

У нас також є елемент <ul>, для якого встановлено display: inline-flex, що створює рядковий елемент навколо декількох flex-об’єктів.

Зрештою, у нас є два абзаци, для яких встановлено display: inline. І рядковий flex-контейнер, і абзаци розташовуються разом на одному рядку, а не починаються кожен з нового рядка, як вони б відображалися, бувши блоковими елементами.

У прикладі можна замінити display: inline на display: block або display: inline-flex на display: flex для перемикання між цими двома режимами відображення.

У цьому уроці ви дізнаєтеся про таке поняття, як flex-розкладка; головне, що потрібно запам’ятати зараз, це те, що зміна значення властивості displaу може змінити зовнішній тип відображення елемента на блоковий або рядковий, що змінює спосіб його відображення щодо інших елементів у розкладці сторінки.

Далі у цій статті ми зосередимося на зовнішньому типі відображення. Курси веб розробки онлайн – це серія статей про програмування, що допоможе освоїти ази кодингу.

Блокова модель CSS

Повністю блокова модель CSS застосовується до блокових елементів,  елементи використовують не всі властивості, визначені блоковою моделлю. Модель визначає, як різні частини елемента – поля, рамки, відступи та вміст – працюють разом, щоб створити об’єкт, який ви можете побачити на сторінці. Додаткова складність полягає в тому, що існують стандартні та альтернативні блокові моделі.

Складові елементи

Складаючи блоковий елемент у CSS ми маємо:

• Вміст: область, де відображається ваш контент, розмір якої можна змінити за допомогою таких властивостей, як width та height.
• Внутрішній відступ: відступи розташовуються навколо вмісту як порожнього простору; їх розмір контролюється за допомогою padding та пов’язаних властивостей.
• Рамка: рамка обертає вміст та внутрішні відступи. Її розмір та стиль можна контролювати за допомогою border та пов’язаних властивостей.
• Зовнішній відступ: зовнішній шар, що містить вміст, внутрішній відступ і рамки, являє собою простір між поточним та іншими елементами. Його розмір контролюється за допомогою margin та пов’язаних властивостей.

Малюнок нижче показує ці шари:

Стандартна блокова модель CSS

У стандартній блоковій моделі, якщо вказати елементу атрибути width і height, це визначить ширину та висоту вмісту. Будь-які відступи та рамки потім додаються до цієї ширини та висоті для отримання загального розміру елемента. Це показано на зображенні нижче.

Припустимо, що елемент має наступний CSS визначальний width, height, margin, border, і padding:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Простір, що займається нашим об’єктом з використанням стандартної блокової моделі, насправді буде дорівнює 410px завширшки (350 + 25 + 25 + 5 + 5) і 210px у висоту (150 + 25 + 25 + 5 + 5), оскільки відступи та рамки додаються до розмірів поля вмісту.

Відображення розміру елемента під час використання стандартної блокової моделі.

Зверніть увагу: Зовнішній відступ не рахується у фактичному розмірі об’єкта. Звичайно, він впливає на загальний простір, який займає об’єкт на сторінці, але тільки на зовнішню частину. Область елемента закінчується на рамці вона не поширюється за неї.

Альтернативна блокова модель CSS

Може здатися, що незручно додавати рамки та відступи, щоб отримати реальний розмір елемента, і матимете рацію! З цієї причини, через деякий час після стандартної блокової моделі, CSS була введена альтернативна блокова модель. При використанні альтернативної моделі будь-яка ширина — це ширина видимої частини елемента на сторінці, тому ширина області вмісту дорівнюватиме загальній ширині мінус ширина рамки та внутрішнього відступу. Той же CSS, який використовувався вище, дасть наступний результат (ширина = 350px, висота = 150px).

Відображення розміру елемента під час використання альтернативної блокової моделі.

За замовчуванням браузери використовують стандартну блокову модель. Якщо ви бажаєте використати альтернативну блокову модель для елемента, встановіть для нього властивість box-sizing: border-box. За допомогою цього ви кажете браузеру про те, що рамка елемента визначається будь-якими розмірами, які ви встановлюєте.
.box {


box-sizing: border-box;


}

Якщо ви хочете, щоб усі ваші елементи використовували альтернативну блокову модель, що є поширеним вибором серед розробників, встановіть властивість box-sizing для елемента <html>, потім задайте всім елементам успадкування цього значення (inherit), як показано нижче.
html {


box-sizing: border-box;


}
*, *::before, *::after {


box-sizing: inherit;


}


• Цікавий факт — Internet Explorer за умовчанням використав альтернативну блокову модель без доступного механізму перемикання.

Використання інструментів розробника у браузері для перегляду блокових моделей

Інструменти розробника вашого браузера можуть полегшити розуміння блокової моделі. Якщо ви перевірите елемент в інструментах розробника Firefox, ви можете побачити його розмір, а також зовнішній та внутрішній відступи та рамку. Перевірка елемента в такий спосіб — відмінний спосіб з’ясувати, чи розмір вашого блоку дійсно такий, який ви думаєте!

Перевірка блокової моделі елемента за допомогою інструментів розробника Firefox

Зовнішні, внутрішні відступи та рамки

Ви вже бачили властивості margin, padding та border у роботі у наведеному вище прикладі. Які використовуються в цьому прикладі властивості – скорочені та дозволяють нам встановлювати всі чотири сторони блоку одночасно. У них також є повні еквівалентні властивості, які дозволяють індивідуально керувати різними сторонами блоку. Розгляньмо це більшее детально.

Зовнішній відступ (margin)

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

Ми можемо контролювати всі поля елемента відразу, використовуючи властивість margin, або кожну сторону індивідуально, використовуючи повні еквівалентні властивості:

• margin-top
• margin-right
• margin-bottom
• margin-left

У прикладі нижче, якщо ви зміните значення margin, то побачите як блок зміщується, створюючи або видаляючи простір (якщо вводити негативні значення margin) між цим елементом та елементом, що його містить.

 З’єднання  зовнішніх відступів

Ключовий момент, який слід розуміти щодо зовнішніх відступів (margin), це концепція з’єднання. Якщо у вас є два елементи, зовнішні відступи яких стикаються, і обидва значення margin позитивні, ці значення будуть об’єднані в одне, рівне більшому з двох значень. Якщо ж одне чи обидва значення негативні, то сума негативних значень буде віднято від загальної суми.

У прикладі нижче є два абзаци. Першому абзацу задано margin-bottom 50 пікселів. У другому абзаці margin-top 30 пікселів. Відступи з’єднаннуються так, що в результаті margin між двома блоками становить 50 пікселів, а не суму окремих значень margin.

Ви можете перевірити це, встановивши другий абзац margin-top рівний 0. Видима відстань між двома абзацами не зміниться – відступ залишається дорівнює 50 пікселям, заданим в margin-bottom першого абзацу. Якщо ви встановите значення -10px, то побачите, що margin стає 40px – відбувається віднімання з позитивного значення 50px першого абзацу.

Існують правила, які визначають, коли зовнішні відступи схлопуються, а коли ні. Головне, що потрібно зараз вивчити, — те, що схлопування відступів існує. Якщо ви створюєте простір із зовнішніми відступами та не отримуєте очікуваного результату, ймовірно, саме це відбувається.

Рамка

Рамка розташована між margin та padding блокового елемента. Якщо ви використовуєте стандартну блокову модель, розмір рамки додається до значень width та height елемента. Якщо ви використовуєте альтернативну блокову модель, то розмір рамки зменшує поле контенту свого блоку, через те, що значення рамки входять до заданих width і height.

Для стилізації рамок існує багато різних властивостей: чотири рамки, і кожна з них має свій стиль, ширину і колір, якими ми можемо маніпулювати. Курси веб розробки онлайн – читайте більше у наших статтях.

Ви можете встановити ширину, стиль або колір усіх чотирьох рамок відразу, використовуючи властивість ліміту.

Для встановлення індивідуальних властивостей для кожної з чотирьох сторін ви можете використовувати:

• border-top (en-US)
• border-right (en-US)
• border-bottom
• border-left (en-US)

Для встановлення ширини, стилю або кольору всіх рамок використовуйте:

• border-width
• border-style (en-US)
• border-color (en-US)

Для встановлення ширини, стилю або кольору для кожної рамки індивідуально можна використовувати такі властивості:

• border-top-width (en-US)
• border-top-style (en-US)
• border-top-color (en-US)
• border-right-width (en-US)
• border-right-style (en-US)
• border-right-color (en-US)
• border-bottom-width (en-US)
• border-bottom-style (en-US)
• border-bottom-color (en-US)
• border-left-width (en-US)
• border-left-style (en-US)
• border-left-color (en-US)

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

Внутрішній відступ padding

Внутрішній відступ розташований між рамкою та областю контенту блоку. На відміну від зовнішніх відступів (margin), ви не можете використовувати негативні значення для padding: вони повинні бути позитивними або рівними 0. Будь-який фон, що застосовується до ваших елементів, буде відображатися під областю padding, тому внутрішній відступ зазвичай використовується, щоб відсунути контент від рамок.

Ви можете контролювати значення padding для всіх сторін елемента, використовуючи властивість padding або для кожної сторони індивідуально, використовуючи наступні повні властивості:

• padding-top (en-US)
• padding-right
• padding-bottom (en-US)
• padding-left

Якщо ви зміните значення padding для класу .box у прикладі нижче, побачите, що це змінює положення тексту всередині елемента.

Ви також можете змінити padding для класу container, який задає відступ між контейнером і блоком. Внутрішній відступ може бути змінений для будь-якого елемента та створить простір між його рамкою та вмістом.

Блокова модель та малі елементи

Все, сказане раніше, повністю застосовується до блокових елементів. Деякі з властивостей можуть бути також застосовані та до малих (inline) елементів, наприклад до <span>.

У наведеному нижче прикладі у нас є <span> всередині абзацу, і ми застосували до його width, h8, margin, border та padding. Ви можете бачити, що ширина та висота ігноруються. Вертикальні зовнішні та внутрішні відступи та рамки застосовані, але вони не змінюють положення інших елементів щодо нашого рядкового елемента, і тому відступи та рамка перекривають інші слова в абзаці. Горизонтальні зовнішні та внутрішні відступи та рамки застосовані та змушують інші елементи відсунутися від нашого.

Використання display: inline-block

Існує особливе значення display, яке являє собою золоту середину між inline та block. Це корисно в ситуаціях, коли ви не хочете, щоб елемент переносився на новий рядок, але потрібно, щоб він застосовував width і height і уникав перекриття, показаного вище.

Елемент із display: inline-block застосовує ряд властивостей блочного елемента, про які ми вже знаємо:

• Застосовуються властивості width та height.
• Використання padding, margin та border призведе до того, що інші елементи будуть відсунуті від нашого елемента.

Він не перенесеться на новий рядок і стане більше, ніж його вміст, тільки якщо ви явно поставите властивості width і height.

У наступному прикладі ми додали display: inline-block до нашого елементу. Спробуйте змінити значення властивості display: block або повністю видалити рядок, щоб побачити різницю.

Це буде вам корисно, коли ви хочете створити посилання з великою областю влучення, додавши padding. – <a> це малий елемент, такий самий як <span>; ви можете використовувати display: inline-block, щоб дозволити застосування відступів, що спростить користувачеві перехід за посиланням.

Часто це можна побачити в панелях навігації. Наведена нижче навігація відображається у вигляді рядка з використанням flexbox і ми додали відступи до елемента <a>, тому що хочемо, щоб background-color змінювався при наведенні курсору на <a>. Відступи перекривають рамку елемента <ul>. Це тому, що — рядковий елемент.

Додайте в правило display: inline-block за допомогою селектора .links-list a, і ви побачите, як він розв’язує цю проблему, змушуючи інші елементи дотримуватися відступів.

Підсумки

Це основна інформація, що вам необхідна про блочну модель, більше ви можете дізнатися прийшовши на курси веб розробки онлайн. Якщо ви зіткнетеся з нерозумінням розміру блоків у вашій розкладці сторінки – поверніться до цього уроку ще раз. А перевірити свої знання за цим уроком ви можете пройшовши тест вгорі сторінки. Пройшовши тест – не забудь обмінювати сертифікат на коїни у нас у школі!