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

Bu blogdaki popüler yayınlar

Linklerin Renklerini Değiştirme Örnek

HTML yorum etiketi ile öğe gizleme örneği

YouTube Reklam Engelleyici

Html belgesi yapısını anlama uygulaması

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript