Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Смотрите полный скринкаст и расшифровку стенограммы здесь .
Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), начиная с буквы алфавита. Мы знаем, что иногда скринкастов просто недостаточно, в этой статье я добавил новый быстрый совет / урок о свойстве box-model для вас.
B для box-model
Каждый элемент на веб-странице представляет собой поле. Свойства коробки можно описать как модель box-model . В этом совете я расскажу вам о «новом и улучшенном» подходе к настройке размеров блока, чтобы он без проблем работал во всем проекте. Это включает в себя работу с шириной, высотой, полем, отступом и рамкой поля.
Если вы решили использовать box-sizing: border-box на вашем сайте (вы должны это сделать), вы можете столкнуться с проблемами при добавлении виджетов / плагинов, которые используют стандартную модель определения размеров content-box .
Чтобы обойти любые проблемы с отображением, используйте следующий фрагмент вместо * { box-sizing: border-box } :
html { box-sizing: border-box; }*, *:до после { Размер коробки: наследовать; }
В настоящее время это считается наилучшей практикой для применения box-sizing блоков в проекте, хотя с постоянно меняющимся характером фронт-энда, кто знает, как долго это может продолжаться!
Если вы хотите узнать больше об этом совете, ознакомьтесь со следующими статьями: