CSS3 box-sizing Örnek

Kasım 30, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ 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 kutunun boyutları aynıdır ,fakat ikinci sarı kutuya padding değeri uygulandığında boyutu doğal olarak büyüyor.Bu etkiyi box-sizing:border-box; değeriyle pembe kenara sahip kutularda deneyeceğiz.</p> <div class="birincikutu"> Bu kutuya padding değeri uygulamadık.</div> <br> <div class="ikincikutu">Bu kutuya padding değeri "40px" uyguladık.Birinci kutuyla aynı boyutta olmasına rağmen birinci kutudan büyük oldu.</div> <h2>Şimdi bir de box-sizing:border-box özelliğini inceleyelim</h2> <div class="ucuncukutu">Bu kutuya box-sizing:border-box özelliğini tanımladık ama padding değeri vermedik.</div> <br> <div class="dorduncukutu">Bu kutuya padding:40px; değerini vermemize rağmen boyutu değişmedi.</div> </body> </html>

KAYNAK KODLARI

SONUÇ 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 kutunun boyutları aynıdır ,fakat ikinci sarı kutuya padding değeri uygulandığında boyutu doğal olarak büyüyor.Bu etkiyi box-sizing:border-box; değeriyle pembe kenara sahip kutularda deneyeceğiz.</p>
<div class="birincikutu"> Bu kutuya padding değeri uygulamadık.</div>
<br>
<div class="ikincikutu">Bu kutuya padding değeri "40px" uyguladık.Birinci kutuyla aynı boyutta olmasına rağmen birinci kutudan büyük oldu.</div>

<h2>Şimdi bir de box-sizing:border-box özelliğini inceleyelim</h2>
<div class="ucuncukutu">Bu kutuya box-sizing:border-box özelliğini tanımladık ama padding değeri vermedik.</div>
<br>
<div class="dorduncukutu">Bu kutuya  padding:40px;  değerini vermemize rağmen boyutu değişmedi.</div>

</body>
</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS3 box-sizing Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

HTML DOCTYPE Bildirimi

Web Sitenizden Çok Para Kazanin

Javascript ile neler yapılabilir

HTML5 ile SEO Uyumlu İçerik Üret

Html belgesi yapısını anlama uygulaması

Html dersleri

Javascript kodları nereye yazılır

YouTube reklamları nasıl engellenir

Html5 canvas animasyon dersleri Javascript Yilan Oyunu

Javascript Oyun Yapma Dersleri HTML5+CSS3