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

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

Теперь дело в том, что, как я уже сказал, каждый элемент по умолчанию является встроенным, но у них не слишком много встроенных элементов, все, что мы видим, складываются друг в друга, что означает, что они являются блоками. ХОРОШО, наш веб-браузер фактически загружает таблицу стилей по умолчанию на каждый веб-сайт, который мы посещаем, который переопределяет значение по умолчанию, делая большинство элементов блокированными. здесь ссылка на таблицу стилей, которую использует WebKit (движок, используемый Chrome). Таблица стилей пользовательского агента Webkit. у каждого браузера есть своя собственная таблица стилей CSS по умолчанию.

Мы можем увидеть невидимый блок модели бокса, если мы дадим им цвет. Но это еще не вся часть. В блочной модели есть еще кое-что, объясняющее размер элемента на основе его свойств CSS нашего бокса. Блок фактически состоит из нескольких слоев: Content, Padding, Border и Margin.

  • Содержание - содержимое поля, в котором отображаются текст и изображения.
  • Отступ: очищает область вокруг содержимого. Заполнение прозрачное. Как правило, имеет тот же цвет, что и тело элемента.
  • Граница - граница, охватывающая отступы и контент.
  • Маржа: очищает область за пределами границы. Маржа прозрачная.

Теперь, если у нас есть 2 элемента друг над другом, скажем, с заполнением 50 пикселей, тогда между двумя элементами (50 пикселей + 50 пикселей) будет общий зазор в 100 пикселей из-за заполнения. Поэтому, если мы заменим поле на Padding, поле не будет увеличиваться вдвое, иначе верхнее поле (A), перекрывающее поле элемента B, сделает общее промежуточное поле всего 50 пикселей.

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

Рассмотрим 2 коробки шириной 50%. если мы добавим к нему Padding, общая ширина превысит 100%, и это испортит макет, и поэтому нам нужны свойства Box-Sizing.

Существует 3 основных типа свойств размера коробки.

  • Content-Box - это начальное значение и значение по умолчанию, указанное в стандарте CSS. Свойства width и height включают содержимое, но не включают заполнение, границу или поле. Например, .box {width: 350px; border: 10px solid black;} отображает поле шириной 370 пикселей.
  • Padding-Box - свойства width и height включают содержимое и отступы, но не включают границу и поля. Обратите внимание, что заполнение будет внутри коробки. Например, .box {width: 350px; padding: 10px ;} отображает блок шириной 350 пикселей. Поле содержимого не может быть отрицательным и имеет нулевое значение.
  • Border-Box - свойства width и height включают содержимое, отступы и границу, но не включают поля. Обратите внимание, что отступ и граница будут внутри поля. Например, .box {width: 350px; border: 10px solid black;} отображает поле шириной 350 пикселей. Поле содержимого не может быть отрицательным и имеет значение 0, что делает невозможным использование border-box для исчезновения элемента.

Как правило, используются только Content-Box и Border-Box, поэтому большинство браузеров даже не поддерживают Padding-Box.

Красная линия между изображениями представляет значение ширины элементов. Обратите внимание, что элемент со значением по умолчанию box-sizing: content-box; превышает заявленную ширину, когда отступ и граница добавляются за пределы поля содержимого, в то время как элемент с примененным box-sizing: border-box; полностью помещается в заявленную ширину.

Хотя Context-Box является свойством по умолчанию, но герой CSS - Border-Box. Свойство box-sizing: Border-box изменит модель окна и переместит применяемые отступы и значение границы внутри поля содержимого, убедившись, что ширина, которую вы устанавливаете, соответствует ширине, которую вы получаете, нет математики чтобы вычислить фактическую ширину, например, в поле содержимого или заполнения. Я считаю, что всегда лучше использовать поле с рамкой, но, поскольку поле содержимого используется по умолчанию, вы можете добавить этот код CSS, чтобы преобразовать все размеры поля в поле границы.

Ссылки

Первоначально опубликовано на https://klassynihal.github.io/blog/A-Noobs-Guide-For-CSS-Box-Model 27 сентября 2018 г.