Mengatasi Ukuran Layout Website dengan Properties Box-Sizing:Border-Box CSS3

Haloo teman-teman, kembali lagi di panduan Source Code Aplikasi, di panduan kali ini saya akan memberikan sedikit penjelasan dan guna properties box-sizing:border-box yang terdapat di css3, sebelumnya apa sih guna itu box-sizing?

Mungkin teman-teman yang telah terjun di dunia desain web telah familiar dengan properties yang satu ini, properties  yang satu ini benar-benar membatu pada proses laman yang kita bikin karena properties ini lumayan menolong bagi menghilangkan pusing teman-teman pada menjalankan pengaturan ukuran di setiap konten laman.

Contoh kasusnya misal kita mempunyai layout dengan lebar 900px, lalu kita membaginya menjadi 2 kolom, kiri sebesar 300px dan kanan sebesar 600px, lalu setelah kita untuk ternyata ukurannya tak lumayan dikarenakan kita menggunakan padding dan margin didalamnya, terpaksa mesti menghitung ulang kembali ukuran dan juga padding dan marginnya, ini kendala yang sering sekali di alami murid di Source Code Aplikasi.

Solusinya benar-benar gampang teman-teman, lumayan menambahkan properties box-sizing:border-box di script cssnya, dengan kita menggunakan properties ini kita tak lagi mesti mengurangi ukuran lebar atau tinggi ketika kita menggunakan padding di dalamnya.

Code scriptnya ialah selaku berikut :

.pembungkus{
width:900px;
overflow:hidden;
background:#f4f4f4;
margin:20px;
}
.kiri{
float:left;
width:300px;
height:200px;
background:blue;
border:10px solid #000;
padding:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.kanan{
float:left;
width:600px;
height:200px;
background:red;
border:10px solid #f20000;
padding:10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

Coba perhatikan script diatas saya membagi kontennya pas-pasan 300px dan 600px dengan padding dan border didalamnya, dan kita tak mesti mengurangi ukurannya dikarenakan kita menambahkan fitur box-sizing ini.

Oke lumayan gampang kan teman-teman, silahkan praktekan sendiri dirumah, lumayan sekianlah artikel kali ini, semoga bermanfaat.

Terimakasih.

Sumber https://kursuswebsite.org