Podstawowe zasady CSS (Normal flow, BFC, IFC)

Tworząc projekty w HTML i CSS, zdarzało mi się, że układ strony nie wyglądał tak, jak sobie zaplanowałem.

Wiele razy korzystałem z wyszukiwarki Google, aby znaleźć rozwiązanie.

Ostatnio oglądając filmik z wykładem programistycznym od Zerocho, postanowiłem dogłębnie poznać podstawy CSS.

- Chcę zrozumieć elementy blokowe, elementy liniowe, marginesy i wyrównanie.

Chociaż mam już pewne doświadczenie w tej dziedzinie, uważam, że warto to uporządkować.

■ Kiedy muszę zmodyfikować CSS, często próbuję różnych rozwiązań na zasadzie prób i błędów, skupiając się na wizualnym efekcie. Taki sposób działania może prowadzić do problemów z responsywnością strony lub utrudnić późniejszą konserwację kodu.

1. Normal Flow

- Nie ma tu nic szczególnego do rozważania. Wszystkie elementy są rozmieszczane od góry do dołu i od lewej do prawej.

* W durumis, gdy wklejam znaczniki HTML, znikają. Czy znacie rozwiązanie tego problemu;;

- Tagi p tworzą dwa bloki, a tagi span są wyświetlane w jednej linii.

2. BFC (Block Formatting Context)

- Jest to głównie wykorzystywane do tworzenia układów (tworzymy bloki, a w nich elementy liniowe).

- To sposób, w jaki elementy blokowe są układane.

- Elementy blokowe to:

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

- Zajmują całą szerokość elementu nadrzędnego, niezależnie od długości zawartości. (jedna linia)

- Wewnątrz bloku można umieszczać inne bloki lub elementy liniowe.

- Można ustawiać szerokość, wysokość, marginesy i wypełnienia.

- Wewnątrz tagu div zostaną utworzone dwa wiersze.

- BFC jest tworzony w następujących przypadkach: należy to sprawdzać w razie potrzeby.

• gdy atrybut float nie ma wartości none
• gdy atrybut position ma wartość absolute lub fixed
• gdy atrybut display ma wartość inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid
• gdy atrybut overflow ma inną wartość niż visible itd.
  
  

3. IFC (Inline Formatting Context)

- Tworzony jest wewnątrz elementu blokowego. (bez podziału na wiersze)

- Nie można bezpośrednio ustawiać szerokości i wysokości. (zajmuje tyle miejsca, ile zajmuje zawartość).

- Można stosować tylko poziome wypełnienia i marginesy.

- Wewnątrz elementu liniowego można umieszczać tylko elementy liniowe.

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

A kiedy to się przydaje?

- BFC jest używane do obsługi interakcji float oraz eliminacji nakładania się marginesów.

1. Interakcje float

- Jeśli nadamy dziecku swobodny styl, rodzic nie będzie go otaczał.

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

- W takiej sytuacji używamy BFC dla elementu nadrzędnego, aby zorganizować układ.

(Do elementu nadrzędnego stosujemy display: inline-block, overflow: auto, float: left itd.)

2. Nakładanie się marginesów

- W CSS, górne i dolne marginesy sąsiednich tagów nakładają się na siebie.

Przykład) Odległość między tymi dwoma tagami div nie wynosi 150px, a 100px.

- W tej sytuacji dodajemy nowy element BFC pomiędzy te dwa tagi.

ps. Czy wiecie, jak wklejać kod HTML do durumis;;