CSS від А до Я: блокова модель і властивість box-sizing

30

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з властивістю box-model.

B значить box-model

Кожен елемент на сторінці являє собою блок. Блокова модель є властивостями даного блоку. У цьому уроці я розповім вам про новий поліпшений спосіб налаштування розмірів блоку, який можна буде застосовувати на весь проект. Ми будемо працювати з властивостями margin, padding, width, height і border.

Якщо ви за основу блокової моделі сайту взяли (повинні взяти) значення box-sizing: border-box, то у вас можуть виникнути проблеми при додаванні плагінів і віджетів, в яких за замовчуванням стоїть модель content-box. Щоб уникнути проблем з відображенням, використовуйте замість * { box-sizing: border-box } код нижче:

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Цей шматок коду вважається найкращою практикою застосування блокової моделі box-sizing на всьому сайті. Однак природа front-end розробки постійно змінюється, і ніхто не знає, як довго даний підхід буде вважатися кращим!