4. Model formatowania wizualnego CSS

Model formatowania wizualnego CSS to zbiór zasad określających sposób przetwarzania drzewa dokumentu przez przeglądarki wizualne. Jego znajomość nie jest absolutnie niezbędna do sprawnego posługiwania się Kaskadowymi arkuszami stylów, ale na pewno pomaga zrozumieć wiele aspektów tej technologii, zwłaszcza związanych z rozmieszczeniem elementów oraz relacjami, jakie występują między nimi w odniesieniu do ustalania ich położenia względem siebie w obszarze widoku (ang. viewport).

W Modelu formatowania wizualnego CSS funkcjonuje szereg specyficznych pojęć, m.in. określających różne rodzaje wirtualnych pól, jakie przeglądarka tworzy podczas renderowania dokumentu w swoim oknie. Ponadto obejmuje on kilka własności CSS, m.in. własności display i position (oraz powiązane z nią własności top, right, bottom i left). W tym rozdziale dowiesz się, co dokładnie dzieje się z elementami HTML Twojej strony podczas przetwarzania ich przez algorytmy CSS przeglądarki internetowej oraz jak zapanować nad tymi procesami.

Pola blokowe i pola śródliniowe

Elementy HTML można podzielić na dwie grupy pod względem sposobu prezentacji: elementy blokowe (np. p) i elementy śródliniowe (np. strong). To, do której z tych grup należy dany element, decyduje o tym, jakie pole zostanie dla niego wygenerowane przez CSS.

O tym, czy dany element jest wizualnie formatowany jako blokowy czy śródliniowy, decyduje ustawienie własności display. Jeśli ma ona wartość block, list-item lub table, to element zachowuje się jak element blokowy. Jeśli natomiast własność display elementu ma wartość inline, inline-table lub inline-block, to zachowuje się on jak element śródliniowy.

Innymi słowy własność display określa tzw. typ prezentacji pola (ang. box display type). Wyróżnia się dwa typy prezentacji pól generowanych przez CSS:

• Wewnętrzny typ prezentacji (ang. inner display type): określa rodzaj kontekstu formatowania tworzonego przez dane pole, od którego zależy sposób rozmieszczenia jego pól potomnych. Wewnętrzne typy prezentacji określają następujące wartości własności display: flow, flow-root, table, flex, grid oraz ruby.
• Zewnętrzny typ prezentacji (ang. outer display type): określa sposób zachowywania się pola głównego w układzie normalnym. Zewnętrzne typy prezentacji określają następujące wartości własności display: block, inline i run-in.

Dla każdego elementu blokowego (ang. block-level element) w dokumencie HTML wewnętrzne algorytmy CSS generują odpowiadające mu pole poziomu blokowego (ang. block-level box), a dla każdego elementu śródliniowego (ang. inline-level element) w dokumencie HTML wewnętrzne algorytmy CSS generują odpowiadające mu pole poziomu śródliniowego (ang. inline-level box).

Pola poziomu blokowego biorą udział w kontekście formatowania blokowego (ang. block formatting context). Każde z nich generuje tzw. główne pole poziomu blokowego (ang. principal block-level box), które zawiera pola elementów potomnych i treści generowanej oraz bierze udział w pozycjonowaniu. Ponadto pola poziomu blokowego typu list-item generują dodatkowe pole, którego położenie jest ustalane względem pola głównego.

Z kolei pola poziomu śródliniowego biorą udział w kontekście formatowania śródliniowego (ang. inline formatting context).

Natomiast pola śródliniowe (ang. inline box) to takie, które są poziomu śródliniowego i których treść bierze udział w zawierającym śródliniowym kontekście formatowania. Generują je elementy niezastępowane (ang. non-replaced element) typu śródliniowego.

W pewnych przypadkach CSS generuje tzw. pola anonimowe. Ma to miejsce wtedy, gdy treść tekstowa znajduje się w sąsiedztwie elementów blokowych lub śródliniowych.

Anonimowe pola blokowe

Dla tekstu znajdującego się bezpośrednio w elemencie blokowym (tzn. nieujętego w żaden inny element) w otoczeniu tylko elementów blokowych tworzone jest tzw. anonimowe pole blokowe (ang. anonymous block box). Na przykład:

<div>
  Jakiś tekst.
  <p>Akapit.</p>
</div>

W tym przypadku CSS utworzy anonimowe pole blokowe dla tekstu Jakiś tekst. i zwykłe pole poziomu blokowego dla elementu p.

Anonimowe pola śródliniowe

Jeśli natomiast tekst znajduje się w elemencie blokowym zawierającym także element śródliniowy, to dla tego tekstu tworzone jest anonimowe pole śródliniowe (ang. anonymous inline box). Na przykład:

<p>To jest <strong>bardzo ważny tekst</strong>, który trzeba zapamiętać.</p>

W tym przypadku CSS wygeneruje pole blokowe zawierające trzy pola śródliniowe – jedno dla zawartości elementu strong i po jednym dla tekstu znajdującego się przed i za tym elementem.

Tryby rozmieszczenia pól elementów

W CSS 2.1 zdefiniowano trzy tryby rozmieszczenia pól elementów:

