Sebelumnya, saya menemukan berbagai jebakan aneh saat belajar bootstrap. Jika saya melakukan pekerjaan persiapan saya sebelum belajar bootstrap, saya dapat menghindari beberapa jebakan sampai tingkat yang lebih besar atau lebih kecil. Di bawah ini, editor akan memperkenalkan Anda pada pengetahuan atribut kotak perbatasan.
Dalam file CSS Boostrap sendiri: boostrap.css, ada sepotong kode:
* {-webkit-box-sizing: border-box; -moz-box-ukuran: boord-box; Ukuran kotak: kotak perbatasan; }Ini berarti bahwa ketika menulis kode, properti ini akan ada di mana -mana. Jadi, apa ukuran kotak ini: boder-box? Pertama -tama mari kita lihat sepotong kode yang sangat biasa:
<div> <div> </div> </div>
Jalankan kode untuk mencari tahu: tinggi luar adalah 702px, lebar bagian dalam adalah 500px, dan ketinggiannya 500px; Setiap orang seharusnya tidak ragu di sini, mari kita lihat sepotong kode lain sekarang:
* {-webkit-box-sizing: border-box; -moz-box-ukuran: boord-box; Ukuran kotak: kotak perbatasan; } <div> <div> </div> </div>Kode ini sebenarnya adalah penambahan dua kode pertama. Dapat dipahami dengan mudah bahwa sekarang Anda mulai menulis kode dalam kerangka kerja Boostrap. Hasil dari kode yang berjalan adalah: lebar bagian luar adalah 500px dan ketinggian bagian dalam adalah 298px;
Alasan untuk hasil ini adalah: ukuran kotak: kotak perbatasan sehingga lebar dan tinggi elemen tidak akan dipengaruhi oleh bantalan dan perbatasan. Misalnya, dalam kode di atas, bahkan jika luar memiliki bantalan dan perbatasan, bantalan dan perbatasan tidak akan mempengaruhi lebar dan tinggi luar, dan lebar dan tinggi luar masih 500px; Tapi kemana perginya padding dan perbatasan? Jawaban: Masuk ke dalam! Buka alat debugging browser dan lihat detail gaya luar:
Kita dapat dengan jelas melihat bahwa bantalan dan perbatasan keduanya valid, tetapi mereka menempati ruang batin luar. Sejak padding: 100px menempati nilai lebar dan tinggi 200px dari luar, dan perbatasan menempati nilai lebar dan tinggi 2px dari bagian dalam, sehingga bagian dalam hanya dapat memperoleh nilai lebar dan tinggi 298px dari luar.
Jika Anda memiliki pengalaman dalam pengembangan web di bawah IE, Anda akan menemukan bahwa ukuran kotak: kotak perbatasan adalah mode aneh dari versi IE yang lebih rendah.
Di atas adalah pengetahuan yang relevan tentang persiapan boostrap untuk kotak perbatasan yang diperkenalkan kepada Anda oleh editor. Sudahkah Anda mempelajarinya? Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Pada saat yang sama, saya ingin mengucapkan terima kasih kepada semua orang atas dukungan mereka untuk situs web Wulin.com!
Di bawah ini adalah pengantar singkat tentang pemahaman tentang kotak perbatasan ukuran kotak
-webkit-box-ukuran: kotak perbatasan; Kemudian lebar dan tinggi yang ditetapkan oleh div akan mencakup perbatasan dan bantalan
<! Doctype html> <html> <head> <title> ukuran kotak </itement> <style type = "text/css">. TestDiv {padding: 10px ;; lebar: 100px; perbatasan: 10px solid} </style> </head--body <body> <div> </div> </Div Soarde = "-box: BOBK: </DIV> </DIV> </DIV STOYDE =" -BOTE: boord-box; "> Special </div> </body> </html>