Что такое боксовая модель, из чего она состоит и какие существуют её виды?

Боксовая модель (CSS Box Model) — это абстрактная сущность, описывающая, как элементы HTML представляются на странице в виде прямоугольных блоков. Она определяет размеры и расположение содержимого, внутренних отступов, границ и внешних отступов элемента.

Боксовая модель состоит из следующих частей:

• Content: Содержимое элемента (текст, изображения и т.д.). Его размер определяется свойствами width и height.
• Padding: Пространство между содержимым элемента и его границей. Определяется свойствами padding-top, padding-right, padding-bottom, padding-left или сокращенным свойством padding.
• Border: Граница вокруг внутреннего отступа и содержимого. Определяется свойствами border-width, border-style, border-color или сокращенным свойством border.
• Margin: Пространство между границей элемента и внешними элементами. Определяется свойствами margin-top, margin-right, margin-bottom, margin-left или сокращенным свойством margin.

Существуют два основных вида боксовой модели, определяемые свойством box-sizing:

• content-box (значение по умолчанию): Ширина и высота элемента, заданные свойствами width и height, относятся только к области содержимого. Padding и Border добавляются к этим размерам, увеличивая общий размер элемента.

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* Добавляет 20px к общему размеру по каждой оси */
    border: 2px solid black; /* Добавляет 4px к общему размеру по каждой оси */
    box-sizing: content-box; /* Поведение по умолчанию */
  }
  /* Общий размер элемента будет 124px на 124px */
  

• border-box: Ширина и высота элемента, заданные свойствами width и height, включают в себя содержимое, padding и border. Padding и Border не увеличивают общий размер элемента, а "сжимают" область содержимого.

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* Включается в общую ширину/высоту */
    border: 2px solid black; /* Включается в общую ширину/высоту */
    box-sizing: border-box;
  }
  /* Общий размер элемента будет 100px на 100px */
  

Чаще используется border-box для более предсказуемого поведения размеров элементов при добавлении padding и border. Это удобно, например, при создании адаптивных макетов, где элементы должны занимать определенную процентную ширину.