Відкриваємо блочну модель

p { display: block; }

p { display: inline; }

p { display: inline-block; }

div { display: none; }

div { border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; }

<code>margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

<code>margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

<code>Ширина: 492px=20px + 6px + 20px + 400px + 20px + 6px + 20px Висота: 192px=20px + 6px + 20px + 100px + 20px + 6px + 20px</code> заплутаних елементів HTML та CSS. Ми встановлюємо значення властивості <span class="attribute">width</span> як 400 пікселів, але фактична ширина елемента 492 пікселя. За замовчуванням блокова модель коробка адитивна. Таким чином, для визначення фактичного розміру блоку ми повинні взяти до уваги поля, межі та відступи для всіх чотирьох сторін блоку. Наша ширина включає не тільки значення властивості <span class="attribute">width</span>, але й розмір лівого та правого поля, ліву та праву межу, ліві та праві відступи.</p>
<p>Поки багато хто з цих властивостей не мають великого сенсу і це нормально. Для уточнення давайте поглянемо на всі ці властивості <span class="attribute">width</span>, <span class="attribute">height</span>, <span class="attribute">padding</span> , <span class="attribute">border</span> та <span class="attribute">margin</span>, які формують блокову модель.</p> 
<h3>width і height</h3>
<p>У кожного елемента є ширина та висота за замовчуванням. Ця ширина і висота дорівнюють нулю, але браузери за замовчуванням відображають кожен елемент з розміром. Залежно від того, як відображається елемент, ширина та висота за замовчуванням може бути відповідною. Якщо елемент є ключовим у макеті сторінки, для нього може знадобитися задати певні значення властивостей <span class="attribute">width</span> та <span class="attribute">height</span>. У цьому випадку значення властивостей для немаленьких елементів можуть бути зазначеними.</p> 
<h4>width</h4>
<p>За замовчуванням ширина елемента заснована на значенні <span class="attribute">display</span>. У блокових елементів ширина за замовчуванням 100% і займає весь доступний горизонтальний простір. Рядкові та рядково-блочні елементи розширюються та стискаються горизонтально для розміщення їх вмісту. Рядкові елементи не можуть мати фіксований розмір, таким чином ширина і висота відносяться тільки до не малих елементів. Щоб задати певну ширину для немаленьких елементів, використовуйте властивість <span class="attribute">width</span>:</p> <pre class="sh_css">div { width: 400px; }

div { height: 100px; }

div { margin: 20px; }

div { padding: 20px; }

Установка margin та padding

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

Властивості margin і margin, щоб встановити одне значення для всіх чотирьох сторін елемента, ми задаємо одне значення:

div { margin: 20px; }

Щоб встановити одне значення для верхньої та нижньої сторони, а інше значення для лівої та правої сторони елемента, вкажіть два значення: спочатку зверху та знизу, потім ліворуч та праворуч. Тут для <div> ми ставимо відступи 10 пікселів зверху і знизу та 20 пікселів ліворуч і праворуч:

div { margin: 10px 20px; }

Щоб встановити унікальні значення для всіх чотирьох сторін елемента, вкажіть ці значення в наступному порядку: зверху, праворуч, знизу та зліва, рухаючись за годинниковою стрілкою. Тут ми ставимо для <div> відступи 10 пікселів зверху, 20 пікселів праворуч, 0 пікселів знизу і 15 пікселів зліва.

div { margin: 10px 20px 0 15px; }

Використання властивості margin або padding з будь-яким числом значень вважається скороченням. У звичайному записі ми можемо встановити значення лише однієї сторони використовуючи унікальні властивості. Після імені кожної з властивостей (margin або padding у даному випадку) йде дефіс та сторона блоку, до якої має застосовуватися значення: top , right, bottom або left. Наприклад, властивість padding-left приймає лише одне значення та встановить ліве поле для цього елемента, властивість margin-top приймає лише одне значення і встановить верхній відступ для цього елемента.

div { margin-top: 10px; padding-left: 6px; }

