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"
}
document.getElementById("anakutu").style.style.boxSizing = "border-box";
document.getElementById("anakutu").style.MozBoxSizing = "border-box"
}
JavaScript css box-sizing © htmlvecssegitimi.blogspot.com
Yorumlar
Yorum Gönder