Model css box

Model pudełka w CSS opisuje pudełka, które są generowane z elementów HTML. Szablon pudełka zawiera również szczegółowe opcje ustawiania marginesów, obramowań, dopełnienia i zawartości dla każdego elementu. Poniższy obrazek pokazuje, jak zbudowany jest model pudełkowy.
Model pudełkowy lub „model pudełkowy” jest z pewnością najważniejszą cechą języka arkuszy stylów CSS, ponieważ warunkuje projektowanie wszystkich stron internetowych. Model pudełkowy to zachowanie CSS, które powoduje, że wszystkie elementy na stronach są reprezentowane przez prostokątne pudełka.
Pudełka jednostronicowe są tworzone automatycznie. Za każdym razem, gdy wstawiany jest znacznik HTML, tworzone jest nowe prostokątne pole, które obejmuje zawartość tego elementu. Poniższy obraz przedstawia trzy prostokątne pola, które tworzą trzy znaczniki HTML zawarte na stronie.

W rzeczywistości wszystkie elementy strony internetowej (akapity, linki, obrazy, tabele itp.) to prostokątne pola. Przeglądarki umieszczają te pola w sposób, w jaki wskazaliśmy im układ strony.
Istnieją dwa rodzaje pudełek: blok i inline. Elementy blokowe przerywają przepływ układu. Oznacza to, że pojawiają się same, wstawiając „podziały wierszy”. Elementy śródliniowe podążają za przepływem i są zawarte w elementach blokowych.
Na przykład akapit byłby elementem blokowym (nie możemy mieć akapitu obok drugiego, ale dwa akapity w rzędzie pojawią się jeden pod drugim. Z drugiej strony link jest elementem śródliniowym, ponieważ nie „wytnij” tekst w miejscu, w którym się znajduje.
Części składające się na każde pudełko i kolejność ich wyświetlania z punktu widzenia użytkownika są następujące:
Treść (treść): jest to zawartość HTML elementu (słowa w akapicie, obrazek, tekst na liście elementów itp.)
Wyściółka: Opcjonalna wolna przestrzeń między treścią a ramką.
Granica: linia, która całkowicie obejmuje treść i jej dopełnienie.
Zdjęcie w tle: Obraz wyświetlany za treścią i przestrzenią dopełniającą.
Kolor tła: kolor wyświetlany za treścią i przestrzenią dopełniającą.
Margines (margines): opcjonalna separacja między pudełkiem a innymi sąsiednimi pudłami.
Dopełnienie i margines są przezroczyste, więc miejsce zajmowane przez dopełnienie pokazuje kolor tła lub obraz (jeśli jest zdefiniowany), a miejsce zajmowane przez margines pokazuje kolor tła lub obraz nadrzędnego elementu (jeśli jest zdefiniowany). Jeśli żaden element nadrzędny nie ma zdefiniowanego koloru tła ani obrazu, wyświetlany jest kolor tła lub obraz strony (jeśli jest zdefiniowany).
Jeśli ramka definiuje zarówno kolor, jak i obraz tła, obraz ma wyższy priorytet i jest tym, który jest wyświetlany. Jeśli jednak obraz tła nie zakrywa całkowicie pola elementu lub jeśli obraz ma obszary przezroczyste, wyświetlany jest również kolor tła. Łącząc przezroczyste obrazy i kolory tła, można uzyskać bardzo ciekawe efekty graficzne.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt