HTML CSS'yi çizerken, düzenin beklediğiniz gibi düzenlenmediğini

Google'da sık sık aradığım oldu.

Son zamanlarda Zerocho'nun Geliştirici Sohbet videosunu izlerken CSS'in temellerini öğrenmeye karar verdim.

- Blok elemanı, satır içi elemanı, kenar boşluğu ve hizalama kavramlarını anlamak istiyorum.

Zaten deneyimsel olarak biliyorum ancak düzenlemem gerekiyor.

■ css'yi değiştirmem gerekiyor ancak deneyimsel olarak buraya şunu, şunu deneyerek göründüğü gibi uygularsak, duyarlı tasarımda sorunlar ortaya çıkabilir veya daha sonra bakım yaparken karmaşıklaşabilir.

1. Normal Akış

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

* Durumis'te yazı yazarken html etiketini yapıştırdığımda kayboluyor, çözümünü biliyor musunuz?;;

 <div>
 	<p>İlk paragraf</p>
 	<p>İkinci paragraf</p>
 	<span>Satır içi eleman 1</span>
 	<span>Satır içi eleman 2</span>

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

 İlk paragraf
 İkinci paragraf

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

- Genellikle düzen oluştururken kullanılır. (Blokları oluşturur ve içlerine satır içi elemanlar ekler.)

- Blok düzey elemanlarının istiflenmesinin bir yoludur.

- Blok düzey elemanlar şunlardır:

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

- Elemanın içindeki içeriğin uzunluğundan bağımsız olarak ebeveyn elemanın tam genişliğini kaplar. (Tek satır)

- Bloğun içine blok ekleyebilir veya satır içi elemanlar ekleyebilirsiniz.

- genişlik, yükseklik, kenar boşluğu, dolgu ayarlanabilir.

 <div style="padding :10px;"> 
 	<h1>Başlık</h1>
 	<p>Kısa bir paragraf. </p>

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

- BFC'nin oluşturulduğu zamanlar aşağıdaki gibidir. Her seferinde 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ı)

<p>
	Merhaba! <strong> Durumis </strong> ikinci yazım!
	<span style="color: pink;">Beğen</button> düğmesine tıklayın.

- Blok elemanı içinde oluşturulur. (Satır düzeyinde değil)

- Genişlik ve yüksekliği doğrudan ayarlayamazsınız. (İçeriğin boyutunu kaplar.)

- Yalnızca yatay dolgu ve kenar boşluğu uygulayabilirsiniz.

- Satır içi elemanın içine yalnızca satır içi elemanlar eklenecek.

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

Peki bu ne zaman kullanılır?

- bfc, float etkileşimlerini veya kenar boşluğu çakışmasını işlemek için kullanılır.

1. float etkileşimleri

- Çocuğa özgür bir stil uygularsanız, ebeveyn sarılamaz.

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

- Bu durumda, düzen oluşturmak için ebeveyn elemana bfc verilir.

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

<div class="ebeveyn" style="display: inline-block;">
	<div class="çocuk" style="float: left;">...</div>

2. Kenar boşluğu çakışması

- css'de bitişik iki etiketin üst kenar boşlukları çakışır.

örneğin) Aşağıdaki iki div etiketi arasındaki üst boşluk 150px değil 100px'tir.

<div style="margin-bottom: 100px;">
..
</div>
<div style="margin-top: 50px;">
,,

- Yukarıdaki durumda, iki etiket arasına yeni bir bfc elemanı eklenir.

<div style="margin-bottom: 100px;"></div> 

<div style="overflow: auto;"></div> <!-- Yeni bfc-->

ps. Durumis'te html'yi kopyala yapıştırma yöntemini biliyor musunuz?;;