Box Model

Wielkość

Jeśli box model nie działa prawidłowo (Quirks Mode), to należy dodać * {box-sizing: content-box;} na początku stylu!

Standardowo szerokość i wysokość ustalane w CSS odnoszą się do wielkości zawartości danego elementu. Całkowita wielkość elementu jest większa o dopełnienie (padding), obramowanie (border) i niewidoczny margines (margin).

Schemat box modelu

Typy boksów

Typy boksów CSS są niezależne od tak samo nazwanych typów elementów XHTML. Można element, który XHTML określa blokowym wyświetlić w CSS jako inline, i odwrotnie. Zmiana wyglądu elementu za pomocą CSS nie zmienia jego znaczenia i reguł użycia w XHTML.

CSS generalnie dzieli elementy na blokowe (block) i liniowe (inline). Elementy blokowe są zawsze prostokątne i mogą mieć nadane wymiary (np. akapit, nagłówek). Elementy liniowe są częścią tekstu i mogą być przełamane przy przenoszeniu do nowej linii (np. pogrubienie, odnośnik).

Szczególnym przypadkiem w CSS są tabele. Ze względu na kompatybilność z HTML tabele nieco inaczej reagują na nadane im wymiary, obramowanie i mają pewne ograniczenia co do pozycjonowania.


Zmodyfikowano: 20.08.2011, 08:01
submit