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

Yorumlar

Popüler yayınlar

CSS content Özelliği

CSS justify-content Özelliği

Javascript ile neler yapılabilir

HTML strong Etiketi

CSS flex-basis Özelliği

CSS top Özelliği

HTML Yorumlar

CSS align-self özelliği

CSS align-items özelliği

HTML5 Canvas Oyun Yapımı Dersleri