Коли ми хочемо визначити лише одне значення margin або padding, то краще використовувати звичайний запис. Це зберігає наш код наочним і допомагає уникнути плутанини на шляху вниз. Наприклад, ви дійсно хочете встановити margin в 0 зверху, праворуч і зліва елемента або ж насправді хочете встановити margin знизу в 10 пікселів? Використання звичайного запису для властивостей та значень допомагає нам це робити осмислено. З іншого боку, коли маєш справу з трьома або більше значеннями, скорочення неймовірно корисне.

Кордони

Кордони розташовуються між відступами і полями, створюючи рамку навколо елемента. Для властивості border потрібно три значення: ширина, стиль та колір. Скорочений запис для border задається в цьому ж порядку — ширина, стиль, колір. У звичайному записі ці три значення можуть бути розбиті за властивостями border-width, border-style та border-color. Звичайний запис корисний для зміни або переписування окремого значення кордону.

Ширина та колір меж можуть бути визначені за допомогою звичайних одиниць розміру та кольору CSS, як описано в уроці 3.

У меж може бути різний зовнішній вигляд. Найбільш поширені значення solid, double, dashed, dotted і none, але є й кілька інших на вибір.

От код для суцільного сірого кордону завтовшки 6 пікселів для всіх чотирьох сторін <div>:

div { border: 6px solid #949599; }

Кордони для окремих сторін

Як і з властивостями margin та padding межі можуть бути розміщені на одній стороні елемента за раз за бажанням. Це вимагає нових властивостей: border-top, border-right, border-bottom та border-left. Значення цих властивостей такі ж, як і для border: ширина, стиль і колір. При бажанні можна зробити так, щоб межа з'являлася тільки внизу елемента: div { border-bottom: 6px solid #949599; }

Крім того, стилями для окремих сторін можна керувати ще більш тонкому рівні. Наприклад, якщо ми хочемо змінити тільки ширину нижньої межі, то можемо використовувати наступний код: div { border-bottom-width: 12px; }

Таке досить специфічне властивість кордону включають ряд розділених дефісом слів, що починаються з border, потім йде обрана сторона — top, right, bottom або left, а потім width, style або color , залежно від бажаної властивості.

Радіус кордону

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

Властивість border-radius приймає одиниці розміру, у тому числі відсотки та пікселі, які визначають радіус заокруглення кутів елемента. Єдине значення закруглює всі чотири кути елемента рівною мірою; два значення закруглюють лівий верхній/правий нижній та правий верхній/лівий нижній кути у такому порядку; чотири значення закруглюють лівий верхній, правий верхній, правий нижній і лівий нижній кути в такому порядку.> (заодно до margin і padding), пам'ятайте, що вони йдуть за годинниковою стрілкою, починаючи з лівого верхнього кута елемента.

div { border-radius: 5px; }

Властивість border-radius також може бути розбитий ряд властивостей, які дозволяють нам змінити радіуси окремих кутів елемента. Ці властивості починається з border, продовжуються з положення кута по вертикалі (top або bottom) та горизонталі (left або right) та завершуються radius. Наприклад, для зміни правого верхнього кута <div> може бути використана властивість border-top-right-radius.

div { border-top-right-radius: 5px; }

Розміри блоку

Досі блокова модель була адитивною. Якщо ви встановили для width 400 пікселів, потім додали 20 пікселів padding та border 10 пікселів кожної стороні, фактична повна ширина елемента стає 460 пікселів. Пам'ятайте, ми повинні скласти значення властивостей width, padding та border разом, щоб отримати реальну повну ширину елемента.

Блочна модель, однак, може бути змінена, щоб обчислення відбувалися інакше. CSS3 ввів властивість box-sizing, яка дозволяє нам точно змінювати, як блокова модель працює і як обчислюються розміри елемента. Ця властивість приймає три основні значення — content-box, padding-box і border-box, кожне з яких надає дещо різний вплив на обчислення розміру блоку.

content-box

Значення content-box є значенням за замовчуванням, залишаючи блокову модель як адитивну. Якщо ми не використовуємо властивість box-sizing, це буде значення за промовчанням для всіх елементів. Розмір елемента починається з властивостей width та height, далі до них додаються значення властивостей padding, border або margin .

div {-webkit-box-sizing: content-box;-moz-box-sizing: content-box; box-sizing: content-box; }

padding-box

Значення padding-box змінює блокову модель шляхом включення всіх значень властивості padding всередині width та height елемента. При використанні значення padding-box, якщо елемент width дорівнює 400 пікселів і paddingpadding на будь-яке значення розмір вмісту всередині елемента стискається пропорційно.

Якщо ми додамо border або margin, ці значення будуть додані до властивостей width або height для обчислення повного розмір блоку. Наприклад, якщо ми додамо border 10 пікселів та padding 20 пікселів навколо всіх сторін елемента, у якого width 400 пікселів, фактична повна ширина буде 420 пікселів.

div { box-sizing: padding-box; }

border-box

Нарешті, значення border-box змінює блокову модель так, щоб будь-які значення властивостей border або padding включалися всередині width та height елемент. При використанні значення border-box, якщо для елемента вказано width 400 пікселів, padding 20 пікселів та border 10 пікселів навколо всіх сторін, фактична ширина залишиться 400 пікселів.

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

div { box-sizing: border-box; }

Мал. 4.03. Різні значення box-sizing дозволяють по-різному обчислювати ширину елемента і блоку повністю

Вибір розміру блоку

Взагалі, найкраще значення box-sizing для використання — це border-box. Це значення набагато спрощує нам математику. Якщо ми хочемо, щоб весь елемент був 400 пікселів завширшки, він залишиться 400 пікселів завширшки, незалежно від того, які значення padding або border ми до нього додаємо.

Крім того, ми можемо легко змішувати значення довжини. Скажімо, ми хочемо, щоб наш блок займав 40% завширшки. Додавання padding 20 пікселів та border 10 пікселів для всіх сторін елемента не складно і ми, як і раніше, можемо гарантувати, що фактична ширина нашого блоку залишиться 40%, незважаючи на використання пікселів в іншому місці.

Єдиний недолік якості box-sizing в тому, що як частина специфікації CSS3 вона не підтримується всіх браузерах особливо не вистачає підтримки в старих версіях. На щастя, це стає менш актуальним, оскільки виходять нові версії. Швидше за все, ми можемо безпечно використовувати властивість box-sizing, але якщо ви помітили якісь проблеми, варто подивитися з яким браузером вони пов'язані.

Інструменти розробника

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

Щоб побачити Інструменти розробника в Google Chrome, відкрийте меню, виберіть "Додаткові інструменти", а потім "Інструменти розробника". Після цього відкриється панель в нижній частині вікна браузера, яка пропонує кілька інструментів для перевірки нашого коду. .

Після вибору елемента ми побачимо кілька вкладок у правій частині панелі «Elements» в інструментах розробника. Вибір вкладки «Computed» покаже нам докладну блокову модель для нашого вибраного елемента.

Пограйте з інструментами розробника, будь вони в Google Chrome, Mozilla Firefox, Apple Safari або в інших браузерах; можна багато дізнатися переглядаючи наш код. Я взагалі залишаю панель інструментів завжди відкритими під час написання HTML та CSS. Також часто перевіряю код інших сайтів, щоб побачити, як вони зроблені.

Мал. 4.04. Інструменти розробника Google Chrome, які допомагають нам перевіряти HTML та CSS на будь-якій сторінці

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

На практиці

Давайте перестрибнемо назад до нашому сайту Styles Conference до центральної частини сторінки і додамо ще трохи вмісту.>, яка спростить встановлення всіх наших елементів. У нашому файлі main.css, трохи нижче скидання, додамо коментар, щоб визначити код для створення нашої сітки та макету сайту. Ми покладемо все це нижче за скидання, щоб вони йшли в правильному порядку в каскаді.

Звідси ми можемо використовувати універсальний селектор *, поряд з універсальними псевдоелементами *:before та *:after для вибору всіх мислимих елементів та зміни box-sizing на border-box. Пам'ятайте, що ми збираємось включити вендорні префікси для властивості box-sizing, оскільки це відносно нова властивість.

 /*========================================Сітка========================================*/*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; }

.container { margin: 0 auto; padding-left: 30px; padding-right: 30px; width: 960px; }