Lekcja 9: Model blokowy
Model blokowy w CSS opisuje bloki, które są generowane dla elementów HTML. Model blokowy zawiera także dokładne opcje związane z ustawieniem maginesu zewnętrznego, wewnętrznego, obramowania i zawartością każdego elementu. Poniższy diagram pokazuje jak model blokowy jest skonstruowany:
Model blokowy w CSS
Powyższa ilustracja może wydawać się bardzo teoretyczna,
więc spróbujmy użyć modelu blokowego w konkretnym przypadku z nagłówkami i tekstem. HTML dla naszego przykładu (uniwersalna deklaracja praw człowieka):
<h1>Artykuł 1:</h1>
<p>Wszystkie istoty ludzkie rodzą się wolne
i równe w godności i prawach.</p>
Poprzez dodanie koloru i informacji i czcionce przykład będzie wyglądał następująco:
Przykład zawiera dwa elementy : <h1> i <p>. Model blokowy dla dwóch elementów może być zilustrowany następująco:
Nawet jeżeli wygląda to trochę skomplikowanie, ilustracja pokazuje jak każdy element HTML jest otoczony przez bloki. Bloki które możemy ustawić poprzez CSS.
<% 'Właściwości regulujące bloki to: padding, margin i border. Następne dwie lekcje będą dotyczyć właśnie tych trzech właściwości:
Kiedy ukończysz te dwie lekcje, zapanujesz nad modelem blokowym i będziesz potrafił łatwiej i zgrabniej tworzyć układ graficzny dla swoich dokumentów niż robiłeś to wcześniej w starym stylu za pomocą tabel.
%>Podsumowanie
W tej lekcji zostałeś wprowadzony w model blokowy. W kolejnych trzech lekcjach popatrzymy bliżej na to jak tworzyć i kontrolować elementy w modelu blokowym.
