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 s Etiketi

İnternetten Para Kazanmanın Yolları -İnternetten Para Kazandıran Siteler -İnternetten Nasıl Para Kazanılır

HTML5 ile SEO Uyumlu İçerik Üret

Html belgesi yapısını anlama uygulaması

JavaScript CSS margin Örnek

HTML p Etiketi

CSS3 border-image-source Örnek

Web Sitenizden Çok Para Kazanin

İnternetten hangi alanlarda para kazanılır?-İnternetten para kazanmanın yolları

JavaScript CSS flex-shrink Örnek