CSS'in Temel Kuralları (Normal akış, BFC, IFC)

HTML CSS kodlarken düzen düşüncem kadar iyi oluşturulmuyor

Google'da çokça arama yaptığım olmuştur.

Son zamanlarda Zerocho'nun geliştirici konuşma videosunu izlerken CSS temellerini öğrenmeye karar verdim.

- Blok elemanı, satır içi elemanı, margin ve hizalama kavramlarını anlamak istiyorum.

Zaten deneyimsel olarak biliyorum ama özetlemem gerekiyor.

■ css'i değiştirmem gerekiyor ve deneyimsel olarak bazı şeyleri uygulayıp görsel olarak oluşturursam duyarlı tasarımda sorunlar yaşanır veya daha sonra bakım yaparken karmaşık hale gelir.

1. Normal Akış

- Özellikle düşünülmesi gereken bir şey yok. Tüm öğeler yukarıdan aşağıya ve soldan sağa doğru yerleştirilir.

* Durumis'te yazı yazarken html etiketini yapıştırınca kayboluyor, çözümünü bilen var mı;;

- p etiketi ile iki blok oluşur ve span etiketi tek satırda çizilir.

2. BFC (Blok Biçimlendirme Bağlamı)

- Genellikle düzen oluştururken kullanılır. (Blok oluşturur ve içine satır içi öğeler yerleştirilir.)

- Blok düzey öğelerinin yığılma şeklidir.

- Blok düzey öğeleri şunlardır:

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- Öğenin içeriğinin uzunluğuna bakılmaksızın üst öğenin tüm genişliğini kaplar. (Tek satır)

- Bloğun içine blok veya satır içi öğeler yerleştirilebilir.

- width, height, margin, padding ayarlanabilir.

- div etiketi içine iki satır oluşturulur.

- BFC'nin oluşturulduğu durumlar aşağıdaki gibidir. Gerektiğinde bakabilirsiniz.

• float özelliği none değilse
• position özelliği absolute veya fixed ise
• display özelliği inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid ise
• overflow özelliği visible değilse vb.
  
  

3. IFC (Satır İçi Biçimlendirme Bağlamı)

- Blok öğesi içinde oluşturulur. (Satır bazlı değil)

- width ve height doğrudan ayarlanamaz. (İçeriğin boyutuna göre ayarlanır.)

- Sadece yatay padding ve margin uygulanabilir.

- Satır içi öğenin içine yalnızca satır içi öğeler eklenebilir.

<span>, <a>, , <img>, <input> vb.

Peki ne zaman kullanılır?

- bfc, float etkileşimlerini veya margin çakışmalarını ele almak için kullanılır.

1. Float Etkileşimi

- Çocuğa özgür bir stil verilirse ebeveyn sarmaz.

(float, position absolute, fixed, display inline-block vb...)

- Bu durumda düzen oluşturmak için ebeveyn öğesine bfc verilir.

(Ebeveyn etikete display: inline-block, overflow: auto, float: left vb. uygulanır.)

2. Margin Çakışması

- css'de bitişik iki etiketi üst üste gelen üst ve alt margin'ler vardır.

ör: Aşağıdaki iki div etiketi arasındaki üst ve alt boşluk 150px değil 100px'tir.

- Bu durumda iki etiket arasına yeni bir bfc öğesi eklenir.

not: Durumis'te html yapıştırma yöntemi var mı;;