Aturan Dasar CSS (Normal flow, BFC, IFC)

Saat mendesain HTML CSS, tata letaknya seringkali tidak sesuai harapan

Saya sering mencari jawaban di Google.

Baru-baru ini, saat menonton video Developer Talk dari Jezerocho, saya memutuskan untuk mempelajari dasar-dasar CSS.

- Saya ingin memahami elemen blok, elemen inline, margin, dan penjajaran.

Meskipun sudah memiliki pengalaman, saya merasa perlu untuk meringkasnya.

■ Jika saya perlu memodifikasi CSS dan hanya mengimplementasikannya berdasarkan tampilan saja dengan mencoba berbagai hal secara empiris, akan muncul masalah pada desain responsif atau menjadi rumit saat melakukan pemeliharaan di kemudian hari.

1. Normal Flow

- Tidak ada yang perlu dipikirkan secara khusus. Semua elemen ditempatkan dari atas ke bawah dan dari kiri ke kanan.

* Di durumis, saat saya menempelkan tag html, tag tersebut menghilang, apakah Anda tahu cara mengatasinya;;

- Tag p akan membuat dua blok, dan tag span akan digambar dalam satu baris.

2. BFC (Block Formatting Context)

- Biasanya digunakan saat menyusun tata letak. (Membuat blok dan menyusun inline di dalamnya.)

- Cara menumpuk elemen tingkat blok.

- Elemen tingkat blok adalah sebagai berikut.

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

- Terlepas dari panjang kontennya, elemen tersebut akan menempati seluruh lebar elemen induk. (Satu baris)

- Anda dapat memasukkan blok di dalam blok atau elemen inline.

- Anda dapat mengatur width, height, margin, dan padding.

- Dua baris akan dibuat di dalam tag div.

- Berikut adalah waktu pembuatan BFC. Anda dapat mencarinya kapan pun Anda membutuhkannya.

• Saat atribut float bukan none
• Saat position adalah absolute atau fixed
• Saat display adalah inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• Saat overflow bukan visible, dll
  
  

3. IFC (Inline Formatting Context)

- Dibuat di dalam elemen blok. (Tidak berdasarkan baris)

- Width dan height tidak dapat diatur secara langsung. (Menempati ukuran konten.)

- Hanya padding dan margin horizontal yang dapat diterapkan.

- Hanya elemen inline yang dapat disertakan dalam elemen inline.

<span>, <a>, , <img>, <input>, dll

Jadi, kapan digunakan?

- bfc digunakan untuk menangani interaksi float dan margin yang tumpang tindih.

1. Interaksi float

- Jika Anda menerapkan gaya yang bebas pada anak, orang tua tidak akan dapat menampungnya.

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

- Pada saat ini, gunakan bfc pada elemen induk untuk menyusun tata letak.

(Terapkan display: inline-block, overflow: auto, float: left, dll. pada tag induk.)

2. Margin yang tumpang tindih

- Css akan menumpuk margin atas dan bawah dua tag yang berdekatan.

contoh) Jarak atas dan bawah antara dua tag div di bawah ini adalah 100px, bukan 150px.

- Dalam situasi di atas, tambahkan elemen bfc baru di antara kedua tag tersebut.

ps. Apakah Anda tahu cara menyalin dan menempelkan html di durumis;;