Saiz sempadan CSS3

Atribut bersaiz kotak

membolehkan elemen tertentu ditakrifkan dengan cara khusus yang sepadan dengan kawasan tertentu.

Nilai lalai: content-box

Sintaks JavaScript: object.style.boxSizing="border-box"

Syntax

saiz kotak: kotak kandungan|kotak-sempadan|warisan;

kotak kandungan: Lebar dan tinggi digunakan pada kotak kandungan elemen masing-masing. Melukis pelapik dan sempadan elemen di luar lebar dan ketinggiannya.

kotak sempadan: Set lebar dan ketinggian untuk elemen menentukan kotak sempadan elemen. Iaitu, sebarang padding dan sempadan yang ditentukan untuk elemen akan dilukis dalam lebar dan ketinggian yang ditetapkan. Lebar dan tinggi kandungan diperoleh dengan menolak sempadan dan pelapik masing-masing daripada lebar dan tinggi yang ditetapkan.

warisan: Menentukan bahawa nilai atribut saiz kotak harus diwarisi daripada elemen induk.

Jika saiz kotak: kotak sempadan; ditetapkan pada elemen, padding (padding) dan sempadan (sempadan) turut disertakan dalam lebar dan tinggi:

      
  
两个 div 现在是一样大小的!
 
 
php中文网
  

Tidak menggunakan sifat bersaiz kotak CSS3

Secara lalai, lebar dan tinggi sesuatu elemen dikira seperti berikut:

lebar(lebar) + pelapik(birai dalam) + sempadan(sempadan) = lebar sebenar elemen

tinggi(tinggi) + pelapik(birai dalam) + sempadan(sempadan) = ketinggian sebenar elemen

      
  
这个是个较小的框 (width 为 300px ，height 为 100px)。
 
 
这个是个较大的框 (width 为 300px ，height 为 100px)。