Dimenzioniranje kutija - CSS-trikovi

Anonim

box-sizingNekretnina u CSS kontrolira koliko kutija Model se rješava za element se ona odnosi.

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

Jedan od najčešćih načina njegove upotrebe jest primjena na sve elemente na stranici, uključujući pseudo elemente:

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

To se često naziva "univerzalno dimenzioniranje kutije" i to je dobar način rada! (Doslovno) koje widthste postavili je širina koju dobivate, bez potrebe za mentalnom matematikom i upravljanjem složenošću koja dolazi iz širina koje dolaze iz više svojstava. Ovdje čak imamo i dan osvještavanja o veličini kutije.

Vrijednosti

  • content-box: zadani. Vrijednosti širine i visine odnose se samo na sadržaj elementa. Podstava i obrub dodaju se na vanjsku stranu okvira.
  • padding-box: Vrijednosti širine i visine primjenjuju se na sadržaj elementa i njegovo popunjavanje. Obrub se dodaje s vanjske strane okvira. Trenutno padding-boxvrijednost podržava samo Firefox .
  • border-box: Vrijednosti širine i visine primjenjuju se na sadržaj, obloge i obrube.
  • inherit: nasljeđuje veličinu okvira nadređenog elementa.

Primjer

Ova primjer slika uspoređuje zadani content-box(gornji) i border-box(donji):

Crvena linija između slika predstavlja vrijednost širine elemenata. Primijetite da zadani element box-sizing: content-box;premašuje deklariranu širinu kada se dodavanje i obrub dodaju na vanjsku stranu okvira sa sadržajem, dok se box-sizing: border-box;primijenjeni element u potpunosti uklapa u deklariranu širinu.

Korištenje veličine okvira

Recimo da postavite element na width: 100px; padding: 20px; border: 5px solid black;. Prema zadanim postavkama rezultirajući okvir širok je 150 piksela. To je zato što je zadani model dimenzioniranja okvira content-boxkoji primjenjuje deklariranu širinu elementa samo na njegov sadržaj, postavljajući dodavanje i obrub izvan okvira elementa. To učinkovito povećava koliko prostora element zauzima.

Ako promijenite box-sizingna padding-box, podstava se gura unutar okvira elementa. Tada bi okvir bio širok 110 piksela, s unutarnjom stranicom od 20 piksela, a s vanjske strane 10 piksela. Ako želite umetanje i obrub staviti unutar okvira, možete koristiti border-box. Kutija bi tada bila široka 100 piksela - 10 piksela obruba i 20 piksela podmetača guraju se unutar okvira elementa.

Demo

Pogledajte Usporedbu olovaka vrijednosti veličine kutije pomoću CSS-trikova (@ css-trikovi) na CodePenu.

Povezano

  • width
  • height
  • padding
  • border

Podrška preglednika

Krom Safari Firefox Opera IE Android iOS
Bilo koji * † 3 * † 1 ‡ 7 * 8 * 2,1 * † Bilo koji *

* padding-boxnije podržano

† starije verzije zahtijevaju -webkitprefiks (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozpotreban je prefiks do verzije 28, neprefiksan od 29.