model pudełkowy - Kurs HTML i CSS

Źródło: Cascading Style Sheets, Level 2 Każdy element generuje w dokumencie prostokątny obszar zwany pudełkiem (ang. Box model). Pudełko składa się z: Zawartości - "Content" (np. test, obrazek itd.) Otaczających marginesów wewnętrznych - "Padding" Obramowania - "Border" Marginesów - "Margin" Ostatnie trzy składniki są opcjonalne, tzn. mogą mieć wartość zero. Obwód (zewnętrzny) każdego z czterech obszarów nazywamy krawędzią ("Edge"). Według CSS rozmiary elementu (własności width oraz...

Źródło: CSS Box Model Module Level 3 Spis treści margin margin-bottom margin-left margin-right margin-top padding padding-bottom padding-left padding-right padding-top margin Atrybuty mieszane marginesu Wartość <'margin-top'>{1,4} Inicjalizacja 0 Zastosowanie wszystkie elementy Dziedziczenie nie Procenty odnosi się do logicznej szerokości bloku obejmującego margin-bottom Dolny margines Wartość <length-percentage> | auto Inicjalizacja 0 Zastosowanie wszystkie...

...Model pudełkowy wg CSS 2] Nie dotyczy przeglądarki Firefox ani Opera. We wcześniejszych wersjach Internet Explorera przedstawiony wyżej model określania rozmiarów wg CSS odnosi się tylko do szerokości komórek tabeli, ale nie do ich wysokości. Wcześniejsze wersje MSIE nie stosowały tych zasad również w ogóle dla tabeli o rozplanowaniu stałym ("fixed"). We wcześniejszych wersjach MSIE własność padding nie miała zastosowania do znacznika <img>. W trybie Quirks element body...

...należy wpisać: border-box - tło wyświetli się pod obramowaniem, marginesem wewnętrznym i właściwą zawartością elementu (domyślnie) [Zobacz: Model pudełkowy] padding-box - tło wyświetli się pod marginesem wewnętrznych i właściwą zawartością elementu content-box - tło wyświetli się tylko pod właściwą zawartością elementu Możliwe jest również określenie kilku wartości przycinania - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor { background-clip: przycinanie obrazka 1...

...właściwej zawartości elementu Zgodnie z komputerowym układem współrzędnych punkt zerowy znajduje się zawsze w lewym-górnym narożniku. W przypadku modelu pudełkowego możemy mieć jednak aż trzy takie narożniki - dla różnych obszarów wewnątrz elementu. Ustalenie położenia początkowego okazuje się szczególnie przydatne, jeśli korzystamy również z przycinania tła. Możliwe jest również określenie kilku wartości pozycji początkowej - kiedy wstawiamy w tle więcej niż jeden obrazek: selektor...

...Natomiast "zaokrąglenie" określa promień wyrażony w jednostkach długości albo w procentach (względem obszaru obramowania - zobacz: Model pudełkowy). Możliwe jest tutaj podanie: jednej wartości - zaokrąglenie symetryczne dwóch wartości - pierwsza określa poziomy promień ćwiartki elipsy zaokrąglenia, a druga - pionowy Źródło: CSS Backgrounds and Borders Module Level 3 Zaokrąglone narożniki to bardzo ciekawy efekt wizualny, który może zwiększyć estetykę strony. Co ciekawe...