Box model CSS
Wszystkie elementy HTML mogą być traktowane jako prostokąty. W CSS określenie "Model blokowy" jest używany, gdy mówimy o projektowaniu i układu.
Model blokowy CSS jest zasadniczo pole, które owija się wokół każdego elementu HTML. Składa się z: marginesy, obramowanie, dopełnienie, a rzeczywistej zawartości.
Poniższy obrazek przedstawia model etui:
Wyjaśnienie poszczególnych części:
- Content - Zawartość pudełka, w którym pojawia się tekst i obrazy
- Dopełnienie - Czyści obszar wokół treści.Wyściółka jest przejrzysta
- Border - Obramowanie, które krąży wokół padding i treści
- Margines - Czyści powierzchnię zewnętrzną granicę.Marża jest przejrzysta
Model blokowy pozwala nam dodać obramowanie wokół elementów oraz zdefiniowanie przestrzeni między elementami.
Szerokość i wysokość elementu
Aby ustawić szerokość i wysokość elementu poprawnie we wszystkich przeglądarkach, trzeba wiedzieć, jak działa model box.
 | Ważne: Po ustawieniu właściwości width i height elementu z CSS, wystarczy ustawić szerokość i wysokość obszaru zawartości.Aby obliczyć pełny rozmiar elementu, należy również dodać obicia, granice i marże. |
|---|
Załóżmy, że chcemy nadać styl <div> element, aby mieć całkowitą szerokość 350px:
Oto matematyki:
Całkowita szerokość elementu powinna być obliczona w następujący sposób:
Całkowita szerokość = szerokość elementu + lewy + prawy obicie obicie + lewy + prawy border border + lewy + prawy margines marginesu
Całkowita wysokość elementu powinna być obliczona w następujący sposób:
Całkowita wysokość elementu = wysokość + dopełnienie + górna dolna górna granica dopełnienie + + + dolna granica górny margines + dolny margines
| Uwaga dla starych IE: Internet Explorer 8 i wcześniejsze wersje, to dopełnienie i obramowanie w width mienia. Aby rozwiązać ten problem, należy dodać <!DOCTYPE html> na stronie HTML. |
|---|
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»