CSS: ГЛОБАЛЬНАЯ УСТАНОВКА BOX-SIZING

CSS: ГЛОБАЛЬНАЯ УСТАНОВКА BOX-SIZING

1. СВОЙСТВО BOX-SIZING
2. КАК ЗАДАЁТСЯ ЗНАЧЕНИЕ СВОЙСТВА BOX-SIZING
3. НАСЛЕДОВАНИЕ СВОЙСТВА BOX-SIZING
4. ГЛОБАЛЬНАЯ УСТАНОВКА box-sizing + мини-сброс (Вариант 1)
5. ГЛОБАЛЬНАЯ УСТАНОВКА box-sizing + мини-сброс (Вариант 2)
6. «Авторитетное сравнение»
7. Сравнение вариантов
8. Заключение
9. Как это работает
10. Итог
11. Суперитог

box-sizing (читается «бокс-сайз») — свойство, определяющее способ подсчёта браузером итоговых размеров блочного элемента. На практике существуют два основных значения, полностью исключающие друг друга: content-box и border-box:

1. СВОЙСТВО BOX-SIZING

• content-box

Значение «box-sizing» по умолчанию, мерим содержимое (content):
«Размер блока» = content.

• border-box

Складываем размеры содержимого: (content) + внутренние отступы (padding) + толщина рамки (border).
«Размер блока» = content + padding + border.
То есть border-box учитывает размеры блока по внешнему краю элемента.

2. КАК ЗАДАЁТСЯ ЗНАЧЕНИЕ СВОЙСТВА BOX-SIZING

Явно

content-box или border-box.

Наследование от родителя

inherit.

Сброс к начальному значению

initial (вернёт значение по умолчанию: box-sizing: content-box).

3. НАСЛЕДОВАНИЕ СВОЙСТВА BOX-SIZING

По умолчанию

Свойство box-sizing не наследуется.

Явное наследование

box-sizing: inherit; — наследует значение родителя при явном указании этого параметра.

Особенности наследования

Сделанное однажды наследование свойства box-sizing: inherit; нельзя остановить или отменить — лишь изменить для потомков.
Иными словами, механизм inherit невозможно отключить. В CSS нет правила или команды, которая отключает наследование box-sizing: inherit;, как, например, text-decoration: none;.

4. ГЛОБАЛЬНАЯ УСТАНОВКА box-sizing + мини-сброс. Вариант 1

/* Глобальная установка box-sizing + мини-сброс
   Вариант 1 [inheritance-based] */

html {
  /* Задаём базовое значение:
     — Стартовое значение для всех элементов
     (с чего всё начинается) */ 
  box-sizing: border-box; 
}

/* Устанавливаем наследование */
*, *::before, *::after {
  margin     : 0;
  padding    : 0;
  /* Каждый элемент берёт значение
     box-sizing у родителя:
     и так — на каждом уровне */
  box-sizing : inherit; 
}

/* Все элементы наследуют box-sizing от корня html
   (в нашем случае: border-box).
   Если элементу ниже по тексту явно задать content-box,
   это значение будет наследоваться всеми его потомками
   до нового явного изменения (переназначения).

 • Так работает вторая строка нашего кода:
   *, *::before, *::after { box-sizing: inherit; } */

5. ГЛОБАЛЬНАЯ УСТАНОВКА box-sizing + мини-сброс. Вариант 2

/* Глобальная установка box-sizing + мини-сброс
   Вариант 2 [direct assignment] */

*, *::before, *::after {
  margin     : 0;
  padding    : 0;
  /* Каждому элементу задаём значение сразу */
  box-sizing : border-box;
  /* Значение box-sizing задано каждому элементу,
     явно, напрямую и без наследования */
}

/* Все элементы получают box-sizing явно и напрямую
   (в нашем случае — border-box).
   Если элементу ниже явно задать content-box, это значение
   не будет наследоваться потомками,
   потому что для всех элементов применяется глобальное правило:
   *, *::before, *::after { box-sizing: border-box; }
   Поэтому любые отличные значения от базового (border-box)
   нужно задавать явно каждому элементу. */

6. «Авторитетное сравнение»

• Варианты 1 и 2 — полностью рабочие блоки кода глобальной установки свойства box-sizing, широко применяемые в современной верстке.
• Оба варианта — нормальные и рабочие. Делают одно и то же, но по-разному.

7. Сравнение вариантов

Вариант 1 (inheritance-based)

• Более гибкий.
• Удобен, если нужно локально менять box-sizing с наследованием: менять поведение в отдельных местах-цепочках, пачкой, для всех вложенных элементов.

Принцип работы: изменил значение у элемента-родителя → это значение пошло от родителя вниз ко всем вложенным дочерним элементам, пока не задали новое значение box-sizing (не переопределили).

Вариант 2 (direct assignment)

• Проще и жёстче.
• Подходит для большинства проектов без особых требований.
• Если изменили значение у элемента-родителя, это значение не наследуется дальше вниз. То есть действует исключительно для этого элемента.
• Если нужно то же самое у других элементов, включая дочерние, задаёшь каждому отдельно.

На практике чаще используют Вариант 1.

8. Заключение

Главное отличие вариантов 1 и 2: наследование свойства box-sizing по дереву DOM:

• Вариант 1: наследуется, передаёт значение потомкам (значение идёт вниз по элементам).
• Вариант 2: не наследуется, не передаёт значение потомкам — действует для текущего элемента (значение остаётся там, где задано).

9. Как это работает

Вариант 1 [inheritance-based] (наследование)

• Значение задано в корне html.
• Наследование есть.
• Значение передаётся ко всем элементам.
• Получается цепочка: родитель → потомки.
• Значение box-sizing задано в html и через inherit передаётся всем потомкам.
• Создаются цепочки: от родителя к дочернему элементу.

Вариант 2 [direct assignment] (напрямую)

• Значение задаётся сразу каждому элементу.
• Оно никуда не передаётся.
• Наследования нет.
• Каждый элемент живёт «сам по себе».
• Значение задаётся напрямую глобальным селектором *.
• Значение не передаётся вниз по DOM.
• Не создаются цепочки: от родителя к дочернему элементу.

10. Итог

• Вариант 1: значение задано и «течёт вниз» к дочерним элементам.
• Вариант 2: значение задаётся каждому отдельно и остаётся на месте. Вложенные элементы никак на него не реагируют.

11. Суперитог

Если сжать до предела:

• Вариант 1 — это про распространение: запускаешь значение в дерево, и оно живёт дальше.
• Вариант 2 — это про фиксацию: ставишь значение в точке, и оно там же заканчивается.

Главное различие между вариантами — это не способ задания свойства, а тип управления поведением внутри дерева.

Вариант 1 (inherit)

Ты управляешь не элементами, а потоками значений.

Любое изменение — это не просто точечная правка, а вмешательство в распространение значения.

Ты задаёшь не состояние элемента, а направление, по которому это состояние будет жить дальше.

Это означает:

• Элемент — не конечная точка.
• Элемент — участок-проводник значения.
• Любое изменение влияет, и на него, и на всё, что ниже.

В результате ты работаешь с системой как с связанной средой, где всё влияет друг на друга, в создаемых цепочках.

/* ──────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────── */ /* ──────────────────────────────────────────────────── */ /* АРХИВНЫЕ ТЕКСТЫ ┌─ Вариант 1 [inheritance-based] │• Наследование свойства есть. │• Наследование задано глобально, в строке: │ *, *::before, *::after { box-sizing: border-box; } │• Создаются цепочки наследования │ от родителя к потомку (дочернему элементу): │ — Значение box-sizing задаётся в корне html и наследуется: │ дочерний элемент берёт текущее значение у своего родителя через inherit, │ заданный глобально. │• Значение передаётся вниз по дереву └────────────────────── ┌─ Вариант 2 [direct assignment] │• Наследования свойства нет. │• Цепочек наследования не существует. │ — Значение box-sizing задаётся сразу всем элементам индивидуально, │ напрямую через глобальный селектор