CSS KUTU MODELİ

CSS KUTU MODELİ

Tarhi : 09-05-2017 05:24:33 | Yazar : ÇAĞLAR BOSTANCI

KUTU MODELİ

HTML elementlerinin satır düzeyinde ve blok düzeyde oluştururken dikdörtgen bir yer işgal ettikleri ve belli bir konumları bulunmaktadır. Bu duruma kutu modeli denir.

width:Kutunun genişliğini belirler.PX,%,em gibi değerler verilir.
height:Kutu modelinin yüksekliğini belirler.
border:Kutu modelinin kenar çizgilerini ve özeliklerini belirler.
margin:Kutunun dış boşluğunu belirler.
padding:Kutunun iç boşluğunu belirler.
background:Kutunun arkaplanını belirler.

Margin Kullanımı
Margin kutunun dış boşluğunu belirlemede kullanılır. Margin ve paddin değeri ayrı ayrıda verilebiler. margin: üst sağ alt sol; bu şekilde kullanıldığı gibi sadece iki değer de alabilir. margin: 30px 40px; bu kullanımda alt ve üst margin değeri 30px sağ ve sol değeri 40px olacaktır. Margin kullanımın da ek olarak bir de kutuyu ortalamak için bir yöntem bulunmaktadır. margin:20px auto; Bu şekilde yapılan bir margin tanımı; üsten 20px bir boşluk ve auto ise bu kutunun sağ ve soldan ortalanmasını sağlayacaktır.
margin-top:üst poşluk verir.
margin-left: soldan boşluk verir.
margin-right: sağdan boşluk verir.
margin-bottom: alttan boşluk verir

Paddin (iç boşluk) Kullanımı.
Paddin kutunun iç boşluğunu belirlemede kullanılır. Padding değeri ayrı ayrıda verilebiler. padding: üst sağ alt sol; bu şekilde kullanıldığı gibi sadece iki değer de alabilir. padding: 30px 40px; bu kullanımda alt ve üst margin değeri 30px sağ ve sol değeri 40px olacaktır.
padding-top:üst poşluk verir.
padding-left: soldan boşluk verir.
padding-right: sağdan boşluk verir.
padding-bottom: alttan boşluk verir.

Overflow (Taşma) Kullanımı
Kutuların içeriğinin dışına taşması durumuna overflow denir. Overflow aldığı değerler aşağıda verilmiştir.
visible: Varsayılan değerdir. Taşan içerik gösterilir.
hidden: Taşan içerik gizlenir.
scroll: Taşan içerik bir çerçeve içine alınır ve taşan kısım kaydırma çubuğu ile gösterilir.
auto: İçerik taşma sınırlarına ulaştığında kaydırma çubukları devreye girer.

.

KUTU MODELİ KAYDIRMA

Float Kullanımı
Kutuyu bulunduğu konumdan kaydırır.Css de sayfa sunumlarından çok kullanılan bir özelliktir.
left:Kutuyu sola hizalar.
right:Kutuları sağ tarafa doğru hizalar.
top:Kutuları üste doğru hizalar.
bottom: Kutuları alta doğru hizalar.
inside:Kutunun bağlı olduğu yere bağlı olarak right veya left değeri alır. Varsayılan değeri left tir.
outside:Bu değer sadece sayfalı medya için geçerliğdir. Kutunun bulunduğu yere bağlı olarak sağa veya sola değer alır. Varsayılan değeri right tır.
start:atandığı kutu modelini soldan kaydırır. leftt veya top değeri alır.
end:Atandığı kutunun soldan sağa kaydırır. right veya bottom özelliği gösterir.
none:Kaydırma özelliğini iptal eder.

Clear Kullanımı
Float ile kaydırlımış bir blok başka bir blok ile yanyana geldiklerinde her iki blogun kenarları bir birine değer.Her iki blok aynı konuma hizalanır. Blokları farklı yönlere hizalama gerektiğinde clear kullanılır.
Aldığı değerler.
left:Atandığı blok elementin üst sınırını daha önce left ile kaydırılan kutunun alt sınırında olmasını sağlar.
right: Atandığı blok elementi daha önce right ile kaydırılan kutunun uzaklaştırılmasını sağlar.
top:Atandığı blok elementin üst sınırını daha önce top ile kaydırılan kutunun alt sınırında olmasını sağlar.
bottom: Atandığı elementin daha önce bottom ile kaydırılan kutunun kaydırılmasını sağlar.
both:Atandığı blok elementin daha önce left top veya right, bottom ile kaydırılan kutudan uzak tutulur.
none: Oluşan kutunun daha önce left, top, veya right, bottom kaydırılan kutularla bir ilgisi olmaz.

