TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Підручник з моделі CSS Box

67

CSS – чудовий інструмент для веб -дизайну. Популярність досягається не тільки простотою використання, але й надійними функціональними можливостями. CSS впливає на кожен окремий елемент веб -сторінки. Тому кожен веб -дизайнер, будучи основним розробником простих дизайнерів макетів, повинен знати основи CSS. Модель Box у CSS є базою для визначення макетів та позиціонування елементів на сторінці. У цій статті ми детально вивчимо основи моделі коробки CSS. Крім того, ми також розглянемо, як аналізувати модель коробки елемента у браузері.



Що таке модель CSS Box?

При використанні CSS кожен елемент HTML на веб -сторінці розглядається як прямокутне поле. Отже, це поняття називають коробчатою моделлю. Це допомагає легко визначити макет веб -сторінки та розташувати елементи відповідно до ваших потреб. У коробковій моделі вміст HTML -елемента розміщується в центрі, за яким слідують відступи, рамки та поля, як показано нижче:

Підручник з моделі CSS Box

Елемент моделі CSS Box

  • Поля – це область навколо кордону і завжди прозора. Мета поля – забезпечити необхідний простір між елементами та від країв браузера.
  • Кордон – це видима лінія навколо вмісту та області заповнення. Зазвичай він використовується для надання контуру елементу і може мати будь -який колір і ширину.
  • Заповнення – пробіл між фактичним вмістом та облямівкою називається заповненням. Якщо у вмісті є видимі лінії кордону, доцільно мати деякі відступи. Це допоможе створити простір між вмістом та рамкою.
  • Вміст – фактичний вміст, такий як текст та зображення між тегами HTML.

Пов’язані: Підручник з одиниць CSS для початківців.

Приклад елемента моделі коробки

Давайте зробимо простий приклад створення абзацу в тегах div, щоб пояснити концепцію моделі коробки. CSS має виглядати так:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; } </style>

Зверніть увагу, що код CSS для поля та заповнення містить розміри для верхнього, лівого, нижнього та правого відповідно.

А HTML для вставлення вмісту із зазначеним вище CSS:

<div class="box-model"> <p>This is a test content to explain how CSS box model will look like. This is a paragraph with different padding, different margin and border of 10px.</p> </div>

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

Підручник з моделі CSS Box

Перегляд моделі елемента CSS Box у браузері IE 11

Як перевірити модель CSS Box у веб -переглядачі?

Непогано подивитися на теорію на практиці. Ви можете побачити модель блоку CSS прямо з вашого веб -браузера. Тут ми показуємо знімок екрана за допомогою браузера Google Chrome. Метод залишається незмінним для всіх інших браузерів, таких як Firefox, Edge і Safari.

  • Відкрийте будь -яку веб -сторінку та клацніть правою кнопкою миші елемент, який потрібно вивчити.
  • Ви можете клацнути правою кнопкою миші будь -який текст, зображення, відео або порожнє місце.
  • Виберіть опцію «Перевірити елемент», щоб відкрити консоль розробника.
  • Він має ліву панель для перегляду HTML та праву панель для перегляду CSS.
  • Ви можете побачити модель блоку CSS вибраного елемента на вкладці «Макет» правої панелі.
  • Посилаючись на наведений вище приклад коду – усі межі, поля та відступи будуть відповідати точним розмірам, визначеним у CSS.

Зверніть увагу: ви можете переглянути розмітку HTML елемента у веб -переглядачі Google Chrome на вкладці "Елементи". Відповідну модель CSS та коробки можна побачити на вкладці «Стилі», як показано на малюнку нижче.

Підручник з моделі CSS Box

Перегляд моделі елемента CSS Box у веб -переглядачі Chrome

Розрахунок ширини і висоти елемента в моделі CSS Box

Тепер, коли ви зрозуміли концепцію моделі коробки CSS. Щоразу, коли визначається висота та ширина елемента, загальна ширина та загальна висота цього елемента повинні включати поля, відступи та ширину кордону. Додамо висоту та ширину до наведеного вище прикладу коду CSS:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; width: 300px; height: 200px; } </style>

Пов’язані статті:


Тепер будь-який елемент, який викликає стиль класу CSS “box-model", повинен розміщуватися з наступною загальною шириною та загальною висотою.

  • Загальна висота = висота + верхнє поле + нижнє поле + верхнє відступ + нижнє заповнення + ширина кордону = 200 + 30 + 5 + 10 + 10 + 10 = 265 пікселів.
  • Загальна ширина = ширина + ліве поле + праве поле + ліве поле + праве поле + ширина кордону = 300 + 15 + 5 + 0 + 5 + 10 = 335 пікселів.

Повний макет сторінки буде розроблено з урахуванням загальної ширини та загальної висоти розмірів кожного елемента.

Джерело запису: www.webnots.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі