Блочна модель
У CSS блокова модель описує прямокутні блоки, які утворюються для елементів, розміщених на сторінці.
По суті, все це прямокутник.
Вигляд блокової моделі
>Деякі цікаві факти:
- border-radius скруглює зовнішні куточки цього блоку;
- box-shadow додає тінь до цього блоку;
- outline та box-shadow не є частиною блоку і, відповідно, не впливають на макет.
Розміри блоку
Властивість box-sizing дозволяє вам трохи управляти моделлю, яка використовується для завдання розмірів блоків. Два можливі значення — це content-box і border-box.
content-box
За замовчуванням. При обчисленні розміру блоку додаються padding та border.
border-box
При обчисленні розміру блоку padding та border не враховуються.
Приклад
Обидва блоки містять однаковий CSS, але в одного значення box-sizing встановлено як content-box, а іншого — border-box.
.box { height: 5em; width: 5em; padding: 1em; border: .25em solid }Вигляд блоків з різним значенням box-sizing показаний нижче.
У випадку border-box ширина та висота .box рівні 5em, саме те, що ми поставили. У випадку content-box ширина та висота дорівнюють 7.5em = 5+(2*1)+(2*.25), оскільки ми додаємо padding та border з кожної сторони.
Еластичні поля введення
Однією з переваг застосування border-box — це можливість встановити відступи та ширину в різних одиницях, без крайніх випадків . Одним із фантастичних прикладів використання цього є створення еластичних полів введення з фіксованим padding.
У наведеному нижче прикладі, у input заданий певний padding в одиницях em і при цьому ми ще можемо вказати ширину у відсотках (padding: .4em .55em і width: 100%, відповідно).
input[type="text" ;] { /* Еластичність */
box-sizing: border-box; width: 100%; /* Стилізація */
padding: .4em .55em; font-size: inherit; font-family: inherit; color: inherit; border: 0; border-radius: .25em; outline: none }Блок
width: <span class="example-flexible-input-slider-value">75%</span>
Налаштуйте ширину блоку та стежте за розмірами самого поля, яке чудово розташовується всередині блоку, зберігаючи фіксований padding.
Резюмую
Якщо ви хочете отримати висоту та ширину, яка веде себе інтуїтивно зрозумілим чином, послухайте Пола Іріша і вставте це у верхню частину свого CSS:
*, *:before, *:after {-webkit-box-sizing: border-box; /* Потрібно для мобільного WebKit */
-moz-box-sizing: border-box; /* Потрібно для Firefox */
box-sizing: border-box; }