Що станеться при додаванні наступного селектора? * { box-sizing: border-box; }

Повне пояснення

1. Що це і навіщо. box-sizing визначає, як браузер розраховує ширину і висоту елемента. Значення border-box включає padding та border у загальну ширину/висоту, що робить розміри елементів передбачуваними.

2. Ключові принципи, терміни, інваріанти.

   • content-box (за замовчуванням): ширина/висота = content + padding + border.
   • border-box: ширина/висота = content + padding + border (тобто padding і border не збільшують розміри).
   • inherit – успадковує значення від батьків.

3. Як це працює (життєвий цикл, алгоритм). При рендерингу браузер спочатку визначає розміри контенту, потім додає padding і border згідно з box-sizing. Якщо встановлено border-box, розмір елемента не змінюється після додавання padding/border.

4. Практика і реалізація.

   * {
     box-sizing: border-box;
   }
   

   Це часто використовується в reset‑стилях, щоб уникнути «підвищення» розмірів елементів під час додавання внутрішніх відступів.

5. Тестування. У Jest/Testing Library можна перевірити, що елемент має правильну ширину:

   const el = screen.getByText('Header');
   expect(el).toHaveStyle({ boxSizing: 'border-box' });
   

6. Оптимізація продуктивності. Встановлення border-box на всіх елементах зменшує кількість обчислень layout‑у, оскільки браузер не треба повторно розраховувати ширину після зміни padding/border.

7. Accessibility. Немає прямого впливу на доступність, але стабільні розміри полегшують читання і навігацію.

8. Безпека та валідація. Немає безпосереднього впливу на XSS чи CSP; це лише CSS‑правило.

9. Типові помилки й edge cases.

   • Забудьте про html, body; вони теж повинні мати border-box, інакше scrollbar може збільшити ширину.
   • Якщо використовуєте calc() у властивостях width/height, переконайтеся, що вони враховують border-box.

10. Cheatsheet + можливі follow‑up питання.

• Як змінити box-sizing лише для певних елементів?
• Чому деякі бібліотеки (наприклад, Bootstrap) використовують border-box в reset‑стилях?
• Які наслідки має зміна box-sizing після завантаження сторінки?