Model pudełkowy
Kompendium zawodu — pojęcia i zwroty
Pojęcia w pracy
- DOM
- Model dokumentu używany przez przeglądarkę. Zmiana elementu DOM może zmienić to, co użytkownik widzi lub obsługuje.
- Stan interfejsu
- Sytuacja, którą ekran pokazuje, np. ładowanie, sukces, pusty wynik albo błąd.
- Regresja
- Pogorszenie działającej wcześniej funkcji po wprowadzeniu zmiany.
Zwroty w typowych sytuacjach
- „Błąd odtwarza się na wąskim ekranie po wysłaniu formularza.”
- Zgłoszenie zawiera warunek i czynność, od których można zacząć diagnozę.
- „Po błędzie sieci zachowajmy wpisane dane i umożliwmy ponowienie.”
- Ustalasz zachowanie formularza po przerwanym zapisie.
Szerokość elementu obejmuje treść, padding i obramowanie zgodnie z ustawieniem box-sizing. Margines tworzy odstęp na zewnątrz. W narzędziach przeglądarki porównaj deklarowaną szerokość z wymiarem renderowanym.
- Treść
- Padding i obramowanie
- Odstęp zewnętrzny
Przykład z pracy
Karta ma width: 300px, padding po 16px i ramkę po 1px. Przy content-box zajmuje 334px bez marginesu. Przy border-box treść ma 266px, a całe pudełko 300px.
Ćwiczenie praktyczne
Utwórz dwie karty z tymi ustawieniami. Sprawdź ich rzeczywiste szerokości w DevTools.
Symulacja rozmowy
Kiedy użyjesz linku, a kiedy przycisku?
Porównaj z przykładową odpowiedzią
Link prowadzi pod adres. Przycisk wywołuje działanie, np. wysyła formularz. Wybieram natywne elementy, aby przeglądarka zapewniła oczekiwane zachowanie klawiatury.
Sprawdź się — opcjonalne pytanie
Która wartość wlicza padding i obramowanie do deklarowanej szerokości?
- content-box
- border-box
- margin-box
Pokaż odpowiedź i wyjaśnienie
border-box. Border-box obejmuje treść, padding i obramowanie. Margines pozostaje poza pudełkiem.
Źródła do nauki MDN — struktura i dostępność formularzy · MDN — model pudełkowy CSS