Kastes izmēru noteikšana - CSS-triki

Anonim

box-sizingĪpašums CSS kontrolē kā kaste modelis ir jārīkojas, lai elementa tas attiecas uz.

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

Viens no izplatītākajiem tā izmantošanas veidiem ir tā pielietošana visiem lapas elementiem, iekļaujot pseido elementus:

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

To bieži sauc par “universālu kastīšu izmēru noteikšanu”, un tas ir labs darba veids! widthJūsu iestatītais (burtiskais) ir iegūtais platums, neveicot garīgo matemātiku un pārvaldot sarežģītību, kas rodas no platumiem, kas rodas no vairākām īpašībām. Mums apkārt ir pat informēšanas diena par kastes lieluma noteikšanu.

Vērtības

  • content-box: noklusējums. Platuma un augstuma vērtības attiecas tikai uz elementa saturu. Polsterējums un apmale tiek pievienoti kastes ārpusei.
  • padding-box: Platuma un augstuma vērtības attiecas uz elementa saturu un tā pildījumu. Apmales tiek pievienotas kastes ārpusei. Pašlaik padding-boxvērtību atbalsta tikai Firefox .
  • border-box: Platuma un augstuma vērtības attiecas uz saturu, polsterējumu un apmali.
  • inherit: manto vecāku elementa lodziņa lielumu.

Piemērs

Šajā attēla piemērā tiek salīdzināts noklusējums content-box(augšā) ar border-box(apakšā):

Sarkanā līnija starp attēliem attēlo elementu platuma vērtību. Ievērojiet, ka elements ar noklusējumu box-sizing: content-box;pārsniedz deklarēto platumu, kad satura lodziņa ārpusei tiek pievienots polsterējums un apmale, savukārt elements ar box-sizing: border-box;piemēroto pilnībā iekļaujas deklarētajā platumā.

Izmantojot lodziņa lielumu

Pieņemsim, ka iestatījāt elementu width: 100px; padding: 20px; border: 5px solid black;. Pēc noklusējuma iegūtā lodziņa platums ir 150 pikseļi. Tas ir tāpēc, ka noklusējuma lodziņa lieluma modelis ir tāds content-box, kas elementa deklarēto platumu lieto tikai tā saturam, ievietojot polsterējumu un apmali ārpus elementa lodziņa. Tas faktiski palielina elementa aizņemto vietu.

Ja maināt box-sizinguz padding-box, polsterējums tiek iebīdīts elementa lodziņā. Tad lodziņš būtu 110 pikseļu plats, ar 20 pikseļu polsterējumu iekšpusē un 10 pikseļu apmali ārpusē. Ja vēlaties ievietot polsterējumu un apmali kastes iekšpusē, varat to izmantot border-box. Tad lodziņš būtu 100 pikseļu plats - 10 pikseļi apmales un 20 pikseļi polsterējuma tiek iebīdīti elementa kastē.

Demonstrācija

Skatiet CSS-Tricks (@ css-tricks) lodziņa lieluma vērtību salīdzinājumu ar pildspalvu vietnē CodePen.

Saistīts

  • width
  • height
  • padding
  • border

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Jebkurš * † 3 * † 1 ‡ 7 * 8 * 2,1 * † Jebkurš *

* padding-boxnetiek atbalstīts

† vecākām versijām nepieciešams -webkitprefikss (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -moznepieciešams prefikss līdz 28. versijai, kas nav prefiksēts no 29. datuma.