• Układ normalny (ang. normal flow): obejmuje kontekst formatowania blokowego pól blokowych, kontekst formatowania śródliniowego pól śródliniowych oraz pozycjonowanie względne i kleiste (ang. sticky) pól blokowych i śródliniowych.
• Układ pól pływających (ang. float model): w tym modelu pole jest najpierw umieszczane zgodnie z zasadami układu normalnego, a następnie odpowiednio przemieszczane zgodnie z ustawieniem własności float.
• Pozycjonowanie absolutne lub bezwzględne (ang. absolute positioning): w tym modelu pole jest całkowicie wyjęte z układu normalnego i nie wpływa na położenie elementów sąsiednich, a o jego położeniu decydują właściwości bloku zawierającego i ustawienia własności top, right, bottom i left. Ten model obejmuje także pozycjonowanie stałe (ang. fixed).

Układ normalny

W układzie normalnym pola elementów blokowych są rozmieszczone zgodnie z kontekstem formatowania blokowego, a pola elementów śródliniowych – zgodnie z kontekstem formatowania śródliniowego.

W kontekście formatowania blokowego pola są układane pionowo jedno pod drugim. Odstęp między nimi określają ustawienia własności margin-top i margin-bottom, między którymi występuje tzw. scalane marginesów (ang. margin collapsing). Polega ono na tym, że między przylegającymi elementami blokowymi marginesy pionowe nie są sumowane, tylko większy „wchłania” mniejszy i w efekcie odstęp między tymi elementami jest równy szerszemu z dwóch marginesów.

W kontekście formatowania śródliniowego pola są rozmieszczone poziomo obok siebie. Działają w nim tylko poziome ustawienia marginesów, obramowania i dopełnienia.

Prostokątny obszar otaczający poszczególne wiersze w tym kontekście nazywa się polem liniowym (ang. line box). O jego szerokości decyduje szerokość bloku zawierającego i to, czy w sąsiedztwie znajdują się elementy pływające.

Pozycjonowanie względne

W modelu pozycjonowania względnego pole elementu najpierw zostaje umieszczone w układzie normalnym, a następnie może zostać przesunięte względem tej pozycji bez wpływu na otaczające je elementy. To oznacza, że w przypadku tego modelu może dojść do nałożenia się pól na siebie, w związku z czym jedno jest przesłonięte przez drugie.

Pola pozycjonowane, jakąkolwiek metodą, tworzą tzw. kontekst stosowy (ang. stacking context), czyli warstwowe rozmieszczenie pól na osi pionowej. Im wyżej na tej osi znajduje się pole, tym bliżej jest ono „wierzchu” stosu.

Jeśli na przykład na stronie znajdują się trzy elementy pozycjonowane i wszystkie na siebie nachodzą, to jeden z nich będzie na samym spodzie, drugi będzie pośrodku, a trzeci będzie na wierzchu i będzie w całości widoczny. Pozostałe dwa będą częściowo lub całkowicie zasłonięte zależnie od rozmiarów wszystkich elementów.

Za pomocą własności z-index można określić kolejność pól pozycjonowanych w kontekście stosowym. Własność ta przyjmuje jako wartość liczbę całkowitą. Im wyższa jej wartość, tym bliżej dany element znajduje się wierzchu stosu. Element o najwyższej wartości jest na samej „górze”.

Układ pól pływających

W modelu pól pływających pole najpierw jest umieszczane w układzie normalnym, a następnie zostaje z niego wyjęte i przemieszczone w lewo lub w prawo do lewej lub prawej krawędzi bloku zawierającego w taki sposób, że sąsiednia treść znajduje się po jego lewej lub prawej stronie.

Za pomocą własności clear można sprawić, że po lewej stronie, po prawej stronie lub po obu stronach wybranego elementu nie będą mogły się znajdować żadne elementy pływające.

Pole wyjęte z normalnego układu i pozycjonowane według innych zasad poza tym układem w nadrzędnym kontekście formatowania nazywa się polem spoza układu (ang. out-of-flow box). Polami spoza układu są pola pływające i pozycjonowane absolutnie.

Wszystkie pozostałe pola należą do układu i noszą nazwę pól z układu (ang. in-flow box).

Pozycjonowanie absolutne

W modelu pozycjonowania absolutnego (ang. absolute positioning) pole zostaje całkowicie wyjęte z układu normalnego, a następnie jego położenie jest ustalane względem najbliższego zawierającego bloku pozycjonowanego lub względem obszaru widoku, jeśli nie ma takiego bloku. Pole pozycjonowane absolutnie nie wpływa na położenie innych elementów.

Pozycjonowanie stałe (ang. fixed positioning) różni się od absolutnego tym, że w pozycjonowaniu stałym blokiem zawierającym jest obszar widoku.

Niezależne konteksty formatowania

Niezależny kontekst formatowania (ang. independent formatting context) to osobne środowisko rozmieszczenia pól elementów, które jest niezależne od warunków zewnętrznych i z nimi nie oddziałuje, np. elementy pływające nie wychodzą poza taki kontekst.

Niezależny kontekst formatowania może powstać w kilku różnych sytuacjach, m.in. tworzy go element będący kontenerem siatki (który tworzy Kontekst formatowania siatkowego – ang. Grid Formatting Context), a także tworzą go pola spoza układu.