JavaScript CSS3 box-sizing Örnek

javascript css3 box-sizing örnek uygulama

KUTU1

KUTU2

KUTU3

Bu örneğimizde 3 tane küçük kutu bir büyük kutu içindedir.Genişlikleri 100px olan küçük kutular genişliği 300px olan kutu içinde yan yana göstermek istediğimizde sorun olmaktadır.Çünkü küçük kutulara 15 px padding değeri atamıştım .Padding ayarlarımızı göz ardı ederek daha rahat tasarım yapmamızı sağlayan bu özelliği birlikte uygulayalım..

Javascript ile box-sizing özelliğine "border-box" değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız !

function fonk() {
document.getElementById("anakutu").style.style.boxSizing = "border-box";

document.getElementById("anakutu").style.MozBoxSizing = "border-box"
}

JavaScript css box-sizing © htmlvecssegitimi.blogspot.com