CSS
Model pudełkowy

Składnia

• rozmiar pudełka: parametr ;

Parametry

Uwagi

Co to jest model pudełkowy?

Krawędzie

Przeglądarka tworzy prostokąt dla każdego elementu w dokumencie HTML. Model pudełkowy opisuje sposób dodawania wypełnienia, ramki i marginesu do zawartości w celu utworzenia tego prostokąta.

Schemat z CSS2.2 Working Draft

Obwód każdego z czterech obszarów nazywany jest krawędzią . Każda krawędź definiuje pudełko.

• Najbardziej wewnętrzny prostokąt to pole zawartości . Szerokość i wysokość tego zależy od renderowanej zawartości elementu (tekst, obrazy i wszelkie elementy potomne, które może mieć).
• Dalej jest pole dopełniania , zgodnie z definicją właściwości padding . Jeśli nie ma padding szerokości wyznaczonej krawędź wyściółka jest równa zawartości krawędzi.
• Następnie mamy pole ramki zdefiniowane przez właściwość border . Jeśli nie istnieje border szerokości wyznaczonej krawędź granica wynosi krawędzi przekładki.
• Najbardziej zewnętrznym prostokątem jest pole marginesu , zgodnie z definicją właściwości margin . Jeśli nie ma margin szerokość zdefiniowane, krawędź marża jest równa krawędzi obramowania.

Przykład

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

Ten CSS stylizuje wszystkie elementy div , aby górna, prawa, dolna i lewa 5px szerokość 5 5px ; górny, prawy, dolny i lewy margines 50px ; oraz górne, prawe, dolne i lewe wypełnienie o 20px . Ignorując zawartość, nasze wygenerowane okno będzie wyglądać następująco:

Zrzut ekranu panelu Style elementów w Google Chrome

• Ponieważ nie ma treści, obszar zawartości (niebieskie pole na środku) nie ma wysokości ani szerokości (0 x 0 x 0).
• Domyślnie pole dopełniania ma ten sam rozmiar co pole zawartości, plus szerokość 20 pikseli na wszystkich czterech krawędziach, które definiujemy powyżej za pomocą właściwości padding (40 x 40 pikseli).
• Ramka obramowania ma taki sam rozmiar jak ramka dopełniania, plus szerokość 5px, którą definiujemy powyżej za pomocą właściwości border (50px na 50px).
• Wreszcie pole marginesu ma ten sam rozmiar co pole marginesu, plus szerokość 50 pikseli, którą definiujemy powyżej za pomocą właściwości margin (dając naszemu elementowi całkowity rozmiar 150 x 150 pikseli).

Teraz dajmy naszemu elementowi rodzeństwo w tym samym stylu. Przeglądarka patrzy na Model pudełkowy obu elementów, aby ustalić, gdzie w odniesieniu do zawartości poprzedniego elementu nowy element powinien zostać umieszczony:

Zawartość każdego elementu jest oddzielona odstępem 150 pikseli, ale pola dwóch elementów stykają się ze sobą.

Jeśli następnie zmodyfikujemy nasz pierwszy element, tak aby nie miał prawego marginesu, prawa krawędź marginesu byłaby w tej samej pozycji, co prawa krawędź marginesu, a nasze dwa elementy wyglądałyby teraz tak:

wielkość pudełka

Domyślny model ramki (pole content-box ) może być sprzeczny z intuicją, ponieważ width / height elementu nie będzie reprezentować jego rzeczywistej szerokości lub wysokości na ekranie, gdy tylko zaczniesz dodawać style padding i border do elementu.

Poniższy przykład pokazuje ten potencjalny problem z content-box :

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

Ponieważ dopełnienie zostanie dodane do szerokości obszaru tekstowego, wynikowym elementem jest obszar tekstowy, który jest szerszy niż 100%.

Na szczęście CSS pozwala nam zmienić model box-sizing za pomocą właściwości zmiany box-sizing dla elementu. Dostępne są trzy różne wartości właściwości:

• content-box : wspólny model ramki - szerokość i wysokość obejmuje tylko treść, a nie dopełnienie lub ramkę

• padding-box : szerokość i wysokość obejmuje zawartość i dopełnienie, ale nie obramowanie

• border-box : Szerokość i wysokość obejmuje zawartość, dopełnienie oraz obramowanie

Aby rozwiązać textarea problemu powyżej, można po prostu zmienić box-sizing właściwość padding-box lub border-box . border-box jest najczęściej używana.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

Aby zastosować określony model pudełka do każdego elementu na stronie, użyj następującego fragmentu:

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

W tej box-sizing:border-box; kodowania box-sizing:border-box; nie jest bezpośrednio stosowany do * , więc możesz łatwo zastąpić tę właściwość na poszczególnych elementach.