Pasti kalian belom tau tentang fungsi CSS3 yang satu ini.. dulu sebelom tau ini, gua sering banget bermasalah saat nentuin ukuran saat layouting web. Fungsi box-sizing ini digunain untuk nentuin border bersifat inline (didalem) atau outline (diluar).
Nih langsung liat aja contoh pembahasannya, ikutin step-by-step dibawah ini supaya kalian bisa bener bener tau apa itu fungsi box-sizing ..
- Buat file "index.php" kayak gambar dibawah
- Buat file "index2.php" kayak gambar dibawah
<!doctype html>
<html>
<head>
<title>Implementasi box-sizing CSS3</title>
<style>
.grid {
width: 300px;
height: 300px;
border: 3px solid #333;
}
</style>
</head>
<body>
<div class="grid">
tes
</div>
</body>
</html>
Akan menghasilkan output seperti ini
<!doctype html>
<html>
<head>
<title>Implementasi box-sizing CSS3</title>
<style>
.grid {
width: 300px;
height: 300px;
border: 3px solid #333;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="grid">
tes
</div>
</body>
</html>
width + border-width * 2 <<>> 300 + 3 * 2 = 306
Sedangkan yang output 2 (dua), setelah kita tambahin box-sizing: border-box, inspektornya bertulisan "div.grid 300px x 300px" .. karena bordernya bersifat inline (didalem), jadi sama sekali gak akan mempengaruhi ukuran si grid.
Sama kayak biasanya, CSS3 punya fitur compability yang berfungsi untuk nentuin di browser mana dia harus berfungsi .. -webkit-box-sizing untuk Google Chrome dan Safari, -moz-box-sizing untuk Mozilla.
Secara default box-sizing memiliki nilai content-box, jadi border otomatis bersifat outline (diluar) kalo kita gak set box-sizing nya .. untuk dokumentasi lengkapnya bisa diliat disini http://www.w3schools.com/cssref/css3_pr_box-sizing.asp .
Sekian posting kali ini, semoga bermanfaat..
Tidak ada komentar :
Posting Komentar