Atribut ukuran kotak diperkenalkan di CSS3. Beberapa orang menjelaskan bahwa atribut ini dapat menentukan apakah nilai lebar dan tinggi yang ditentukan dengan atribut lebar dan tinggi masing-masing mencakup area padding di dalam elemen, serta lebar dan tinggi elemen. perbatasan. Kalimat ini agak membingungkan, Saya memahaminya sebagai metode penghitungan tinggi dan lebar wadah.Apa bedanya dengan metode penghitungan tradisional secara intuitif? contoh. .
Contoh:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>ukuran kotak</title><styletype=text/css>div{width:50px;height:50px;margin:10 px;padding:10px;border:10pxsolid#888;}#bs{ukuran kotak:border-box;}</style></head><body><div></div><divid=bs></ div></tubuh></html>Hasil berjalan:
Seperti terlihat pada gambar di atas, perbedaan ukuran keduanya sangat jelas terlihat. Kita bisa menggunakan browser untuk melihat cara penghitungan keduanya.
Gambar di atas adalah cara perhitungan tradisional yaitu ukuran div pertama di atas.
Dapat dilihat bahwa lebar div sebenarnya adalah 50+10*2+10*2=90px. Karena tinggi dan lebar yang kita tentukan untuk div mengacu pada tinggi dan lebar area konten, yaitu area terdalam pada Gambar 1-1.
Ukuran sebenarnya yang dihitung dari div kedua pada gambar di atas. Lebar sebenarnya dari div di sini adalah 10+10*2+10*2=50px. kotak. Terakhir, tinggi dan lebar wadah adalah tinggi dan lebar wadah sebenarnya, bukan sekadar mengacu pada ukuran area konten. Dapat dipahami juga bahwa metode penghitungan tinggi dan lebar saat ini juga mencakup ukuran padding dan border.
Nilai opsional untuk atribut ukuran kotak adalah sebagai berikut:
[Contoh] Berikut ini contoh penggunaan untuk mendemonstrasikan penggunaan atribut box-sizing:
<!DOCTYPEhtml><html><head><style>div{width:300px;height:50px;margin-top:5px;border:10pxsolidred;padding:5px;}.two{ukuran kotak:kotak konten;} .tiga{ ukuran kotak:border-box;}</style></head><body><divclass=one>Default</div><divclass=two>kotak konten</div><divclass=three>border-box </div></tubuh></html>Hasil berjalan:
