CSS от А до Я: блочная модель и свойство box-sizing

CSS от А до Я: блочная модель и свойство box-sizing

От автора: приветствую вас в нашей серии уроков 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 разработки постоянно меняется, и никто не знает, как долго данный подход будет считаться лучшим!

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree