Model pudełkowy

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:

1. Otwórz Narzędzia deweloperskie.
2. Wybierz element.
3. 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;
}

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.

Zasoby

• Wprowadzenie do modelu pudełkowego
• Co to są narzędzia dla programistów przeglądarki?

Arkusze stylów klienta użytkownika

• Chromium
• Firefox
• Webkit,