Jak rozstawić bloki strony: display i przepływ dokumentu, position ze wszystkimi pięcioma wartościami, z-index, obtekanie float z czyszczeniem clear oraz overflow dla bloku o stałej wysokości. Lekcja 4.6 kursu INF.03.
Układ strony to sposób rozmieszczenia bloków na ekranie: co stoi na górze, co obok czego i co zostaje na swoim miejscu, gdy strona się przewija. HTML ustala wyłącznie kolejność znaczników, a o tym, czy panel boczny i blok główny staną w dwóch kolumnach, decyduje CSS. W części pisemnej wracają pytania „właściwość float pozwala na umieszczenie elementu", „czym różni się display: none od visibility: hidden", „co robi position: fixed", „do czego służy z-index", a także rysunek układu bloków od 2 do 5 z czterema blokami kodu CSS do wyboru. W zadaniu praktycznym arkusz każe ustawić dwa bloki obok siebie z szerokościami podanymi w procentach, dać banerowi wysokość w pikselach i zrobić obrazy opływane przez tekst.
display: czym element jest dla układu
display (wyświetlanie) to właściwość, która decyduje, ile miejsca element zajmuje w wierszu i czy w ogóle zostaje narysowany. Każdy znacznik ma wartość domyślną: <div>, <p>, <h1> i znaczniki sekcji są blokowe, a <a>, <span>, <img> i <strong> liniowe. display te wartości nadpisuje, więc z odnośnika da się zrobić prostokąt o zadanej szerokości, a z punktu listy przycisk menu.
block
element zajmuje całą szerokość rodzica i zaczyna nowy wiersz
inline
element stoi w wierszu tekstu, width i height go nie dotyczą
inline-block
stoi w wierszu obok sąsiadów, ale przyjmuje szerokość, wysokość i marginesy
none
element znika ze strony i nie zajmuje miejsca
Para display: none i visibility: hidden (widoczność ukryta) to gotowe pytanie testowe. Pierwszy zapis usuwa element z układu: strona wygląda tak, jakby tego znacznika w kodzie nie było, a sąsiedzi przesuwają się na jego miejsce. Drugi zostawia pustą dziurę dokładnie tej wielkości co ukryty element i tylko przestaje go rysować. Sekcje pomijane na wąskim ekranie chowa się pierwszym sposobem, bo puste miejsce po panelu nie ma sensu.
Menu poziome z lekcji o listach i odnośnikach jest w HTML listą punktowaną, więc przeglądarka domyślnie ustawia punkty jeden pod drugim i rysuje kropki. Obie rzeczy zdejmuje się w CSS. nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
list-style: none usuwa punktory, a display: inline-block na elemencie listy ustawia punkty obok siebie w jednym wierszu, przy czym każdy z nich nadal przyjmuje marginesy wewnętrzne i szerokość, czego sama wartość inline nie daje. Dwie kolejne wartości, flex i grid, robią z elementu pojemnik układający dzieci w rząd albo w siatkę i to jest dzisiejszy sposób budowania kolumn: opisuje go lekcja o flexboksie i siatce. Przepływ dokumentu i wymiary bloku
Przepływ dokumentu (normal flow, przepływ normalny) to domyślne ustawianie elementów, zanim ruszy się cokolwiek z układu: bloki idą jeden pod drugim w kolejności z pliku HTML, a elementy liniowe obok siebie w wierszu, aż do prawej krawędzi rodzica, i dalej od nowego wiersza. Blok zajmuje domyślnie całą szerokość rodzica, a jego wysokość bierze się z zawartości, więc dłuższy tekst rozpycha go w dół.
Wymiary ustawiają cztery właściwości. width (szerokość) i height (wysokość) podają wartość sztywną, w pikselach albo w procentach rozmiaru rodzica. max-width (szerokość największa) pozwala elementowi być węższym, ale nie szerszym niż podana wartość, a min-height (wysokość najmniejsza) rezerwuje wysokość nawet dla pustego bloku.
main {
width: 70%;
min-height: 300px;
}
article img {
max-width: 100%;
}
Zapis max-width: 100% na obrazie znaczy: nigdy szerszy niż blok, w którym stoi. Bez tego zdjęcie produktu o szerokości 1200 px wystaje poza kolumnę i rozpycha układ na telefonie.
Pułapka: procent w width liczy się od szerokości RODZICA, a nie od szerokości okna. Zapis width: 50% w bloku szerokim na 600 px daje 300 px.
position: pozycjonowanie względem czego innego
position (pozycjonowanie) to właściwość, która wskazuje punkt odniesienia dla przesunięcia elementu, a samo przesunięcie zapisują top, right, bottom i left. Te cztery właściwości bez position nie robią nic, bo przy wartości domyślnej static przeglądarka je ignoruje.
Wartość
Względem czego przesuwa
Czy zostaje w przepływie
static
nie przesuwa się wcale, to wartość domyślna
tak
relative
własnego miejsca w przepływie
tak, miejsce po nim zostaje puste
absolute
najbliższego przodka z position innym niż static
nie, sąsiedzi zamykają lukę
fixed
okna przeglądarki
nie, nie przewija się razem z treścią
sticky
swojego miejsca, dopóki nie dojedzie do krawędzi okna
tak, potem przykleja się do krawędzi
Cztery przypadki pozycjonowania: relative przesuwa element względem jego własnego miejsca, absolute liczy odległości od pozycjonowanego przodka, fixed przykleja pasek do okna, a float ustawia obraz z lewej i puszcza tekst dookoła
Rysunek pokazuje różnicę, która najczęściej myli się w teście. Element z relative odsunięty o 20 px w dół zostawia w przepływie swoje puste miejsce, więc sąsiedzi stoją tam, gdzie stali. Element z absolute z przepływu wypada, więc następny blok podjeżdża pod niego, a odległości liczą się od krawędzi przodka, który sam ma ustawione position. Element z fixed odnosi się do okna przeglądarki i przy przewijaniu strony zostaje w tym samym punkcie ekranu, dlatego robi się z niego pasek na dole albo przycisk powrotu do góry. Ostatnia wartość, sticky (przyklejony), zachowuje się jak relative do chwili, gdy element dojedzie do zadanej krawędzi okna, i dopiero wtedy zostaje w miejscu.
Kiedy elementy zaczynają na siebie nachodzić, o kolejności warstw decyduje z-index (kolejność nakładania). Wyższa liczba znaczy wyżej w stosie, a element bez tej właściwości leży niżej niż każdy z dodatnią wartością. Warunek jest jeden: z-index działa wyłącznie na elemencie z position innym niż static, więc dopisany do zwykłego bloku nie robi nic.
article {
position: relative;
}
.nowosc {
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
Etykieta „nowość" siada w prawym górnym rogu artykułu z produktem, bo article dostał position: relative i przez to stał się punktem odniesienia. Bez tej jednej linijki etykieta liczyłaby odległości od okna i wylądowałaby w rogu strony.
float i clear: obtekanie
float (obtekanie) to właściwość, która dosuwa element do lewej albo prawej krawędzi rodzica i każe pozostałej treści opływać go z drugiej strony. Przyjmuje wartości left, right i none. Arkusze CKE nazywają to wprost „obrazy opływane przez tekst", a w banku pytań stoi zdanie „właściwość float pozwala na umieszczenie elementu po lewej lub prawej stronie innego elementu".
article img {
float: left;
margin-right: 15px;
}
Zdjęcie produktu staje przy lewej krawędzi artykułu, a opis układa się z jego prawej strony i schodzi pod obraz dopiero wtedy, gdy jest od niego dłuższy. margin-right odsuwa tekst od obrazu, bo bez marginesu litery kleją się do krawędzi zdjęcia.
Ta sama właściwość ustawia dwa bloki obok siebie i tak budowano kolumny przed flexboksem: panel boczny dostaje float: left z szerokością 30 procent, blok główny float: right z szerokością 70 procent, a stopka musi zejść pod oba. Do tego służy clear (czyszczenie), które zabrania elementowi stanąć obok bloków opływanych: clear: left omija te dosunięte do lewej, clear: right te z prawej, a clear: both schodzi pod wszystkie.
Element opływany wypada z przepływu, więc rodzic przestaje liczyć go do swojej wysokości. Rodzic z dwiema kolumnami w środku zapada się do zera i tło ucieka spod treści. Leczy się to dwoma sposobami: overflow: auto na rodzicu każe mu objąć zawartość, a starszy zapis clearfix dokleja na końcu bloku pseudoelement z clear: both. Pseudoelementy opisuje lekcja o pseudoklasach i pseudoelementach. overflow: co z treścią, która się nie mieści
overflow (przepełnienie) mówi, co zrobić z zawartością wyższą niż blok o ustalonej wysokości. Bez tej właściwości tekst po prostu wystaje poza obramowanie i nachodzi na to, co stoi niżej.
Wartość
Co się dzieje z nadmiarem
visible
wystaje poza blok i nachodzi na sąsiadów, to wartość domyślna
hidden
zostaje przycięty na krawędzi i nie ma jak do niego dotrzeć
scroll
blok dostaje paski przewijania, także gdy treść się mieści
auto
paski pojawiają się tylko wtedy, gdy treść nie mieści się w bloku
aside {
height: 200px;
overflow: auto;
}
Panel boczny o wysokości 200 px z długą listą polecanych produktów dostaje własny pasek przewijania i przestaje rozpychać stronę w dół.
Układ sklepu zbudowany na floatach
Witryna sklepu komputerowego z lekcji o znacznikach sekcji ma baner, menu, panel boczny obok bloku głównego i stopkę. Kolumny rozstawia poniższy kawałek arkusza styl.css, a pasek koszyka zostaje przyklejony do dolnej krawędzi okna. aside {
float: left;
width: 30%;
}
main {
float: right;
width: 70%;
}
footer {
clear: both;
}
#koszyk {
position: fixed;
bottom: 0;
}
Panel boczny idzie do lewej krawędzi i zajmuje 30 procent szerokości, blok główny do prawej z pozostałymi 70 procentami, więc oba stają w jednym wierszu, choć w pliku HTML leżą jeden pod drugim. Stopka z clear: both schodzi pod obie kolumny zamiast wciskać się obok nich. Blok koszyka z position: fixed i bottom: 0 przykleja się do dołu okna i zostaje tam przy przewijaniu strony, a gdy ma leżeć nad treścią, dokłada mu się jeszcze z-index. Obraz produktu z float: left opływa się tekstem wewnątrz artykułu, niezależnie od kolumn.
Na egzaminie
Pytania pisemne o układ mają kilka stałych kształtów. Pierwszy to zdanie o float: właściwość ta umieszcza element po lewej lub prawej stronie innego elementu, a nie nad nim ani pod nim, i to samo pytanie wraca z rysunkiem obrazu opływanego tekstem, gdzie odpowiedzią jest float: left w stylu obrazu. Drugi kształt to display: none kontra visibility: hidden: pierwszy zapis usuwa element razem z jego miejscem, drugi zostawia puste miejsce. Trzeci to position: fixed jako sposób na element nieruchomy względem okna przeglądarki, przy czym nieruchome TŁO robi osobna właściwość background-attachment z wartością fixed. Czwarty to z-index, czyli kolejność nakładania elementów, działająca tylko przy pozycjonowaniu innym niż static. Piąty to rysunek układu bloków ponumerowanych od 2 do 5 i cztery bloki kodu CSS do wyboru: rozstrzygają go szerokości oraz to, który blok ma float, a który clear. Szósty to overflow jako właściwość decydująca o treści wystającej poza blok. Wraca też menu poziome z listy punktowanej, w którym elementom <li> ustawia się właściwość display.
Jedna pułapka kosztuje najwięcej. Dwa bloki po 50 procent szerokości z obramowaniem albo marginesem wewnętrznym nie zmieszczą się w jednym wierszu, bo domyślnie te wartości dokładają się do szerokości i suma przekracza 100 procent, więc drugi blok spada pod pierwszy. Ratuje to box-sizing: border-box z lekcji o modelu pudełkowym albo szerokości dobrane z zapasem. W zadaniu praktycznym polecenia z arkusza tłumaczy się na właściwości niemal słowo w słowo. „Obrazy opływane przez tekst" to float: left albo float: right w stylu obrazu, „panel lewy o szerokości 30 procent, prawy 70 procent" to dwa bloki opływane z szerokościami w procentach albo pojemnik z display: flex, „wysokość banera 80 px" to height w pikselach, a „stopka na całej szerokości pod panelami" to clear: both. Style piszesz w zewnętrznym pliku dołączonym przez <link>, bo atrybut style w znaczniku kosztuje punkt. Gdy polecenie żąda stylów wyłącznie przez selektory znaczników, kolumny wskazuje się nazwami aside i main, a nie klasą dopisaną do kodu HTML.
Ściąga
display: block
cała szerokość rodzica, element zaczyna nowy wiersz
display: inline-block
obok siebie w wierszu, ale z szerokością i wysokością
display: none
element znika, miejsce po nim się zamyka
visibility: hidden
element niewidoczny, puste miejsce po nim zostaje
position: relative
przesunięcie względem własnego miejsca, ślad zostaje
position: absolute
względem pozycjonowanego przodka, poza przepływem
position: fixed
względem okna, nie przewija się z treścią
position: sticky
przykleja się po dojechaniu do krawędzi okna
z-index: 2
wyżej w stosie, tylko z position innym niż static
float: left
element przy lewej krawędzi, treść opływa go z prawej
clear: both
element schodzi pod wszystkie bloki opływane
overflow: auto
paski przewijania, gdy treść nie mieści się w bloku
width: 30%
szerokość liczona od szerokości rodzica