Podcast CSS – 001: The Box Model
Załóżmy, że masz taki fragment kodu HTML:
<p>I am a paragraph of text that has a few words in it.</p>
Następnie napisz dla niego ten kod CSS:
p {
width: 100px;
height: 50px;
padding: 20px;
border: 1px solid;
}
Treść ma szerokość 142 pikseli zamiast podanej przez Ciebie 100 pikseli, i wydobyć z elementu. Dlaczego?
Model pudełkowy jest podstawowym elementem CSS. Jak działają modele ramowe jak działa, jak wpływają na niego inne aspekty CSS, jak je kontrolować, może pomóc w pisaniu bardziej przewidywalnego kodu CSS.
Trzeba pamiętać, że wszystko wyświetlane przez CSS to pole, nawet jeśli
to tylko tekst lub ma obiekt border-radius
, który wygląda jak koło.
Treść i rozmiary
Pudełka różnią się w zależności od wartości atrybutu display
, zestawu
i ich zawartości. Może to być zwykły tekst lub
więcej pól wygenerowanych przez elementy podrzędne. W obu przypadkach treść wpływa na rozmiar pliku
z pudełka.
Możesz użyć rozmiarów zewnętrznych lub rozmiarów wewnętrznych. umożliwiając przeglądarce podejmowanie decyzji w zależności od rozmiaru treści.
Oto podstawowa wersja demonstracyjna, która objaśnia różnicę:
Wersja demonstracyjna zawiera tekst „CSS jest świetny”. w pudełku o stałych wymiarach
grubą ramkę. Pole ma określoną szerokość, dlatego jest rozmiarem zewnętrznym.
Oznacza to, że kontroluje rozmiar treści podrzędnych. Jednak słowo
„świetnie” jest za duży, aby zmieścić się w pudełku, dlatego wychodzi poza ramkę nadrzędną.
border box (więcej informacji na ten temat później). Jednym ze sposobów zapobiegania temu przepełnieniu jest zezwolenie
jeśli nie ustawisz szerokości, albo w tym przypadku
Ustawianie elementu width
na min-content
. Słowo kluczowe min-content
informuje pole,
być tak szerokie jak rzeczywista minimalna szerokość jej treści (słowo
„niesamowity”). Dzięki temu ramka będzie dokładnie pasować do tekstu.
Oto bardziej skomplikowany przykład, który pokazuje wpływ różnych rozmiarów na rzeczywiste rozmiary treść:
Włącz lub wyłącz rozmiar wewnętrzny, aby sprawdzić, jakie korzyści daje rozmiar zewnętrzny kontrolę za pomocą wymiarów zewnętrznych i wewnętrznych, dzięki czemu treści są bardziej . Aby zobaczyć efekty, dodaj do karty kilka zdań. Gdy ten element ma zewnętrzne wymiary, obowiązuje limit ilości treści mogą dodawać dane, zanim przepełnią. Nie jest to jednak możliwe, gdy włączono.
Domyślnie ten element ma ustawioną wartość width
i height
o wartości 400px
.
Te wymiary wyznaczają ścisłe granice wszystkim wewnątrz elementu, czyli
wyróżniona, chyba że zawartość jest za duża, aby zmieścić się w pudełku. Zobacz, jak to działa
zmieniając podpis pod zdjęciem kwiatu na taki, który przekracza
jego wysokość.
Kluczowy termin: przepełnienie ma miejsce, gdy treść jest zbyt duża, aby się w niej umieścić. Dostępne opcje
zarządzaj sposobem, w jaki element obsługuje nadmiarowe treści, za pomocą właściwości overflow
.
Przełączenie na rozmiar wewnętrzny umożliwia przeglądarce podejmowanie decyzji na podstawie rozmiaru zawartości pola. Znacznie mniejsze prawdopodobieństwo przepełnienia, bo pole zmienia rozmiar wraz z zawartością.
Pamiętaj, że rozmiar wewnętrzny jest domyślnym rozmiarem w przeglądarce i zwykle zapewnia znacznie większą elastyczność niż zewnętrzne rozmiary.
Powierzchnie modelu prostopadłościennego
Pudełka składają się z różnych obszarów modeli prostokątnych, z których każdy służy do wykonywania określonego zadania.
Pole treści to obszar, w którym znajduje się treść. Treści te mogą decyduje o rozmiarze jego elementu nadrzędnego, więc jest to zwykle obszar o największej zróżnicowaniu.
Pole dopełnienia otacza pole treści i jest obszarem tworzonym przez
właściwość padding
.
Dopełnienie znajduje się wewnątrz pola, więc jego tło jest widoczne w pomieszczeniu
który tworzy.
Jeśli w pudełku są ustawione reguły nadmiarowe, takie jak overflow: auto
lub
overflow: scroll
, pasek przewijania również zajmują ten obszar.
Pole obramowania otacza pole dopełnienia, a jego obszar jest określany za pomocą tagu
border
, która
tworzy wizualną ramkę elementu. Obramowanie elementu to
a nawet ograniczenia.
Ostatni obszar, pole marginesów, to przestrzeń wokół ramki,
reguły margin
pola. Właściwości takie jak
outline
i
box-shadow
również zajmują tę przestrzeń, ponieważ są nałożone na element i nie są
mają wpływ na rozmiar pola. Zmieniam outline-width
z 200px
w boksie w dniu
Pole nie zmienia niczego wewnątrz krawędzi obramowania.
Przydatna analogia
Model ramkowy jest złożony, więc oto analogia do tego, czego się do tej pory nauczyliśmy.
Na tym schemacie są umieszczone obok siebie trzy ramki na zdjęcia ekran. Elementy obramowanego obrazu odpowiadają modelowi prostokątnemu w następujący sposób:
- Pole treści to grafika.
- Pudełko dopełnienia to biała tablica montażowa między ramką a obrazem.
- Ramka to ramka, która stanowi dosłowne obramowanie dzieła sztuki.
- Pole marginesu to odstęp między klatkami.
- Cień zajmuje taką samą przestrzeń jak pole marginesu.
Debugowanie modelu pudełkowego
Narzędzia deweloperskie w przeglądarce udostępniają wizualizację modelu pudełka wybranego pola obliczeniach, które pomogą Ci zrozumieć, jak działa model ramkowy wpływa na witrynę, nad którą pracujesz.
Spróbuj to zrobić w swojej przeglądarce:
- Otwórz Narzędzia deweloperskie.
- Wybierz element.
- Pokaż debuger modelu skrzynkowego.
Sterowanie modelem skrzynki
Aby zrozumieć, jak sterować modelem pudełkowym, musisz najpierw zrozumieć, co dzieje się w przeglądarce.
Każda przeglądarka stosuje arkusz stylów klienta użytkownika do dokumentów HTML, które definiują jak elementy powinny wyglądać i działać, jeśli nie mają zdefiniowanego kodu CSS. Usługa porównywania cen klienta użytkownika różnią się w zależności od przeglądarki, ale są przydatne domyślnie ułatwiają czytanie treści.
Jedna z właściwości, z której arkusz stylów klienta użytkownika ustawia domyślną wartość display
pola. Dla:
Na przykład w normalnym przepływie domyślna wartość display
elementu <div>
to
block
, <li>
ma domyślną wartość display
list-item
i <span>
ma domyślną wartość display
równą inline
.
Element inline
ma margines blokowy, ale inne elementy go nie respektują.
W polu inline-block
pozostałe elementy respektują margines bloku, ale pierwszy z nich
zachowuje większość zachowań z elementu inline
.
Domyślnie element block
wypełnia dostępny obszar wbudowany, podczas gdy
Elementy inline
i inline-block
są tak duże, jak ich zawartość.
Arkusz stylów klienta użytkownika ustawia też atrybut box-sizing
, który informuje pole, jak
i oblicza rozmiar jego pudełka. Domyślnie wszystkie elementy mają tego klienta użytkownika
styl: box-sizing: content-box;
. Oznacza to, że gdy ustawisz takie wymiary,
jako width
i height
, wymiary te mają zastosowanie do pola treści. Jeśli
następnie ustawisz padding
i border
, te wartości zostaną dodane do pola treści
rozmiaru.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat właściwości wpływających na rozmiar modelu pola.
.my-box { width: 200px; border: 10px solid; padding: 20px; }
Jak szeroki(a) będzie .my-box
?
Rzeczywista szerokość tego pola to 260 pikseli.
CSS wykorzystuje domyślną wartość elementu box-sizing: content-box
, więc zastosowana szerokość to
szerokość treści, a padding
i border
po obu stronach zostaną dodane do
że. 200 pikseli na treść + 40 piks. dopełnienia + 20 pikseli obramowania
widoczna szerokość 260 pikseli.
Możesz to zmienić, określając rozmiar border-box
:
.my-box {
box-sizing: border-box;
width: 200px;
border: 10px solid;
padding: 20px;
}
Ten alternatywny model ramki informuje CSS, że ma zastosować width
do ramki obramowania
zamiast w polu treści. Oznacza to, że nasze border
i padding
otrzymują
przesuniętych do góry, więc gdy ustawisz .my-box
na 200px
szerokości,
o szerokości 200px
.
Aby dowiedzieć się, jak to działa, zobacz interaktywną prezentację. Po przełączeniu
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
i każdy pseudoelement ::before
i ::after
oraz stosuje box-sizing: border-box
.
Oznacza to, że każdy element korzysta teraz z tego alternatywnego modelu prostokątnego.
Alternatywny model pudełkowy jest bardziej przewidywalny, dlatego deweloperzy często ta reguła do resetowania i normalizacji, jak ta.