Распаковка основ модели CSS Box

1656660015 raspakovka osnov modeli css

Брайан Смит

1*1ch1pHZSb3YDog3PlZ7oFQ

Понимание модели CSS Box является решающим для того, чтобы понять, как элементы размещаются на странице. В простейших терминах модель коробки выглядит следующим образом: поле, предел, отступление и содержимое. Но что это значит? Как совмещаются эти слова?

Приветствуй.

В публикации на этой неделе мы сразу перейдем к этому, чтобы вы почувствовали себя мастером модели Box. Стилизируйте элементы и добавляйте им соответствующий интервал влево и вправо (и сверху и снизу… понимаете? Потому что вы располагаете свои элементы на странице?… извините за плохие шутки).

Посмотрите на это визуальное распределение, предоставленное Chrome Console:

0*fL7IZ5XJwHsQth-a
Вы можете увидеть это изображение, щелкнув правой кнопкой мыши свою страницу в Chrome (или выбранном браузере), нажав Проверить, чтобы открыть консоль разработчика, выбрав вкладку Стили и прокрутив вниз до самого низа.

Вы видите, что каждая часть модели коробки обозначена для вас, кроме содержимого – это синее поле посередине. Давайте разберем принцип работы каждой части и уникальные отличия между ними.

Маржа

Вы можете рассматривать поле в качестве буфера для вашего элемента. Хотите немного пространства вокруг своей стихии? Вот для чего существует маржа. Представим, что вы простужены. Вам следует (надеюсь) держаться подальше от людей, чтобы не распространять это вокруг. Вам нужен запас вокруг вас. Посмотрите на это изображение, чтобы проиллюстрировать:

0*oN7zT5zI3B4lfjED

Заметили, как ваши друзья разбежались от вас, а вы окружены апельсинами? Это маржа в действии. Вы остаетесь такого же размера, но есть зона запрета для всех вещей вокруг вас. То же касается элементов на вашей странице. Поле даст вам место вокруг вашего элемента и разделит вещи. Проще говоря, margin создаст невидимый промежуток вокруг вашего элемента, не влияя непосредственно на его размер. В этом примере мы сделали его оранжевым, чтобы дать вам визуальную подсказку о том, где он находится по отношению к содержимому (в данном случае – вы больны).

Граница

Граница – это второе свойство из внешнего края вашего элемента. Как вы уже догадались, предел используется для определения визуального края вашего элемента. Рамка увеличит презентационный размер вашего элемента или части, которая визуально видна на экране. Поле все еще может быть задействовано, но оно будет на внешнем краю границы. Давайте еще раз взглянем на то, как вы больны, но на этот раз с небольшой границей:

0*0SJmRV2kv6hOH4uw

Он выглядит почти идентично предыдущей демо-версии маржи, за исключением того, что теперь вокруг него есть черный ящик. Это наша граница. Следует помнить, что наше содержимое (больной эмодзи) теперь имеет размер эмодзы плюс рамки с обеих сторон.

Ладно, достаточно о больных эмодзе. Поговорим о подложке.

Подкладка

Набивка – третий элемент из внешнего края. И, как и поле и рамка перед ним, абсолютно необязательно. Самое важное, о чем следует помнить, пытаясь найти разницу между полем и отступлением, это то, что отступление УВЕЛИЧАЕТ презентационный размер вашего элемента.

Представим, что ваша старушка присылает вам подарок на день рождения. Она упаковывает его и отправляет по почте. Теперь, поскольку ваша бабушка не хочет, чтобы ваш подарок был испорчен при отправке вам, она действительно добавляет к упаковке. Вот визуальное изображение того, что я имею в виду:

0*4BcD7TiSsoCxd2fo

Вы получаете подарок и предполагаете, что бабушка сделала все возможное и подарила вам 60-дюймовый телевизор.

неправильно.

Она просто добавила немного подкладки (видите, что я там сделала?) в коробку, благодаря чему она занимала больше места и казалась больше.

Позвольте привести вам подходящий пример кодировки. Вы создаете a <div> 100 пикселей в ширину на 100 пикселей в высоту. Вы добавляете 10 пикселей отступа к каждому краю, а теперь that

имеет 120 пикселей в ширину на 120 пикселей в высоту благодаря добавленному отступу с каждой стороны. Имейте в виду, когда вы размещаете элементы своей страницы.

Содержание

Содержание, содержание, содержание. Из этого состоит наша страница. Содержимое – это то, как вы сначала описываете его в своем CSS или его естественную высоту, если вы используете изображение. Вы создали a <div> это 50 пикселей в ширину на 300 пикселей в высоту? Именно столько неподвижного пространства на вашем экране займет, если оно не будет изменено ни одной из вышеупомянутых частей коробочной модели. Контент – это подарок, который вам подарила бабушка, это больные эмодзы.

Размер коробки

Я был бы ошибочен, если бы не вспомнил box-sizing: border-box прямо сейчас. Я не хочу слишком глубоко погружаться в его специфику, но есть свойство CSS под названием box-sizing что по умолчанию content-box за его ценность. Посмотрите на этот CodePen, чтобы продемонстрировать. Дети не уважают родительский контейнер, исходя из него.

А теперь с той властью, которая есть box-sizing: border-box:

Дети теперь находятся внутри родителей (и, вероятно, занимаются своими делами и возвращаются домой к комендантскому часу). CSS совершенно одинаков в каждой демонстрации, за исключением одного небольшого дополнения к другой:

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

Эти три строки кода указывают каждому элементу на нашей странице вычислять свою ширину и высоту с добавлением рамок и отступов, тогда как первая демонстрация была свободным беспорядком, не уважавшим никого и ничего. Отступ и граница были приложены к ширине и вышли за пределы родительского контейнера.

Завершая это все

Коробочная модель является фундаментальной для понимания того, как вещи будут размещаться на вашей странице. Надеемся, теперь вы хорошо понимаете, как работает Box Model и как вы можете использовать его в свою пользу. Я также надеюсь, что это означает, что больше не нужно вводить margin: 10px;…[wait for page changes…delete, delete, delete] padding: 10px…”.

Первоначально опубликовано на www.frontamentals.com.

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

Ваш адрес email не будет опубликован.