Podcast The CSS – 001: The Box Model
Załóżmy, że masz ten fragment kodu HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Następnie tworzysz dla niego ten kod CSS:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
Treść ma szerokość 142 pikseli zamiast określonej przez Ciebie szerokości i wychodzi poza element. Dlaczego?
Model prostokąta to podstawowa podstawa CSS. Zrozumienie, jak działa model Box, jak na niego wpływają inne aspekty CSS i jak możesz go kontrolować, może pomóc Ci stworzyć bardziej przewidywalny kod CSS.
Pamiętaj, że wszystkie elementy wyświetlane przez CSS są prostokątne (nawet jeśli jest to tylko tekst) lub zawiera atrybut border-radius, który sprawia, że wygląda jak koło.
Zawartość i rozmiar
Sposób działania pól zależy od wartości display, zbiorów wymiarów i zawartych w nich treści. Może to być zwykły tekst
lub więcej pól generowanych przez elementy podrzędne. W obu przypadkach treść
domyślnie wpływa na rozmiar pola.
Można to dostosować za pomocą rozmiaru zewnętrznego lub użyć rozmiaru wewnętrznego, aby przeglądarka mogła podejmować decyzje za Ciebie na podstawie rozmiaru zawartości.
Oto podstawowa prezentacja objaśniająca te różnice:
Wersja demonstracyjna zawiera słowa „CSS jest super” w pudełku o stałych wymiarach i grubym obramowaniu. Pole ma określoną szerokość, dlatego ma wymiary zewnętrzne.
Oznacza to, że kontroluje rozmiar treści podrzędnych. Jednak słowo „super” jest za duże i wychodzi poza ramkę ramki nadrzędnej (więcej informacji na ten temat znajdziesz później). Jednym ze sposobów, aby zapobiec nadmiernemu przepełnieniu, jest umożliwienie wewnętrznego dopasowania pola przez nieustawianie szerokości lub, w tym przypadku, przez ustawienie width na min-content. Słowo kluczowe min-content powoduje, że pole powinno mieć szerokość tylko od jego wewnętrznej minimalnej szerokości (słowo „super”). Dzięki temu pole będzie idealnie pasować do tekstu.
Oto bardziej skomplikowany przykład, który pokazuje wpływ różnych rozmiarów na rzeczywiste treści:
Włączaj i wyłączaj wewnętrzne rozmiary, aby zobaczyć, jak to rozwiązanie zapewnia Ci większą kontrolę dzięki określaniu rozmiarów zewnętrznych i wewnętrznych rozmiarów, które zapewniają większą kontrolę treści. Aby zobaczyć efekty, dodaj do karty kilka zdań tekstu. Jeśli ten element ma rozmiar zewnętrzny, ilość treści, które można dodać, zanim się wyczerpie, jest ograniczona, ale nie dzieje się tak po włączeniu wewnętrznego rozmiaru.
Domyślnie ten element ma zestawy width i height o wartości 400px.
Te wymiary wyznaczają ścisłe granice wszystkiego, co znajduje się w elemencie. Są one brane pod uwagę, chyba że zawartość jest za duża do umieszczenia w ramce. Możesz to sprawdzić,
zmieniając podpis pod zdjęciem kwiatu na taki, który przekracza wysokość pudełka.
Kluczowe pojęcie: przepełnienie ma miejsce, gdy treść jest za duża dla pola, w którym się znajduje. Za pomocą właściwości overflow możesz zarządzać sposobem, w jaki element ma obsługiwać nadmiarowe treści.
Przełączenie na wewnętrzny rozmiar pozwala przeglądarce podejmować decyzje za Ciebie na podstawie rozmiaru zawartości pola. Dzięki temu prawdopodobieństwo przepełnienia się jest znacznie mniejsze, bo pole zmienia się zgodnie z zawartością.
Trzeba pamiętać, że rozmiar wewnętrzny jest domyślnym działaniem przeglądarki i zwykle zapewnia on o wiele większą elastyczność niż rozmiar wewnętrzny.
Obszary modelu urządzenia
Składają się z różnych obszarów modeli, które pełnią określoną funkcję.
Pole treści to miejsce, w którym znajduje się treść. Rozmiar treści może kontrolować rozmiar elementu nadrzędnego, więc ma on zwykle najbardziej zmienny rozmiar.
Dopełnienie otacza pole treści i jest to obszar utworzony przez właściwość padding.
Ze względu na to, że dopełnienie znajduje się wewnątrz ramki, jej tło jest widoczne w utworzonym miejscu.
Jeśli pole ma ustawione reguły wyświetlania zawartości ekranu, takie jak overflow: auto lub overflow: scroll, paski przewijania również zajmują to miejsce.
Pole obramowania otacza pole dopełnienia, a jego przestrzeń jest definiowana przez wartość border, która tworzy ramkę dla elementu. Brzegowy obramowania elementu to granica tego, co możesz zobaczyć.
Ostatni obszar, pole margines, to obszar wokół pola zdefiniowany przez regułę margin pola. Właściwości takie jak outline i box-shadow również zajmują to miejsce, ponieważ są malowane na elemencie i nie mają wpływu na rozmiar pudełka. Zmiana wartości outline-width z 200px pola w polu nie zmienia niczego wewnątrz krawędzi obramowania.
Przydatna analogia
Model pudełka jest skomplikowany do zrozumienia, więc poniżej znajduje się analogia do tego, czego udało Ci się dowiedzieć do tej pory.
Ten schemat przedstawia 3 ramki do zdjęć przymocowane obok siebie na ścianie. Elementy na obrazie w ramce odpowiadają modelowi ramki w ten sposób:
- Pole treści to grafika.
- Pole dopełniania to biała płyta montażowa między ramką a obrazem.
- Ramka ramki stanowi dosłowne obramowanie grafiki.
- Pole marginesów to odstęp między klatkami.
- Cień zajmuje to samo miejsce co pole marginesu.
Debugowanie modelu urządzenia
Narzędzia deweloperskie w przeglądarce umożliwiają wizualizację obliczeń modelu ramkowego wybranego pola, co pomaga zrozumieć, jak działa ten model i jak wpływa on na witrynę, nad którą pracujesz.
Spróbuj to zrobić w przeglądarce:
- Otwórz Narzędzia deweloperskie.
- Wybierz element.
- Pokaż debuger modelu ramki.
Sterowanie modelem ramki
Aby zrozumieć, jak sterować modelem pudełka, musisz najpierw dowiedzieć się, co dzieje się w Twojej przeglądarce.
Każda przeglądarka stosuje do dokumentów HTML arkusz stylów klienta użytkownika, który określa wygląd i zachowanie elementów bez zdefiniowanego kodu CSS. Kody CSS w arkuszach stylów klienta użytkownika różnią się w zależności od przeglądarki, ale zapewniają rozsądne ustawienia domyślne, które ułatwiają czytanie treści.
Jedna właściwość, którą arkusz stylów klienta użytkownika ustawia domyślną wartość display pola. Na przykład w normalnym przepływie domyślna wartość display elementu <div> to block, <li> ma domyślną wartość display równą list-item, a <span> ma domyślną wartość display równą inline.
Element inline ma margines bloku, ale inne elementy go nie przestrzegają.
W przypadku inline-block inne elementy uwzględniają margines bloku, ale pierwszy element zachowuje się w większości tego samego co w przypadku elementu inline.
Elementy block domyślnie wypełnia dostępną przestrzeń w tekście, a elementy inline i inline-block są tak duże, jak ich treść.
Arkusz stylów klienta użytkownika ustawia też wartość box-sizing, która informuje pole, jak obliczyć rozmiar jego pola. Domyślnie wszystkie elementy mają ten styl klienta użytkownika: box-sizing: content-box;. Oznacza to, że gdy ustawisz wymiary takie jak width i height, zostaną one zastosowane do pola treści. Jeśli ustawisz właściwości padding i border, wartości te zostaną dodane do rozmiaru pola treści.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat wielkości modelu pola, który ma wpływ na właściwości.
.my-box {
width: 200px;
border: 10px solid;
padding: 20px;
}
Jak szeroki będzie Twoim zdaniem obszar .my-box?
200px zawierałoby box-sizing: border-box.
Rzeczywista szerokość tego pola to 260 pikseli.
CSS używa domyślnej wartości box-sizing: content-box, więc zastosowana szerokość to szerokość treści, co oznacza, że atrybuty padding i border po obu stronach są do niego dodawane. 200 pikseli zawartości + 40 pikseli dopełnienia + 20 pikseli obramowania dają widoczne
szerokość 260 pikseli.
Możesz to zmienić, określając rozmiar elementu border-box:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Ten alternatywny model pola pozwala CSS stosować element width do ramki obramowania zamiast pola treści. Oznacza to, że atrybuty border i padding są przekazywane, więc gdy ustawisz szerokość .my-box na 200px, będzie on wyświetlany na 200px szerokości.
Zobacz, jak to działa, w następującej interaktywnej prezentacji. Gdy przełączysz wartość box-sizing, niebieski obszar pokazuje, który kod CSS jest stosowany wewnątrz pola.
*,
*::before,
*::after {
box-sizing: border-box;
}
Ta reguła CSS wybiera każdy element w dokumencie oraz każdy pseudoelement ::before i ::after, a także stosuje box-sizing: border-box.
Oznacza to, że każdy element korzysta teraz z alternatywnego modelu pola.
Alternatywny model pudełka może być bardziej przewidywalny, dlatego deweloperzy często dodają tę regułę do resetowania i normalizatorów, takich jak ta.