В этой статье разберем одно свойство box-sizing и как его можно задействовать на интернет ресурсе или тематическом блоге. Одним из свойств, которое запланировано для решения проблемы веб-дизайна, является свойство box-sizing, которое позволяет нам изменять блочную модель и настраивать ее в соответствии с нашими потребностями.
Ранее мы применяли размер рамки ко всем элементам сети с помощью универсального селектора * следующим образом:
Код
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
При этом нам удалось получить все элементы нашего сайта, чтобы иметь свойство border-box, и этот способ это хорошо, но он не самый лучший. Когда мы работаем с более крупными проектами, то целесообразно сделать это следующим образом.
Код
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Чтобы вы могли понять, почему эта практика лучше, чем использование универсального селектора *. Так как ранее упоминалось, если мы работаем с более крупными проектами, более вероятно, что вы добавите новые модули в качестве плагинов, у этих плагинов есть свои собственные стили CSS, и если любой из них предназначен для работы, у box-sizing нас будет проблема потому что мы установили размер коробки: border-box; будет применяться ко всем элементам.
Эта практика эффективна, где было бы лучше если бы вы использовали ее во всех проектах, если только работаете в небольших проектах, то более вероятно, что вы не будете ее использовать.
