Оразмеряване на кутия - CSS-трикове

Anonim

В box-sizingимота в CSS контролира колко модел кутия се обработва за елемента който се отнася.

.module ( box-sizing: border-box; )

Един от най-често срещаните начини да го използвате е да го приложите към всички елементи на страницата, включително псевдо елементи:

*, *::before, *::after ( box-sizing: border-box; )

Това често се нарича „универсално оразмеряване на кутията“ и това е добър начин за работа! (Буквалният), widthкойто сте задали, е ширината, която получавате, без да се налага да извършвате умствена математика и да управлявате сложността, която идва от ширините, идващи от множество свойства. Тук дори имаме ден за информираност с големи размери.

Стойности

  • content-box: по подразбиране. Стойностите на ширината и височината се отнасят само за съдържанието на елемента. Подплатата и границата се добавят към външната страна на кутията.
  • padding-box: Стойностите на ширината и височината се отнасят за съдържанието на елемента и неговите подложки. Границите се добавят към външната страна на кутията. Понастоящем само Firefox поддържа padding-boxстойността.
  • border-box: Стойностите на ширината и височината се отнасят за съдържанието, подложките и контурите.
  • inherit: наследява размера на кутията на родителския елемент.

Пример

Това примерно изображение сравнява стандартното content-box(отгоре) с border-box(отдолу):

Червената линия между изображенията представлява стойността на ширината на елементите. Забележете, че елементът по подразбиране box-sizing: content-box;надвишава декларираната ширина, когато подложката и рамката се добавят към външната страна на полето за съдържание, докато приложен елементът box-sizing: border-box;се вписва напълно в декларираната ширина.

Използване на размера на кутията

Да приемем, че сте задали елемент на width: 100px; padding: 20px; border: 5px solid black;. По подразбиране полученото поле е с ширина 150px. Това е така, защото моделът за оразмеряване на полето по подразбиране е content-box, който прилага декларираната ширина на елемента само към съдържанието му, поставяйки подложката и границата извън кутията на елемента. Това ефективно увеличава колко място заема елементът.

Ако промените box-sizingв padding-boxпълнежът се изтласква в кутията на елемента. След това кутията ще бъде широка 110px, с 20px подложка отвътре и 10px граница от външната страна. Ако искате да поставите подложката и границата вътре в кутията, можете да използвате border-box. Тогава кутията ще бъде широка 100px - 10px на границата и 20px подложка се вкарват в кутията на елемента.

Демонстрация

Вижте Сравнението на писалката на стойностите за оразмеряване на кутии от CSS-трикове (@ css-трикове) на CodePen.

Свързани

  • width
  • height
  • padding
  • border

Поддръжка на браузър

Chrome Сафари Firefox Опера IE Android iOS
Всяка * † 3 * † 1 ‡ 7 * 8 * 2.1 * † Всяка *

* padding-boxне се поддържа

† по-старите версии изискват -webkitпрефикс (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozизисква се префикс до версия 28, без префикс от 29.