poniedziałek, 2020-12-07

Klasyczny model pudełkowy

Tak zwany box model to jedno z istotniejszych pojęć, którego znajomość jest potrzebna podczas opracowywania układu elementów. Przez kilkanaście lat twórcy stron byli skazani na „klasyczny” model pudełkowy, obecnie w stylach CSS istnieje własność pozwalająca zmienić prezentowane zachowanie elementów blokowych, nadal jednak jest to domyślne ustawienie przyjmowane przez przeglądarkę i często jest stosowane z uwagi na wymóg zgodności ze starszymi przeglądarkami. Niektórzy też wraz z upływem lat zdążyli się do tego przyzwyczaić i ciężko im zmienić nawyki.

<div class="ex-box-model">
  <div><p>Box 1 [width: 400px;]</p></div>
  <div><p>Box 2 [width: 400px;]</p></div>
  <div><p>Box 3 [width: 400px;]</p></div>
</div>

Wszystkie trzy prezentowane elementy div mają ustawioną jednakową szerokość wynoszącą 400 pikseli. Zawierają one akapity, które nie wpływają na omawianą własność, po prostu zajmują cały dostępny obszar ograniczony elementem nadrzędnym, czyli zajmują po 400 pikseli szerokości. Akapity zastosowano, aby można było uwidocznić wypełnienie (padding) dwóch ostatnich elementów div. Drugi div otrzymał dodatkowo obramowanie i wypełnienie, wynoszące w obu przypadkach pięć pikseli. Trzeci div również ma ustawione te własności, jednak tylko z prawej strony, a ich wartości zostały podwojone.

Skoro wszystkie elementy mają taką samą szerokość, to dlaczego w praktyce wygląda to inaczej?

Okazuje się, że domyślnie przeglądarka, obliczając szerokość elementu, bierze pod uwagę także wypełnienie i obramowanie. Efektywną szerokość elementu łatwo policzyć, należy zsumować jego szerokość (width), lewe i prawe wypełnienie (padding) oraz lewe i prawe obramowanie (border). W efekcie w przykładzie drugi element div zajmuje szerokość równą 420 pikseli. Trzeci prezentowany element dodatkowo obrazuje opisywaną własność, jego efektywna szerokość jest równa poprzednikowi, a umieszczony w nim akapit jest ułożony w pionie równo z pierwszym, dlatego, że obramowanie i wypełnienie o podwojonych szerokościach znajdują się tylko z prawej strony. Wpływ na obszar zajmowany przez element mogą mieć także ewentualne marginesy, jednak nie wlicza się ich do szerokości.

Łatwo się domyślić, że jeśli chodzi o wysokość elementu, to domyślnie jest ona obliczana w podobny sposób, z uwzględnieniem obramowania i wypełnienia.

Kod CSS przykładu

.ex-box-model div, .ex-box-model p {
  padding: 0;
  margin: 0;
}

.ex-box-model p{
  background: darkslategrey;
  color: white;
  height: 25px;
}

.ex-box-model div {
  width: 400px;
  background: cadetblue;
  margin: 20px;
}

.ex-box-model div:nth-of-type(2) {
  padding: 5px;
  border:solid 5px darkorange;
}

.ex-box-model div:nth-of-type(3) {
  padding-right: 10px;
  border-right:solid 10px darkorange;
}

Praktyczny przykład

Założenie przykładowego kodu to wyświetlenie obok siebie dwóch elementów div zawierających tekst. Mają one zająć całą dostępną szerokość. Kod HTML w tym przypadku jest dość prosty, główna część pracy to utworzenie stylów CSS.

<div class="ex-box-model-2">
  <div><p>Box right</p></div>
  <div><p>Box left</p></div>
</div>

Pierwsza część zastosowanych stylów to tzw. reset CSS, który zapewni, że elementy nie odziedziczą marginesów i wypełnienia po domyślnych stylach przeglądarki. Dodatkowo literom nadano biały kolor. Element div jest domyślnie wyświetlany jako blok, co oznacza, że znacznik po nim następujący znajdzie się poniżej. Aby to zmienić, posłużono się własnością float z wartością left, w tej sytuacji następny element (jeśli się zmieści w szerokości dostępnego obszaru) umieszczony zostanie z lewej strony. Elementom div nadano także kolor tła oraz szerokość (width) wnoszącą odpowiednio 70 i 30 procent. Łatwo obliczyć, że zajmą one całość dostępnego obszaru.

.ex-box-model-2 div, .ex-box-model-2 p {
  padding: 0;
  margin: 0;
  color: #fff;
}

.ex-box-model-2 div {
  float: left;
}

.ex-box-model-2 div:nth-of-type(1) {
  width: 70%;
  background: black;
}

.ex-box-model-2 div:nth-of-type(2) {
  width: 30%;
  background: darkgreen;
}

Zamierzony cel został osiągnięty, jednak zawsze coś można spróbować poprawić. Tekst przylegający do krawędzi pojemnika nie wygląda zbyt dobrze, aby to zmienić, można elementom nadrzędnym nadać wypełnienie.

.ex-box-model-2 div{
  padding: 1%;
}

Niestety jak to czasem bywa, likwidując mały problem, wywołano jeszcze większy. Tekst wygląda dobrze, ale pracowicie opracowany układ elementów poszedł w rozsypkę. Znając właściwości modelu pudełkowego łatwo domyślić się, co się stało. Szerokość elementów po dodaniu wypełnienia uległa zwiększeniu i po dodaniu tej wartości wynosi teraz odpowiednio 72 i 32 procent. W sumie to 104 procent i nie ma szans, aby zmieścić ten układ w elemencie nadrzędnym.

Jednym z pomysłów rozwiązania problemu może być nadanie wypełnienia nie dla elementów div, ale dla wewnętrznych akapitów. Czasem się to sprawdzi, ale jeśli do pojemników dodane zostaną inne znaczniki, trzeba będzie im wszystkim nadawać dodatkowe style. Skuteczniejszym sposobem będzie zmodyfikowanie stylów CSS elementów div. W przypadku pierwszego, jeśli szerokość ma wynosić 70 procent, to należy ją zmniejszyć o wypełnienie dodane z prawej i lewej strony, w efekcie zadeklarowana szerokość to 68 procent. Drugi div otrzymał podobnie obliczoną szerokość, która ostatecznie wyniosła 28 procent.

.ex-box-model-2 div:nth-of-type(1) {
  width: 68%;
  background: black;
}

.ex-box-model-2 div:nth-of-type(2) {
  width: 28%;
  background: darkgreen;
}

Niestety w przykładzie rozwiązano tylko pewną część problemów związanych z układem opartym o elementy pływające. Więcej na ten temat dowiesz się w kolejnych materiałach.