Float kullanımında kutu modelini gösterme
Display kullanımı
Elementlerin görünürlik özelliğini tanımlar. Elementlerin normal davranışlarını değiştirip yeniden tanımlanmamızı sağlar.
Display’ın aldığı değerler:
none:Elementi gizler.
block: Elementi blok düzeyinde görüntüler.
inline: Satır düzeyinde görüntüler.
inline-blok: Hem blok düzeyinde hem satır düzeyinde gösterir.
list-item:Liste olarak görüntüler.
run-in: Blok düzeyinde ya da inline düzeyinde bir dikdörtgen şeklinde gösterir. Firefox desteği yoktur.
compact: Blok ya da inline düzeyine bağlı olarak, içerik blok düzeyinde ya da satır düzeyinde işlenir ve gösterilir.
table: Tablo biçiminde gösterilir.
inline-table: Tablo içi satır düzeyinde gösterilir.
table-row-group:Tablo satır gurubu olarak gösterir.
table-header-group: Tablo başlık grubu olarak görüntüler.
table-footer-group:Tablo alt bilgi satırı olarak görüntüler.
table-row: tablo satırı olarak görüntüler.
table-column-group: Tablo sutun gurubu olarak görüntüler.
table-column: Tablo sutunu olarak görüntüler.
table-cell:Tablo hücresi olarak görüntüler.
table-caption:Tablo başlığı açıklaması olarak görüntüler.

display:table,table-row,table-cell Kullanımı

display:list-item kullanımı

display:blok; display:none; kullanımı

Visibility Kullanımı

Belgede elementlerin gizelenmesi ve gösterilmesi ile ilgili bir özelliktir. Aldığı değerler aşağıda listelenmiştir.
none:Element gösterilmez. Bu özelliği sadec IE desteklemiyor.
visible:Element gösterilir.
hidden:Element gizlenir ve yerine boş bir dikdörtgen oluşur.
collapse:Hidden ile aynı özelliktedir.Bu özelliği IE desteklemiyor.

Box-sizing Kullanımı
Kutu oluşturmada margin,padding ve border genişlikleri kutunun var olan genişliğini üzerine eklenir. Margin,paddin ve border gibi özelliklerin genişliğini kutunun genişliğine etki etmemesi için kullanılır. box-sizing iki adet değer alır.
Content-box:Kutu genişliği ve yüksekliğinde border ve padding değerleri dikkate alınmaz. Kutunun genişlik veyükseklik değeri içerik+border+padding toplamı kadar olur.
border-box:Kutu genişliği ve yüksekliği border ve padding değerleri kadar olur. Kutunun genişliği ya da yüksekliğine border ve padding değerleri dahil edilir.

Columns Sütunlara Ayırma

Word de alışık olduğumuz metni iki veya daha fazla sütuna bölme özelliğinin aynısını css ile web sayfalarında yapabilmemizi sağlar. IE10 firefox, crome,opera web tarayıcıları tarafından desteklenir. Mozillah için -moz- crome için -webkit- öntakıları kullanılır. Ek özellikleri aşağıda belirtilmiştir.
column-count:Sutun sayısını belirler. Sütün sayısını auto belirlediğimizde kolon sayıs column-width değerine göre kendinden hesaplanır.
column-width: Sunun genişliğini ayarlar. Sütun genişliği element içeriğini genişlik değerine göre kolonlara böler.
column-gap:sutun arasındaki boşluğu ayarlar.
column-rule: Sutunlar arasına dikey çizgi eklemek için kullanılır. çizgi biçimleri için border sitillerini solid,dashed gibi kullanabiliyoruz.
column-fill: Sutun yüksekliğini ayarlamada kullanılır. Firefox desteklemiyor.
column-span:Sutunlar arasına yatay başlık koymakyı sağlar. Firefox desteklemiyor.
columns:column-count ve column-width özelliklerini tek başına yerine getirir.
column-span:Sutunlar arasına yatay bir başlık eklemesini sağlar. Firefox desteklemiyor.

Flex-Box Esnek Kutu Modeli
Ana kutu display:box; ile bir kutu gibi görünmesini sağlar. Güncel bütün web tarayıcıları desteklemektedir. -moz- mozilla için -webkit- crome için -ms- internet explorer için ön tanımlar kullanılmaktadır.
Aldığı Özellikleri:
box-flex: Verilen rakama göre ana kutunun boyutuna göre kutuların esnek davranmasını ve yeniden boyutlandırılmasını sağlar.
box-orient: kutuların yatay veya dikeyde hizalanmasını sağlar. Varsayılan değer yataydır. Parantez içindeki değerleri alır.(horizontal/vertical/inline-axis/block-axis)
box-ordinal-group:Kutuların sırasını belirler. Kutu sıralarını 0,1,2,3 gibi rakamlarla değiştirebiliriz. Bu özelliği Opera web tarayıcısı order özelliği ile IE10 web tarayıcısı box-ordinal ile desteklenmektedir.
box-pack: Kutuları ana kutunun iine göre hizalar ve başa (start), sona(end), ortaya(center), ikiyana yaslama (justify) değerlerinden bir tanesini alır.
box-aling: box-orient değerine göre örneğin yatay(horizontal) ya da dikey (vertical) konuma göre soldan ya da üstten hizalama yapar. stretch|start|end|center|baseline değerlerinden birisini alır. Varsayılan stretch değeridir.
box-direction:Kutuların sıralanma yönünü değiştirir. reverse değeri verildiğinde kutular tersten sıralanır. Varsayılan değerr normal dir.

 

Reklam Alanı