Zaloguj | Zarejestruj | FAQ
Anonymous

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.



<< Lesson 8: Grupowanie elementów (span i div)

Lesson 10: Marginesy zewnętrzne i wewnętrzne >>