CSS alapvető szabályai (Normál áramlás, BFC, IFC)

HTML és CSS tervezése közben előfordul, hogy a layout nem úgy alakul, ahogy elképzeltem

és sokszor kérdeztem rá a Google-ben.

Nemrégiben Zerocho fejlesztői beszélgetős videóját nézve úgy döntöttem, hogy mélyebben beleásom magam a CSS alapjaiba.

- Meg szeretném érteni a blokk elemeket, az inline elemeket, a margókat és az igazítást.

Tapasztalati szinten már ismerem ezeket a fogalmakat, de fontosnak tartom, hogy rendszerezzem a tudásom.

■ Ha módosítanom kell a css-t, és csak tapasztalati alapon, a megjelenés alapján módosítom, akkor a responsive designban problémák adódhatnak, vagy a későbbi karbantartás bonyolulttá válhat.

1. Normál áramlás

- Nincs itt semmi különös. Minden elem felülről lefelé, balról jobbra rendeződik.

* A durumis-ban ha html kódot illesztünk be, akkor eltűnik, tudjátok a megoldást;;

- A p tag két blokkot hoz létre, a span tag pedig egy sorban jelenik meg.

2. BFC (Blokk Formázási Kontextus)

- Főleg a layout kialakításakor használják. (Blokkok létrehozása, és azokon belül inline elemek.)

- 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 elfoglalja. (Egy sorban)

- A blokkon belül beilleszthetünk másik blokkot, vagy inline elemeket.

- Beállítható a szélesség (width), a magasság (height), a margó (margin) és a betöltés (padding).

- A div tagon belül két sor jön létre.

- A BFC létrehozása a következő esetekben történik. Érdemes mindig ellenőrizni.

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

3. IFC (Inline Formázási Kontextus)

- Blokk elemekben jön létre. (Sorok nem számítanak)

- A szélességet (width) és a magasságot (height) nem lehet közvetlenül beállítani. (Csak a tartalom mérete számít.)

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

- Az inline elemekbe csak inline elemeket lehet beilleszteni.

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

Szóval mikor használjuk?

- A bfc-t a float kölcsönhatások vagy a margin törlése kezelésére használják.

1. Float kölcsönhatás

- Ha a gyermeknek szabad stílust adunk, akkor a szülő nem tudja befogadni.

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

- Ebben az esetben a szülő elemnek adunk bfc-t a layout kialakításához.

(A szülő tag-nek adjuk a display: inline-block, overflow: auto, float: left tulajdonságokat.)

2. Margin törlése

- A css-ben a szomszédos két tag felső és alsó margója összeolvad.

pl.) Az alábbi két div tag közötti felső és alsó rés 150px helyett 100px lesz.

- A fenti helyzetben új bfc elemet adunk a két tag közé.

ps. Tudjátok, hogyan lehet html-t beilleszteni a durumis-ba;;