Димензионисање кутија - ЦСС-трикови

Anonim

box-sizingИмовина у ЦСС контролише како се кутија модела рукује на елемент да односи.

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

Један од најчешћих начина употребе је примена на све елементе на страници, укључујући псеудо елементе:

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

То се често назива „универзално одређивање величине кутије“ и то је добар начин рада! (Дословно) које widthсте поставили је ширина коју добијате, без потребе за менталном математиком и управљањем сложеношћу која долази из ширина које потичу из више својстава. Овде чак имамо и дан свести о димензијама кутија.

Вредности

  • content-box: подразумевано. Вредности ширине и висине односе се само на садржај елемента. Подстава и обруб додају се на спољну страну кутије.
  • padding-box: Вредности ширине и висине се примењују на садржај елемента и његово попуњавање. Граница се додаје на спољну страну оквира. Тренутно 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;. Подразумевано је резултујући оквир широк 150 пиксела. То је зато што је задати модел величине оквира content-boxкоји примењује декларисану ширину елемента само на његов садржај, постављајући облоге и обрубе изван оквира елемента. Ово ефикасно повећава колико простора заузима елемент.

Ако промените box-sizingна padding-box, подлога се гура унутар оквира елемента. Тада би оквир био широк 110 пиксела, са 20 пиксела на унутрашњој страни и 10 пиксела на спољној страни. Ако желите да подставке и обрубе ставите унутар кутије, можете да користите border-box. Тада би оквир био широк 100 пиксела - 10 пиксела обруба и 20 пиксела подметача гура се унутар оквира елемента.

Демо

Погледајте Поређење оловке вредности величине кутије помоћу ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.

Повезан

  • width
  • height
  • padding
  • border

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Било који *† 3 * † 1 ‡ 7 * 8 * 2.1 * † Било који *

* padding-boxније подржано

† старије верзије захтевају -webkitпрефикс (Цхроме 1-9, Сафари 3-5, Андроид 2.1-3.к)

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