Yayınlar

box-sizing etiketine sahip yayınlar gösteriliyor

Google ve Youtube Reklamlarını Engelleyen Tarayıcı ve Uygulama İndir

CSS box-sizing Özelliği

CSS box-sizing Css boox-sizing özelliğini kullanarak bir div elemanına uygulanan padding değerleri ,elemana verilen genişlik ve yükseklik değerlerini etkilemeden tasarım yapılmasına olanak verir.Örnek:Bu örneği inceleyerek box-sizing özelliğinin ne işe yaradığını öğrenebilirsiniz.(ilk iki kutuda padding değerinin etkisi gösterilecektir. Daha sonraki kutularda ise padding değerini etkisiz kılan box-sizing özelliğini anlamış olacaksınız.)

.birincikutu { width: 220px; height: 150px; border: 4px solid yellow; } .ikincikutu { width: 220px; height: 150px; padding: 40px; border: 4px solid yellow; } .ucuncukutu { width: 220px; height: 150px; border: 4px solid pink; box-sizing: border-box; } .dorduncukutu { width: 220px; height: 150px; padding: 40px; border: 4px solid pink; box-sizing: border-box; } Kendiniz deneyin » CSS box-sizing nedir nasıl kullanılırCss box -sizing özelliği tarayıcalara elemanların boyut özelliklerinin kenarlarına göre mi içeriklerin…

JavaScript CSS3 box-sizing Örnek

javascript css3 box-sizing örnek uygulamaKUTU1 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"
} ÇalıştırJavaScript css box-sizing ©htmlvecssegitimi.blogspot.com

CSS3 box-sizing Örnek

htmlvecssegitimi.blogspot.comKodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.KODU ÇALIŞTIR SAYFAYI TEMİZLESAYFAYI YENİLEKAYNAK KODLARISONUÇ EKRANI <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title> css box-sizing özelliği ve örnek uygulama</title> <style> .birincikutu { width: 220px; height: 150px; border: 4px solid yellow; } .ikincikutu { width: 220px; height: 150px; padding: 40px; border: 4px solid yellow; } .ucuncukutu { width: 220px; height: 150px; border: 4px solid pink; box-sizing: border-box; } .dorduncukutu { width: 220px; height: 150px; padding: 40px; border: 4px solid pink; box-sizing: border-box; } </style> </head> <body> <h1> aynı boyutlu iki kutunun box-sizing özelliğinin uygulanmamış hali</h1> <p>Sarı renkli kenarlara sahip iki …