Bu makalede, normal akışı, yani web sayfası öğelerinin düzenlerini değiştirmediyseniz kendilerini nasıl sıraladığını, inceleyeceğiz.
Sayfa düzenini tanıtan son derste ayrıntılı olarak açık olduğu gibi, davranış biçimlerini değiştirmek için herhangi bir CSS uygulamadıysanız, bir web sayfasındaki öğeler normal akışta düzenlenir. Ve yavaş yavaş öğrendiğimiz üzere, öğelerin normal akıştaki konumlarını ayarlayarak bu öğelerin nasıl davrandıklarını değiştirebiliriz.
Herhangi bir web sayfasına başlamanın en iyi yolu, normal akışta okunabilen, sağlam, iyi yapılandırılmış bir düzen ile başlamaktır. Kullanıcı çok eski bir tarayıcı veya sayfa içeriğini zor okuyan bir cihaz kullanıyor olsa bile içeriğimiz okunabilir olmalı. Ayrıca, normal akışı okunabilir bir sayfa tasarlandığında, düzende değişiklik yaparken sayfa ile mücadele etmek yerine sayfayla çalışırsınız.
Farklı düzen yöntemlerini daha derinlemesine araştırmadan önce, normal sayfa akışıyla ilgili olarak önceki modüllerde incelediğimiz bazı şeyleri tekrar etmek faydalı olabilir.
Öğeler varsayılan olarak nasıl düzenlenir?
Sayfa sunumu tek tek öğe kutularının, sahip oldukları doldurma, kenar boşluğu veya kenarlıklar düzenlenmiş olarak başlar. Biz buna kutu modeli diyoruz.
Varsayılan olarak, bir blok düzeyi öğesinin içeriği, onu içeren üst öğenin kullanılabilir satır içi alanını doldurur ve içeriğini barındırmak için blok boyutu boyunca büyür. Satır içi öğelerin boyutu yalnızca içerikleri kadardır. Satır içi öğelerde genişlik veya yükseklik ayarı yapamazsınız — bunlar yalnızca blok düzeyi öğeleri için geçerlidir. Satır içi öğenin boyutunu bu şekilde denetlemek istiyorsanız, onu bir blok düzeyi öğesi gibi davranacak şekilde ayarlamanız gerekir (örneğin, display: block; veya display: inline-block; ile)
Bu, elementlerin tek tek nasıl yapılandırılacağını açıklar, peki ya birbirleriyle etkileşime girdiklerinde ne olur? Normal düzen akışı (sayfa düzenine giriş makalesinde belirtildiği gibi), öğelerin tarayıcının görünüm penceresine eklendiği sistemdir. Varsayılan olarak, blok düzeyi öğeleri blok akış yönünde düzenlenir. Buna göre üst öğenin yazma modu (başlangıç: yatay-tb) temel alınır. Her öğe, son öğenin altında yeni bir satırda görünür ve her biri belirtilen kenar boşluğuyla ayrılır. Yatay dillerde blok düzeyindeki öğeler dikey olarak yerleştirilir.
Satır içi öğeler farklı davranır. Yeni satırlarda görünmezler; bunun yerine, üst blok düzeyi öğesinin genişliği içinde yeterli alan olduğu sürece, hepsi birlikte aynı satırda durur. Alan yoksa taşan içerik yeni bir satıra taşınır.
İki bitişik öğenin her ikisinde de bir kenar boşluğu ayarlanmışsa ve iki kenar boşluğu dokunuyorsa, iki öğeden daha büyük olanı kalır ve daha küçük olanı kaybolur. Buna kenar boşluğu çökmesi denir.
Tüm bunları açıklayan basit bir örneğe bakalım:
<h1>Basic document flow</h1>
<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line along with adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="long.jpg"></p>Copy to Clipboard
body {
width: 500px;
margin: 0 auto;
}
p {
background: rgba(255,84,104,0.3);
border: 2px solid rgb(255,84,104);
padding: 10px;
margin: 10px;
}
span {
background: white;
border: 1px solid black;
}
Özet
Artık normal akışı ve tarayıcının varsayılan olarak sayfa sunumunu nasıl düzenlediğini anladığımıza göre, tasarımınızın ihtiyaç duyduğu düzeni oluşturmak için bu varsayılan ekranı nasıl değiştireceğimizi öğrenmeye devam edebiliriz.