Model pudełkowy, który rozjeżdża każdy layout

2026-10-19T18:34:49Z

ErickaPulver: Die Seite wurde neu angelegt: „Najczęstsze błędy to kopiowanie reguły w inne miejsce bez usunięcia starej, dopisywanie zmian na końcu przypadkowego pliku oraz poleganie na kolejności tam, gdzie selektory mają różną specyficzność. Zamiast tego ustal jedną kolejność: najpierw style wspólne, potem komponenty, na końcu wyjątki. Gdy późniejsza linia nadpisuje wcześniejszą, sprawdź, czy to zamierzone. Jeśli nie — popraw selektor albo przenieś regułę, zamiast dod…“

Najczęstsze błędy to kopiowanie reguły w inne miejsce bez usunięcia starej, dopisywanie zmian na końcu przypadkowego pliku oraz poleganie na kolejności tam, gdzie selektory mają różną specyficzność. Zamiast tego ustal jedną kolejność: najpierw style wspólne, potem komponenty, na końcu wyjątki. Gdy późniejsza linia nadpisuje wcześniejszą, sprawdź, czy to zamierzone. Jeśli nie — popraw selektor albo przenieś regułę, zamiast dodawać kolejną warstwę. Typowy błąd to owijanie całej strony w article tylko dlatego, że zawiera tekst. Strona główna nie jest artykułem — to zbiór różnych treści. Drugi częsty problem: section bez nagłówka h2–h6 w środku. Jeśli nie umiesz nadać sekcji nazwy, to znaczy, że nie jest to sekcja. Wtedy div jest uczciwszym wyborem. Praktyczna różnica jest też w tym, co zagnieżdżenie komunikuje czytnikom ekranu i wyszukiwarkom. article wewnątrz article oznacza zwykle komentarz pod wpisem — i to jest poprawne. Natomiast section wewnątrz section bez nagłówka to prawie zawsze błąd: fragment bez tytułu trudno zidentyfikować, więc lepiej użyć zwykłego div z klasą. Drugi typowy problem to flex-basis: auto w połączeniu z dużą zawartością. Element zajmuje całą szerokość, więc dla pozostałych nic nie zostaje. Warto ustawić flex-basis: 0 i dopiero wtedy dać flex-grow: 1. Trzeci błąd: mieszanie justify-content: space-between z oczekiwaniem, że dzieci urosną. To wyrównanie rozmieszcza istniejące elementy, ale nie powiększa ich samych. Czwarty: flex-shrink z domyślną wartością 1 kurczy elementy, gdy miejsca brakuje, przez co pozornie „grow" wygląda na zepsuty. Na koniec zasada porządkująca: jedno article może zawierać wiele section, jedna section może zawierać wiele article, ale nie rób tego mechanicznie. Każde zagnieżdżenie musi mieć uzasadnienie w treści. Jeśli nie potrafisz jednym zdaniem powiedzieć, czym jest dany blok i dlaczego jest samodzielny lub nie, użyj div. Semantyka HTML ma pomagać, a nie tworzyć kolejną warstwę do odgadywania. Przy responsywnych układach problem wraca przy zmianie szerokości okna. Elementy, które mieściły się w rzędzie, nagle się zawijają, bo spacja między nimi zjada kilka pikseli. Jeśli używasz inline-block, ustal szerokości z zapasem albo przejdź na flexbox. Testuj układ przy kilku szerokościach, bo biały znak bywa widoczny dopiero na granicy zmiany liczby elementów w wierszu. Gdzie najczęściej ginie wolne miejsce Najczęstsza przyczyna to kontener bez zdefiniowanej wysokości lub szerokości, który „skurczył się" do rozmiaru treści. W układzie pionowym flex-direction: column rodzic domyślnie ma wysokość wynikającą z dzieci, więc wolnej przestrzeni w pionie jest zero. Rozwiązanie: nadaj kontenerowi konkretną wysokość, np. height: 100vh albo min-height: 100%, i upewnij się, że jego własny rodzic też ma określoną wysokość. Łańcuch procentów bez punktu odniesienia nie działa. Właściwość box-sizing ze wartością border-box zmienia sposób liczenia. Szerokość podana w CSS obejmuje wtedy treść, padding i obramowanie razem. Ustawiasz 300 pikseli i tyle faktycznie zajmuje element w układzie, niezależnie od tego, ile paddingu czy ramki dołożysz. Marginesy nadal stoją poza tą sumą, bo one opisują odstęp między pudełkami, a nie ich wnętrze. Osobna pułapka czeka przy polach tekstowych i przyciskach. Przeglądarki nadają im własne style, a gdy dołożysz do nich border-box bez zerowania domyślnych obramowań, szerokości potrafią się rozjechać między systemami. Ustaw wtedy jawnie padding, border i font dla tych elementów, zamiast liczyć na to, co podpowie przeglądarka. Podobnie z elementami zastąpionymi, na przykład obrazkami: border-box zmienia sposób liczenia szerokości, ale sama grafika i tak skaluje się według proporcji, więc nie zakładaj, że kadr wyjdzie dokładnie taki, jak wpiszesz. Większość stron internetowych zbudowana jest na podobnym szkielecie: nagłówek, treść główna, nawigacja i stopka. Można je opisać za pomocą zwykłych divów, ale wtedy zarówno przeglądarki, jak i roboty wyszukiwarek muszą się domyślać, co jest czym. Znaczniki semantyczne — header, nav, main, footer — robią to samo, tylko jawnie. Dzięki nim struktura strony jest zrozumiała bez zaglądania w klasy CSS czy identyfikatory. Kiedy article trafia do section, a kiedy section do article Najprostsza zasada: pytaj, czy dany blok ma sens poza resztą strony. Jeśli tak — to article. Jeśli nie — section. Zagnieżdżenie article w section stosujesz na przykład na stronie kategorii: section grupuje listę wpisów, a każdy wpis to osobny article. Odwrotnie, section w article użyjesz we wpisie blogowym, gdzie wydzielasz sekcję „Wnioski" albo „Przykłady" wewnątrz jednego artykułu. Domyślny model pudełkowy w CSS dodaje padding i border do szerokości elementu. Ustawiasz kontener na 300 pikseli, dorzucasz 20 pikseli paddingu i 1 piksel obramowania z każdej strony, a przeglądarka renderuje pudełko o szerokości 342 pikseli. Element wychodzi poza siatkę, sąsiad się zawija, a ty poprawiasz wartości na ślepo, zamiast zrozumieć, co się dzieje.

Benutzer:ErickaPulver

2026-10-19T18:34:47Z

ErickaPulver: Die Seite wurde neu angelegt: „Miłośnik praktycznego designu z wieloletnią praktyką. Piszę o tym, jak łączyć wygodę z ładnym wnętrzem. Najchętniej opisuję proste rozwiązania, które da się zrobić samemu.“

Miłośnik praktycznego designu z wieloletnią praktyką. Piszę o tym, jak łączyć wygodę z ładnym wnętrzem. Najchętniej opisuję proste rozwiązania, które da się zrobić samemu.

Rettungsdienst-Wiki - Benutzerbeiträge [de]

Model pudełkowy, który rozjeżdża każdy layout

Benutzer:ErickaPulver