Ukuran kotak - Trik CSS

Anonim

The box-sizingharta di CSS mengawal bagaimana model kotak dikendalikan untuk elemen yang ia terpakai bagi.

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

Salah satu cara yang lebih biasa untuk menggunakannya adalah menerapkannya ke semua elemen di halaman, elemen semu termasuk:

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

Ini sering disebut "ukuran kotak universal", dan ini adalah cara yang baik untuk bekerja! (Literal) yang widthanda tetapkan adalah lebar yang anda dapat, tanpa harus melakukan matematik mental dan menguruskan kerumitan yang datang dari lebar yang berasal dari pelbagai sifat. Kami bahkan mempunyai hari kesedaran ukuran kotak di sini.

Nilai

  • content-box: lalai. Nilai lebar dan tinggi hanya berlaku untuk kandungan elemen. Pelapik dan sempadan ditambahkan ke bahagian luar kotak.
  • padding-box: Nilai lebar dan tinggi berlaku untuk kandungan elemen dan pelapiknya. Sempadan ditambahkan ke bahagian luar kotak. Pada masa ini, hanya Firefox yang menyokong padding-boxnilainya.
  • border-box: Nilai lebar dan tinggi berlaku untuk kandungan, padding, dan border.
  • inherit: mewarisi ukuran kotak elemen induk.

Contohnya

Gambar contoh ini membandingkan lalai content-box(atas) ke border-box(bawah):

Garis merah antara gambar mewakili nilai lebar elemen. Perhatikan bahawa elemen dengan lalai box-sizing: content-box;melebihi lebar yang dinyatakan ketika pelapik dan sempadan ditambahkan ke luar kotak isi, sementara elemen dengan yang box-sizing: border-box;diterapkan sesuai sepenuhnya dengan lebar yang dinyatakan.

Menggunakan Saiz Kotak

Katakan anda menetapkan elemen untuk width: 100px; padding: 20px; border: 5px solid black;. Secara lalai, kotak yang dihasilkan selebar 150px. Ini kerana model ukuran kotak lalai adalah content-box, yang menerapkan lebar elemen yang dinyatakan pada isinya sahaja, meletakkan padding dan batas di luar kotak elemen. Ini secara berkesan meningkatkan jumlah ruang yang diambil oleh elemen.

Jika anda menukar box-sizingke padding-box, padding itu ditolak dalam kotak elemen ini. Kemudian, kotak itu selebar 110px, dengan 20px padding di bahagian dalam dan 10px perbatasan di luar. Sekiranya anda mahu meletakkan pelapik dan sempadan di dalam kotak, anda boleh menggunakannya border-box. Kotak kemudian selebar 100px - 10px sempadan dan 20px padding keduanya ditolak ke dalam kotak elemen.

Demo

Lihat Perbandingan nilai penentuan ukuran kotak oleh CSS-Tricks (@ css-tricks) di CodePen.

Berkaitan

  • width
  • height
  • padding
  • border

Sokongan Penyemak Imbas

Chrome Safari Firefox Opera IE Android iOS
Mana-mana * † 3 * † 1 ‡ 7 * 8 * 2.1 * † Sebarang *

* padding-boxtidak disokong

† versi lama memerlukan -webkitawalan (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozawalan diperlukan sehingga versi 28, tidak dapat diperbaiki pada 29.