CSS i anlamak ve ona hakim olmak için bilinmesi gereken bir konudur. Tablosuz bir web tasarımı, daha temiz kod, daha az sorun  ve daha kullanışlı bir web sitesi demektir. Bunu anlamak içinde çerçeve modelini bilmemiz gerekir. Her eleman aksi belirtilmediği sürece (display:none) bir çerçeve üretir.
Örneğin <p> elemanı aşağıdaki şekilde çerçeve üretir. Ve bu çerçeve modeline istersek müdahale edebiliriz.

Örnekte görüldüğü gibi bir eleman belirtilen değerlere göre bir çerçeve üretir. İşte bu çerçevenin bir içerikte yüzdürülmesi, konumlandırılması veya çerçeve türünü belirliyen nitelikler vardır.Onlara değinecez ama önce çerçevenin oyutları hakkında bilgi verelim.
Çerçevenin boyutlarını şunlar belirler;
width:Çerçevenin genişliği bu nitelik ile tanımlanır.. Eğer niteliğin değeri auto ise kullanıcı arayüzü bu genişliği kendisi belirler.
height:Çerçevenin yüksekliği bu nitelik ile tanımlanır. Eğer niteliğin değeri auto ise taşıyıcı bloğun yüksekliği belgenin içeriğine uygun olarak büyüyecektir.

Bir elemanın bu şekilde çerçeve (blok) üretmesinin nedeni display niteliğidir. Yani blok seviyesinde olmayan bir elemanı blok seviyesine getirmek için veya tam zıtdı olarak blok seviyesinden bir elemanın seviyesinin indirgemek için kullanılır.Örnek verecek olursak;

bu kodlar aşağıdaki gibi yorumlanır.  Çünkü div elemanı p elemanını kapsıcak şekilde konumlandırılmıştır. Ve divdisplay:block denerek çerçeve eklenmiştir. elemanına

Şimdi display niteliğinin özelliklerini verelim.

block

Bu değer bir elemanın bir ilkesel blok çerçevesi üretmesine sebep olur.

inline

Bu değer bir elemanın , bir veya daha fazla sayıda satıriçi çerçeve üretmesine sebep olur.

list-item

Bu değer bir elemanın (HTML’deki <li> gibi) blog çerçevesi ve bir liste öğesi gibi satır içi blok çerçevesi üretmesine sebep olur.

none

Bu değer bir elemanın  hiçbir çerçeve üretmemesine sebep olur (yani, elemanın yerleşime hiçbir etkisi olmaz; başka bir deyişle, gösterilmez).

run-in

compact

Bu değerler bağlama göre bir blok veya satıriçi çerçeve üretirler. Nitelikler bu çerçevelere son durumlarına göre (satıriçi/blok seviyesinden) uygulanır

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell ve table-caption
Bu değerler bir elemanın tablo elemanı gibi davranmasına sebep olur.

Şimdi bir kaç özellik daha vererek devam etmek istiyorum.

satıriçi seviyeden elemanlar ve satır içi çerçeveler:
kaynak belgenin içeriğinde blok bulunmayan elemanlarıdır. örneğin bir parağrafımız olsun paragrafın belli cümleleri italik veya kalın yapılmak istenebilir. bunun için kullanılan kodlar çerçeve üretmez örmeğin;
<p>bir metin <strong>devam</strong></p> burada <strong> elemanı çerçeve üretmez. ama üretmesini istiyorsak diplay niteliğinin şu özelliklerini kullanabiliriz. inline, inline-table, compact ve run-in .
Anonim satıriçi çerçeveler
Kodumuz şöyle olsun

<p>birşeyler <em>yazıyor</em> önemli değil.</p>
Burada em elemanı yukarıda bahsettiğim satıriçi elemanıdır. ve istenirse blok
seviyesine getirilebilir. Diğer cümleler "birşeyler" ve "önemli değil" anonim satıriçi
çerçevedir. Yani özelliklerini p elemanından alır. Çerçeve üretmezler.
Sanırım az çok bir elemanın nasıl çerçeve ürettiğini ve çerçevelerin nasıl
nitelendirildiğini anladık. Sıra geldi bu çerçevelerin birbiri içinde nasıl konumlan-
dırıldığına.
Css te üç çeşit konumlandırma vardır.
1.Normal akış (position:static , position:relative)
2.Float ve mutlak konumlar( position:absolute)
3.Bir nitelik tanımlanmadığı taktirde normal konum denen şekilde konumlanırlar.

Şimdi position niteliğine bir bakalım.
Position kutu modellerini konumlandırmaya yarar.
Position un öncelikle Aldıgı Degerler: static,relative,absolute,fixed,inherit dir.
Bu değer verildikten sonra kutunun yeri top,bottom,right ve left değerleriyle
belirlenir.
Göreceli Konumlandırma(position:relative):Bu nitelik atandağında kutu verilen top,left
right ve bottom niteliklerine göre konumlanır. örnek olarak;
p#deneme{position: relative;
left: 10px;
top: 10px;
}

Burada p elemanı diğer kutulara göre soldan ve yukardan 10px kayar.
Mutlak(Absolute) Konumlandırma:
Bu konumlandırmada üstteki 1.kutu ve 3. kutu kaydırılan kutuyu yok sayıp konumlan-
malarına devam edeceklerdir. Yani relative değeri boşluk bırakır ve diğer kutular bu
boşluğa uyar ama absolute de bu söz konusu değildir. Kaydırılan kutu akıştan çıkar.
Sabit Konumlandırma (position:fixed):
Sabit konumlandırma aynen mutlak konumlandırmaya benzer. Farkı position:fixed diye
tanımlanan kutu akıştan çıkar ve orada sabitlenir. Yani kaydırma çubuğuyla biz aşağıya
insek bile kutu orada sabit kalır yukarı çıkmaz.(Bu özelliği IE6 desteklemiyor)
Float özellğinide diğer yazımda vermek istiyorum