Ketika menggambar HTML CSS, tata letak tidak seperti yang diharapkan

Saya memiliki pengalaman banyak bertanya kepada Google.

Baru-baru ini, saya melihat video obrolan pengembang dari Zerocho dan memutuskan untuk mempelajari dasar-dasar CSS.

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

Saya sudah mengetahuinya secara empiris, tetapi saya perlu mencatatnya.

■ Jika Anda perlu memodifikasi css, jika Anda menerapkannya secara empiris dan mengimplementasikannya sesuai dengan yang Anda lihat, akan terjadi masalah dalam desain responsif, atau akan menjadi rumit untuk dipelihara di masa mendatang.

1. Alur Normal

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

* Ketika Anda menulis posting di durumis, jika Anda menempelkan tag html, itu akan hilang, apakah Anda tahu cara mengatasinya;;

 <div>
     <p>Paragraf pertama</p>
     <p>Paragraf kedua</p>
     <span>Elemen inline 1</span>
     <span>Elemen inline 2</span>

- Dua blok dibuat dengan tag p, dan tag span digambar dalam satu baris.

 Paragraf pertama
 Paragraf kedua

2. BFC (Konteks Pemformatan Blok)

- Biasanya digunakan untuk mengatur tata letak. (Buat blok, lalu buat inline di dalamnya.)

- Ini adalah cara elemen tingkat blok ditumpuk.

- Elemen tingkat blok adalah sebagai berikut.

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

- Mengambil lebar penuh elemen induk, terlepas dari panjang konten di dalamnya. (Satu baris)

- Anda dapat memasukkan blok ke dalam blok, atau Anda dapat memasukkan elemen inline.

- Anda dapat mengatur lebar, tinggi, margin, dan padding.

 <div style="padding :10px;"> 
     <h1>Judul</h1>
     <p>Paragraf singkat. </p>

- Dua baris dibuat di dalam tag div.

- Berikut adalah kapan BFC dibuat. Anda dapat mencarinya dari waktu ke waktu.

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

3. IFC (Konteks Pemformatan Inline)

<p>
    Halo! <strong> durumis </strong> Ini adalah posting kedua!
    <span style="color: pink;">tombol suka</button> silakan tekan.

- Dibentuk di dalam elemen blok. (Bukan berdasarkan baris)

- Lebar dan tinggi tidak dapat disetel secara langsung. (Mengambil ruang sebesar ukuran konten)

- Hanya padding dan margin horizontal yang dapat diterapkan.

- Hanya elemen inline yang dapat disertakan di dalam elemen inline.

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

Jadi, kapan Anda menggunakannya?

- bfc digunakan untuk menangani interaksi float atau pembatalan margin.

1. Interaksi Float

- Jika Anda menerapkan gaya yang bebas kepada anak, orang tua tidak dapat melingkupinya.

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

- Pada saat ini, BFC diberikan kepada elemen induk untuk mengatur tata letak.

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

<div class="parent" style="display: inline-block;">
    <div class="child" style="float: left;">...</div>

2. Pembatalan Margin

- css tumpang tindih margin atas dan bawah dua tag yang berdekatan.

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

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

- Tambahkan elemen bfc baru di antara dua tag dalam situasi di atas.

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

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

ps. Apakah Anda tahu cara menempelkan html durumis;;