2. Wszystkie elementy w HTML mogą być rozważane jako pudełka.
W CSS model pudełka dotyczy projektu i układu. Składa się on
z: marginesu, obramowania, odstępu oraz aktualnej zawartości.
Poszczególne elementy:
- zawartość (Content) – miejsce gdzie
tekst i obrazy się pojawiają
- odstęp (Padding) – czyści obszar
wokół zawartości. Odstęp jest
przezroczysty
- obramowanie (Border) – obszar
dookoła zawartości i odstępu
- margines (Margin) – czyści obszar
na zewnątrz obramowania. Jest
przezroczysty
Ostatnie trzy składniki są
opcjonalne, tzn. mogą mieć
wartość zero.
3. Według CSS rozmiary elementu (własności width oraz height)
odnoszą się do samej zawartości (content) i nie wpływają na
pozostałe obszary, które są tworzone na zewnątrz zawartości,
ale też wewnątrz prostokąta.
Natomiast tło elementu jest określone dla wszystkich z
podanych powyżej obszarów z wyjątkiem marginesów
zewnętrznych, które zawsze są przezroczyste (transparent).
7. Jeżeli umieścimy w dokumencie kilka elementów div to zostaną
ułożone jeden pod drugim. Jeżeli chcemy je umieścić obok siebie
należy skorzystać z właściwości float i nadać jej wartość left lub
right. Warto również nadać własność width, żeby dokładnie określić
położenie kolejnych elementów na stronie.
8. PRZYKŁAD
Style.css
div {
width: 200px;
float: left;
margin: 15px;
background:
gray;
}
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</body>
Ustaliliśmy szerokość
jednego elementu div na
200px, margines na 15 px i
dosuwanie do lewej (czyli
do miejsca, gdzie kończy
się poprzedni element).
9. A po zmniejszeniu okna
przeglądarki, elementy
zmienią położenie i
dopasują się tak, żeby
mieścić się w oknie.
10. Elementy, które mają własność float o wartości left lub right
nazywamy elementami pływającymi. Będą one przydatne przy
tworzeniu układu kolumnowego strony, w szczególności do
określenia położenia i rozmiarów menu.
11. PRZYKŁAD
Stworzymy stronę, która po lewej stronie ma menu o szerokości
150px. Cała szerokość strony ma mieć 500px. Czyli na zawartość
zostaje 350px. Dla pewności, że oba elementy zmieszczą się obok
siebie przyjmijmy na zawartość 348px.
13. Uwagi:
należy się upewnić, że suma szerokości obu elementów nie
przekracza szerokości elementu, w którym są zagnieżdżone
bez ustawienia szerokości 500px dla elementu #pojemnik, prawy
prostokąt dopasowałby się do prawej krawędzi przeglądarki
ustawienie marginesu dolnego dla elementów menu oznaczonych
klasą opcja spowodowało rozsunięcie prostokątów
14. ĆWICZENIE
Stwórz stronę, która po lewej stronie ma pojemnik z menu. Pojemnik
ma szerokość 200px i jest wyrównany do lewej właściwością float.
Menu to lista wypunktowana bez punktora. Lista ma zawierać
odnośniki wewnętrzne do wierszy, które znajdują się na stronie. Lista
ma margines 10 pikseli.
Pozostała część strony jest przeznaczona na treść. Ma mieć
szerokość 700px. Dopełnienie wewnętrzne ustaw na 20 pikseli żeby
odsunąć treść od krawędzi. Wypełnij pojemnik wierszami. Określ lewą
krawędź pojemnika z treścią (żeby oddzielić go od menu).
Określ jaką szerokość ma mieć cała strona, żeby zmieściły się w niej
wszystkie elementy. Tło pojemnika z menu ma być niebieskie, tło
pojemnika z treścią pomarańczowe.
17. Inną metodą określenia wymiarów danego elementu jest przypisanie
wartości wysokości i szerokości całemu widocznemu obszarowi
zawierającemu dopełnienie i obramowanie.
Należy wówczas dopisać regułę stylu
box-sizing: border-box;
18.
19. Pierwszy pojemnik ma wymiary
width: 400px
height: 200px.
Jest on większy, ponieważ osobno
doliczamy dopełnienie i obramowanie!
Poniższy pojemnik ma wymiary width:
400px oraz height: 200px.
21. WYMIARY MAKSYMALNE ORAZ
MINIMALNESłużą one do ustalania minimalnych oraz maksymalnych wysokości i
szerokości elementów blokowych. Mogą być przydatne, jeśli chce się
w jakiś sposób ograniczyć rozmiar elementu.
max-height, max-width, min-height, min-width
Należy jednak zwrócić uwagę, że są one stosowane do obszaru
zawartości elementu. Zatem dopełnienie, obramowanie oraz
marginesy sprawią, że rozmiar pojemnika elementu będzie większy.
Ogólnie wysokość elementów określa się dosyć rzadko. Lepiej jest
pozwolić na automatyczne obliczenie wysokości na podstawie
wysokości tekstu i innej zawartości dokumentu.
Dzięki temu możemy zmienić wysokość w oparciu o rozmiar czcionki,
ustawienia użytkownika, czy inne czynniki.
Jeśli jednak ustalimy wysokość elementu zawierającego tekst musimy
zastanowić się co się stanie, gdy zawartość tego elementu nie zmieści
się w nim.
A więc, jeżeli element otrzyma zbyt mały rozmiar dla swojej
zawartości to dzięki właściwości overflow możemy określić, co się
23. hidden – treść niemieszcząca się w obszarze zawartości elementu jest
odcinana i nie pojawia się poza krawędziami tego obszaru.
24. scroll – do pojemnika elementu dodawane są paski przewijania, by
użytkownik mógł przewinąć całą treść elementu.
Uwaga! Ustawiając tą wartość paski przewijania będą
wyświetlone zawsze, nawet jeśli zawartość elementu mieści się w
podanej wysokości.
25. auto – wartość ta pozwala zdecydować przeglądarce, w jaki sposób
poradzić sobie z przepełnieniem elementu. W większości przypadków
paski przewijania dodawane są tylko wtedy, gdy zawartość elementu
się nie mieści.
26. DOPEŁNIENIE
Obszar pomiędzy obszarem zawartości elementu a
obramowaniem (czy też miejscem, w którym znalazłoby się
obramowanie, gdyby zostało dodane).
Dzięki dopełnieniu obramowanie
nie zderza się bezpośrednio z
tekstem.
27. Dopełnienie można podawać w dowolnej z
jednostek długości CSS-a.
Najpowszechniej stosowane to em i px.
Można również podawać jako wartość
procentową.
29. MARGINESY
Opcjonalny obszar dodawany na zewnątrz obramowania. Zapobiegają
bliskiemu stykaniu się elementów ze sobą lub z krawędzią okna
przeglądarki.
Skrótowa właściwość margin działa podobnie do skrótu padding.
Podając 4 wartości zostają zastosowane w kolejności zgodnie z
ruchem wskazówek zegara (góra, prawo, dół, lewo). Przy trzech
wartościach środkowa odnosi się do prawego i lewego boku. Przy
dwóch wartościach pierwsza ma zastosowanie do góry i dołu, a druga
do prawej i lewej strony.
Słowo kluczowe auto pozwala przeglądarce na dostosowanie
marginesu do dostępnej szerokości lub wypełnienie jej.
30.
31. Uwaga!
Marginesy górne oraz dolne sąsiadujących elementów składają
się (ang. collapse). Oznacza to, że zamiast się kumulować,
przylegające marginesy nakładają się na siebie i zostaje
wykorzystana jedynie większa wartość.
Wyjątkiem jest, gdy marginesy górny z dolnym nie składają się
są elementy pływające lub pozycjonowanie bezwzględne.
Marginesy lewe i prawe się nie składają.
Niech górny element ma margines dolny o wielkości 4em,
natomiast element następujący po nim margines górny o
wielkości 2em. Zatem pomiędzy tymi akapitami dostaniemy
margines równy 4em zamiast 6em.
32. MARGINESY UJEMNE
Gdy zastosujemy margines ujemny, zawartość elementu, jego
dopełnienie oraz obramowanie zostaną przesunięte w przeciwnym
kierunku, niż ten wynikający z wartości dodatniej.
33. ELEMENTY PŁYWAJĄCE
Właściwość float przesuwa element na prawo lub lewo najbardziej, jak
się da, pozwalając by następująca po nim zawartość była wokół niego
zawijana ("opływała go").
34.
35. W jaki sposób zrobić odstęp pomiędzy elementem obrazka a
otaczającym go tekstem?
36. CHARAKTERYSTYCZNE CECHY
ELEMENTÓW PŁYWAJĄCYCH
Są one umieszczane wewnątrz obszaru zawartości (wewnętrznych
krawędzi akapitu), który go zawiera. Nie wychodzi na obszar
dopełnienia akapitu.
Marginesy są zachowywane z każdej ze stron elementu pływającego.
Pływać może dowolny element HTML, bez względu na to, czy jest to
element wewnętrzny, czy blokowy.
37.
38.
39.
40.
41. Uwaga!
• Dla pływających elementów tekstowych należy zawsze
podawać szerokość.
• W przykładzie z obrazkami nie podawaliśmy, ponieważ
obrazki mają własność szerokość.
• Pływające elementy wewnętrzne zachowują się jak
elementy blokowe.
• Marginesy elementów pływających nie są składane.
42.
43.
44. Nadpisanie domyślnych ustawień marginesów
przeglądarki dla akapitów. Pozwala to na wyrównanie
elementu pływającego z górą następującego po nim
akapitu.
45. Koniecznie podawaj szerokość pływających elementów
blokowych!
Jeżeli tego nie zrobisz to szerokość pływającego bloku
zostanie ustawiona na auto, przez co element wypełni
szerokość dostępną w oknie przeglądarki lub innym bloku
zawierającym ten element.
Nie ma sensu tworzyć bloku pływającego na pełną
szerokość strony, ponieważ tekst ma opływać ten element, a
nie rozpoczynać się już pod nim.
Elementy pływające nigdy nie znajdą się wyżej niż odwołanie do
nich w źródle dokumentu.
Pływający blok znajdzie się na stronie na prawo lub lewo
od miejsca, w którym pojawia się on w źródle dokumentu,
co pozwala na zawijanie elementów występujących po nim
obok niego.
Będzie on umieszczony poniżej każdego elementu, który
w źródle dokumentu występuje wcześniej.
46. WYŁĄCZANIE ZAWIJANIA TEKSTU
WOKÓŁ ELEMENTÓW PŁYWAJĄCYCH.
Zawijanie (pływanie elementu) wyłącza się w elemencie, który powinien się
zaczynać pod elementem pływającym.
Zastosowanie właściwości clear do elementu zapobiega wyświetlaniu go obok
elementu pływającego i zmusza go do rozpoczynania się w kolejnym
dostępnym obszarze pod tym elementem pływającym.
Wartości właściwości clear
left – rozpoczęcie elementu poniżej elementów pływających po lewej stronie.
right – powoduje, że element nie zawija się wokół elementów pływających po
prawej stronie tego bloku zawierającego, ale rozpoczyna się pod nimi.
both- korzystamy z niej, gdy elementów pływających jest więcej i chcemy być
pewni, że dany element będzie się rozpoczynał poniżej ich wszystkich.
