Ha HTML és CSS-t rajzolok, a layout nem úgy alakul, ahogyan szeretném.

Sokan kérdeztem már a Google-t.

Nemrégiben láttam a Zerocho fejlesztői beszélgetésének videóját, és úgy döntöttem, hogy megtanulok valamit a CSS alapjairól.

- Szeretném megérteni a blokk- és az inline-elemeket, a margót és az igazítást.

Ez már tapasztalati úton is ismert, de rendszereznem kell.

■ A css módosítása esetén, ha tapasztalati úton alkalmazok különböző dolgokat, és csak a látható szempontok szerint valósítom meg, akkor a responsive designban problémák merülhetnek fel, vagy bonyolultabbá válik a későbbi karbantartás.

1. Normál áramlás

- Nincs különösebb gondolkodnivaló. Minden elem felülről lefelé, balról jobbra helyezkedik el.

* Tudod, hogy a durumisban miért tűnnek el a beillesztett html tagek? Van megoldás?

 <div>
     <p>Első bekezdés</p>
     <p>Második bekezdés</p>
     <span>Inline elem 1</span>
     <span>Inline elem 2</span>

- Két blokk keletkezik a p címkével, és a span címke egy sorban jelenik meg.

 Első bekezdés
 Második bekezdés

2. BFC (Block Formatting Context)

- Általában a layout felépítéséhez használják. (Blokkok felépítése, majd inline elemek felépítése bennük.)

- A blokk szintű elemek egymásra rakásának módja.

- A blokk szintű elemek a következők:

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

- A tartalom hosszához képest a szülő elem teljes szélességét foglalják el. (Egy sor)

- Blokkon belül blokkot vagy inline elemet lehet elhelyezni.

- Beállítható a width, height, margin, padding.

 <div style="padding :10px;"> 
     <h1>Cím</h1>
     <p>Rövid bekezdés.</p>

- Két sor keletkezik a div címkén belül.

- A BFC létrehozásakor az alábbiak szerint kell eljárni. Szükség szerint keress rá.

• A float tulajdonság nem none.
• A position tulajdonság absolute vagy fixed.
• A display tulajdonság inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid.
• Az overflow tulajdonság nem visible. stb.
  
  

3. IFC (Inline Formatting Context)

<p>
    Üdvözlet! <strong> Durumis </strong> második bejegyzés!
    <span style="color: pink;">Tetszik</button> gomb megnyomása.

- Blokk elemeken belül van kialakítva. (Nincs soronkénti beállítás)

- A width és height tulajdonság nem állítható be közvetlenül. (A tartalom mérete szerint foglal el helyet.)

- Csak vízszintes padding és margin alkalmazható.

- Csak inline elemeket lehet inline elemekbe foglalni.

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

Szóval mikor kell használni?

- A bfc-t a float kölcsönhatások vagy a marginok kompenzációjának kezelésére használják.

1. Float kölcsönhatások

- Ha a gyermeknek szabad stílust adunk, a szülő nem tudja körülvenni.

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

- Ebben az esetben a szülő elemhez bfc-t adunk, hogy a layout be legyen állítva.

(A szülő címkéhez adjuk hozzá a display: inline-block, overflow: auto, float: left tulajdonságokat.)

<div class="szülő" style="display: inline-block;">
    <div class="gyerek" style="float: left;">...</div>

2. Margin kompenzáció

- A css-ben a szomszédos két címke felső és alsó margója átfedi egymást.

pl.) Az alábbi két div címke közötti felső és alsó távolság nem 150px, hanem 100px.

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

- A fenti helyzetben új bfc elemet adunk hozzá a két címke közé.

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

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

ps. Tudod, hogyan kell beilleszteni a durumis html-t?