Tworząc strony w HTML i CSS, często zdarza się, że układ nie wygląda tak, jak sobie wyobrażaliśmy.

Wiele razy korzystałem z Google w poszukiwaniu odpowiedzi.

Niedawno oglądałem filmik z serii "Deweloperzy gadają" na kanale Zerocho, który zainspirował mnie do pogłębienia podstaw CSS.

- Chcę lepiej zrozumieć, czym są elementy blokowe i liniowe, marginesy i wyrównanie.

Choć znam te pojęcia w praktyce, warto je uporządkować.

■ Modyfikując CSS metodą prób i błędów, opierając się wyłącznie na wizualnym efekcie, możemy napotkać problemy z responsywnością projektu lub komplikacje podczas przyszłej konserwacji.

1. Normalny przepływ

- Nie ma tu nic nadzwyczajnego. Wszystkie elementy są rozmieszczane od góry do dołu i od lewej do prawej.

* Czy wiecie, jak rozwiązać problem znikających znaczników HTML wstawianych w postach na durumis?

 <div>
     <p>Pierwszy akapit</p>
     <p>Drugi akapit</p>
     <span>Element liniowy 1</span>
     <span>Element liniowy 2</span>

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

 Pierwszy akapit
 Drugi akapit

2. BFC (Kontekst formatowania bloków)

- Głównie używany do tworzenia układów (tworzenie bloków i umieszczanie w nich elementów liniowych).

- Określa sposób, w jaki elementy blokowe są ułożone.

- 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 umieścić inne bloki lub elementy liniowe.

- Można ustawiać atrybuty width, height, margin i padding.

 <div style="padding :10px;"> 
     <h1>Tytuł</h1>
     <p>Krótki akapit. </p>

- Tag div tworzy dwa wiersze.

- BFC tworzy się w następujących przypadkach. Warto je zapamiętać.

• Gdy atrybut float ma wartość inną niż 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 wartość inną niż visible.
  
  

3. IFC (Kontekst formatowania liniowego)

<p>
    Cześć! <strong> durumis </strong> to mój drugi wpis!
    <span style="color: pink;">kliknij</button> przycisk "Lubię to".

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

- Nie można ustawiać atrybutów width i height. (zajmują tyle miejsca, ile zajmuje zawartość).

- Można stosować poziome padding i margin.

- Wewnątrz elementu liniowego można umieścić tylko inne elementy liniowe.

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

A kiedy ich używać?

- BFC jest wykorzystywany do obsługi interakcji float i marginesów.

1. Interakcje z float

- Nadanie swobodnego stylu dziecku uniemożliwia rodzicom jego otoczenie.

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

- W takim przypadku należy utworzyć BFC dla elementu nadrzędnego, aby zorganizować układ.

(Należy zastosować atrybut display: inline-block, overflow: auto, float: left itd. dla elementu nadrzędnego).

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

2. Skasowanie marginesu

- W CSS marginesy górny i dolny są łączone dla sąsiadujących ze sobą tagów.

Np. odstęp między dwoma tagami div poniżej nie wynosi 150px, a 100px.

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

- W takiej sytuacji należy dodać nowy element BFC między te tagi.

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

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

Uwaga: czy wiecie, jak skopiować kod HTML z durumis?