Normal akış, öğelerin çoğu durumda bir web sayfasında görüntülenme şeklidir. HTML'deki tüm öğeler, satır içi kutular veya blok kutular olan kutuların içinde bulunur.
Blok Kutuları Döşeme
Normal akışta, blok kutular bir sayfada birbiri ardına yerleştirilir ( HTML'de yazdıkları sıraya göre). İçeren kutunun sol üstünden başlar ve yukarıdan aşağıya doğru yığınlanırlar. Her kutu arasındaki mesafe, üst ve alt kenar boşlukları birbiri içine girerek kenar boşlukları ile tanımlanır.
Örneğin, aşağıdaki HTML’ye sahip olabilirsiniz:
Bu ilk div. Çevresinde 5 piksellik bir kenar boşluğu ile 200 piksel genişliğinde.
Bu daha geniş bir div.
Bu ikincisinden biraz daha geniş olan bir div.
Her DIV bir blok elemanıdır, bu nedenle önceki blok elemanının altına yerleştirilecektir. Her sol dış kenar, içeren bloğun sol kenarına değecektir.
Inline Kutuları Döşeme
Satır içi kutular, sayfada, konteynır elemanının tepesinde diğer baştan sonra yatay olarak düzenlenir. Satır içi kutusunun tüm öğelerini bir satıra sığdırmak için yeterli alan olmadığında, bir sonraki satıra kaydırılır ve buradan dikey olarak istiflenir.
Örneğin, aşağıdaki HTML’de:
Bu metin kalın ve bu metin italik . Ve bu düz metin.
Paragraf bir blok öğesidir, ancak 5 satır içi öğe vardır:
- "Bu metin "
- "Cesur"
- "ve bu metin"
- "Italik"
- ". Ve bu düz metin."
Bu nedenle normal akış, web bloğunda web tasarımcısı tarafından herhangi bir müdahaleye gerek kalmadan, bu blok ve satır içi elemanların nasıl görüntüleneceğidir.
Bir öğenin bir sayfada nerede olduğunu etkilemek istiyorsanız CSS konumlandırmayı veya CSS yüzerlerini kullanabilirsiniz .