#10. Model pudełkowy⬜

O co chodzi?

Elementy HTML są rozumiane jako pudełka, które zawierają w sobie dane treści. Każde pudełko składa się z marginesów, ramek, paddingów i zawartości, którą to mogą być także dowolne elementy HTML.

W poniższym podglądzie stworzyłem kod, który odwzoruje model pudełkowy. Podczas uzupełniania styli, proponuje Wam, abyście podczas dołączania poszczególnych deklaracji zapisywali pliki i sprawdzali na bieżąco jak reaguje strona na podglądzie. Łatwo w taki sposób, nauczyć się jak sprawdza się dana reguła w CSS😉

summer-mountain-el3f0

summer-mountain-el3f0 by danielminschinski

Tak w skrócie opisze poniżej model pudełkowy który stworzyłem na potrzeby zrozumienia tematu:

1. Content (zawartość) – zawartość pudełka, może nim być zdjęcie, tekst lub inny element,
2. Padding – obszar pomiędzy zawartością pudełka a jego granicą (ramką),
3. Border (ramka) – okala padding i zawartość,
4. Margin (margines) – przestrzeń zewnętrzna pomiędzy pudełkiem a elementami zewnętrznymi

Powyższe elementy wpływają na całkowitą zajmowaną przestrzeń elementu na stronie. Każde takie pudełko zwiększa ją wg reguł CSS.

Ramki dla przypomnienia◻⬜🔳◽🔲

Poniżej dodaję przykład reguły dodawania ramki do elementu z przykładową klasą:

.example_class {
 border: 5px solid blue;
}

Dla właściwości border można zapisać kilka wartości po spacjach:

• 5px – ramka ma mieć szerokość 5px,
• solid – styl ramki to solid, tzn. linia ciągła (pozostałe opcję to dashed – przerywana oraz dotted – kropkowana),
• blue – kolor ramki

Oczywiście powyższy zapis możemy rozbić na poszczególne właściwości:

.example_class {
 border-width: 5px;
 border-style: solid;
 border-color: blue;
}

Zaokrąglenia rogów

Ciekawą opcją modyfikacji ramek jest właściwość border-radius. Dzięki niej możemy zaokrąglać narożniki. Wartość tej właściwości można wyrażać zarówno w pikselach, jak i w procentach:

• border-radius: 5px;
• border-radius: 3% (50% jest wartością maksymalną)

Marginesy lekiem na ścisk

Zazwyczaj kolejny element czyli tzw. pudełko, zaczyna się tam, gdzie kończy się poprzedni. Aby rozdzielić je od siebie, należy użyć właściwości margin, którą podajemy w pikselach. Nadaje ona odległość na zewnątrz elementu.

Właściwości takie jak margin, padding oraz border mogą mieć również rozbudowane nazwy o końcówki:

• …-top – góra,
• …-right – prawa,
• …-bottom – dół,
• …-left – lewa

Powyższe końcówki doprecyzowują z której strony danego elementu właściwość ta ma być zaaplikowana. Jeżeli nie użyjemy żadnej końcówki, to podana wartość zostanie użyta na wszystkie strony.

Wysokości i szerokości elementów

Domyślnie elementy blokowe w HTML, np.: <div> zajmują całą szerokość elementu rodzica w którym się znajduje.

Wysokość elementu wynika z sumy wysokości elementów wewnątrz. Dla sprecyzowania, jeśli jest taka potrzeba to każdemu elementowi możemy zadeklarować jego dokładny rozmiar. Do tego celu służą właściwości width i height. Wartości dla tych właściwości podajemy najczęściej w pikselach, choć można również w procentach.

Przećwiczmy na przykładzie box-modelu dodawanie ramek (border) dla elementów HTML oraz ich modyfikowanie.

Tak w skrócie wygląda model pudełkowy. Mam nadzieje, że powyższy przykład, zobrazował Wam logikę nowego pojęcia. Manipulowanie deklaracjami w naszych pudełkach, pozwala na modyfikowanie ich elementów “potomków”.

Dzisiaj mamy poniedziałek. W następnym poście omówię szerzej o listach punktowanych😉 (mam nadzieję że wyrobię się w obecnym tygodniu😃)

Zapraszam do subskrypcji 😉 oraz śledzenia fb 👍

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA 

• Facebook