Co tak naprawdę otacza każdy element i psuje ci układ strony?
Selektor to sposób, w jaki arkusz stylów albo skrypt odnajduje konkretny fragment dokumentu. W CSS i w JavaScripcie masz do dyspozycji trzy podstawowe narzędzia: znacznik, klasę i identyfikator. Wybór między nimi nie jest kwestią gustu — decyduje o tym, jak łatwo później zmienisz wygląd strony i jak bardzo kod stanie się odporny na błędy.<br>
<br>
<br>
<br>
Po zmianie globalnej trzeba sprawdzić dwa miejsca. Pierwsze to elementy, którym celowo ustawiano padding poza szerokością — teraz zawartość może się ścisnąć bardziej niż wcześniej. Drugie to elementy z width: 100% albo max-width w połączeniu z paddingiem: po przejściu na border-box przestaną wystawać poza rodzica. Jeśli jakiś pojedynczy element naprawdę ma działać po staremu, nadpisz mu box-sizing: content-box punktowo, ale nie rób tego bez konkretnego powodu.<br>
<br>
<br>
<br>
rgb() i rgba() zapisują kanały dziesiętnie, od 0 do 255. Nowoczesny zapis rgb() przyjmuje też wartości procentowe i kanał alfa po ukośniku: rgb(30 144 255 / 0.5). To wygodne, gdy przezroczystość zmienia się dynamicznie, np. w stanie hover. Typowy błąd to mieszanie starych i nowych składni: rgb(30, 144, 255, 0.5) z przecinkami i czwartą wartością nie zadziała w każdej przeglądarce. Przy przecinkach alfa wymaga osobnej funkcji rgba(), przy zapisie bez przecinków — ukośnika.<br>
<br>
<br>
<br>
hsl() opisuje kolor przez odcień, nasycenie i jasność. Odcień to stopnie na kole barw, od 0 do 360. Nasycenie i jasność podaje się w procentach. hsl(210 100% 56%) odpowiada temu samemu kolorowi co #1e90ff. Zaletą jest przewidywalność: gdy chcesz rozjaśnić odcień, zmieniasz tylko trzecią wartość. Gdy chcesz go wyciszyć, zmniejszasz drugą. Przy rgb i zapisie szesnastkowym każda taka zmiana wymaga przeliczenia trzech kanałów.<br>
<br>
<br>
<br>
Zapis szesnastkowy, rgb i hsl — co wybrać w konkretnej sytuacji Zapis szesnastkowy, np. #1e90ff, to skrót od trzech par cyfr. Każda para to jeden kanał w systemie szesnastkowym, od 00 do ff. Jeśli wszystkie pary są takie same, można skrócić zapis do trzech znaków: #ffffff to #fff, #aabbcc to #abc. Skrót działa tylko przy powtórzonych parach — #1e90ff nie da się skrócić. Czwarta para lub czwarty znak to kanał alfa, czyli przezroczystość: #1e90ff80 to kolor z połową krycia.<br>
<br>
<br>
<br>
Jeśli projekt jest starszy i nie chcesz ruszać całości, wprowadź border-box stopniowo: zacznij od nowych komponentów, potem obejmij nim sekcje, które najczęściej się rozjeżdżają. Po każdej zmianie sprawdź układ w wąskim i szerokim oknie, bo właśnie przy zmianie szerokości ekranu różnice między modelami wychodzą najwyraźniej. Ustawienie border-box w jednym miejscu oszczędza godziny poprawiania szerokości pojedynczych elementów.<br>
<br>
<br>
<br>
Oś główna to kierunek, w którym układają się elementy. Domyślnie flex ustawia flex-direction: row, więc oś główna biegnie poziomo, od lewej do prawej. Oś poprzeczna jest do niej prostopadła. Gdy zmienisz kierunek na column, osie zamieniają się miejscami — to najczęstsze źródło pomyłek przy justowaniu. Właściwość justify-content działa zawsze wzdłuż osi głównej, a align-items wzdłuż osi poprzecznej. Zanim zaczniesz przesuwać elementy, sprawdź, którą osią aktualnie pracujesz.<br>
<br>
<br>
<br>
Jak to włączyć w praktyce Najsensowniej zrobić to globalnie, w jednym miejscu arkusza stylów, zanim zacznie się pisać jakiekolwiek reguły dla komponentów. Wystarczy selektor uniwersalny z pseudo-elementami ::before i ::after, ustawiony na box-sizing: border-box. Warto przy okazji ustawić margin: 0 i padding: 0 dla wszystkich elementów, żeby marginesy przeglądarki nie psuły wyrównania. Taki reset na starcie eliminuje najczęstsze źródło różnic między przeglądarkami.<br>
<br>
<br>
<br>
Element nie chce się zwęzić mimo ustawionego flex-shrink, bo domyślnie wartość min-width w elemencie elastycznym wynosi auto. To oznacza, że przeglądarka nie pozwoli zejść poniżej minimalnej szerokości wyznaczonej przez zawartość: najdłuższe słowo, nieprzerwany ciąg znaków, obrazek albo sztywne wymiary dziecka. Flex-shrink działa, ale zatrzymuje się dokładnie na tej granicy i dalej nic nie zrobi. Zmiana flex-shrink na większą wartość nic nie da, jeśli ta wewnętrzna bariera pozostaje aktywna.<br>
<br>
<br>
<br>
Typowe błędy wynikają z mieszania obu modeli w jednym projekcie. Gdy część komponentów używa content-box, a część border-box, debugowanie szerokości zamienia się w zgadywanie. Drugi częsty problem to zakładanie, że border-box wpływa też na marginesy — nie wpływa. Marginesy zawsze liczą się poza rozmiarem elementu i nadal mogą wypychać układ. Trzeci błąd to liczenie na to, że min-width i max-width zachowają się identycznie jak width; działają spójnie, ale przy content-box potrafią dać zaskakujące wyniki, więc przy border-box jest po prostu przewidywalniej.<br>
<br>
<br>
<br>
Rozwiązaniem jest box-sizing: border-box. Po jego ustawieniu podana szerokość obejmuje już zawartość, padding i obramowanie razem. Element z width: 300px, padding: 20px i border: 5px nadal zajmuje dokładnie 300 pikselów, a jego zawartość kurczy się do wnętrza. To odwraca logikę na korzyść projektowania: ustalasz rozmiar zewnętrzny i nie musisz już odejmować w głowie paddingu przy każdym obliczeniu.