docBox model
download 
Reklamacja Transkrypt
Box model
Box model
Box model:
Content
Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Box model:
Padding
Content
Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Padding - margines wewnętrzny (dopełnienie) określany jest za pomocą deklaracji
kierunkowych cech: margin-top, margin-right, margin-bottom oraz margin-left. Należy pamiętać, że dopełnienie zawsze przyjmuje barwę zawartości.
Box model:
Margin
Padding
Content
Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Padding - margines wewnętrzny (dopełnienie) określany jest za pomocą deklaracji
kierunkowych cech: margin-top, margin-right, margin-bottom oraz margin-left. Należy pamiętać, że dopełnienie zawsze przyjmuje barwę zawartości.
Margin - margines zewnętrzny, podobnie jak wewnętrzny określany jest za pomocą deklaracji kierunkowych cech: margin-top, margin-right, margin-bottom oraz
margin-left. Należy pamiętać, że margines jest przezroczysty.
Box model:
Margin
Padding
Content
Border
Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.
Padding - margines wewnętrzny (dopełnienie) określany jest za pomocą deklaracji
kierunkowych cech: margin-top, margin-right, margin-bottom oraz margin-left. Należy pamiętać, że dopełnienie zawsze przyjmuje barwę zawartości.
Margin - margines zewnętrzny, podobnie jak wewnętrzny określany jest za pomocą deklaracji kierunkowych cech: margin-top, margin-right, margin-bottom oraz
margin-left. Margines zewnętrzny jest przezroczysty.
Border - obrys określany jest za pomocą deklaracji grubości. Kolor obrysu jest niezależny
od koloru zawartości.
Cechy pudełka takie jak: Padding, Margin, Border są opcjonalne.
Obliczanie szerokości pudełka
Content
Content + Content
Content
Obliczanie szerokości pudełka
Padding
Padding
Content
Content
Padding + Content + Padding + Padding + Content + Padding
Obliczanie szerokości pudełka
Padding
Padding
Content
Content
Border + Padding + Content + Padding + Border + Border + Padding + Content + Padding + Border
Obliczanie szerokości pudełka
Margin
Margin
Padding
Padding
Content
Content
Margin + Border + Padding + Content + Padding + Border + Margin + Margin + Border + Padding
+ Content + Padding + Border + Margin
Ćwiczenie 1 - zapis szerokości pudełka
1. Utwórz dokument html5.
2. Zapisz dokument - „01-Box.html”
3. W sekcji nagłówka dokumentu napisz arkusz CSS formatujący szerokość - 100px i wysokość 100px sekcji <div>.
4. Aby generowany element był w przeglądarce widoczny wypełnij go barwą, np. czerwoną.
<style type=”text/css”>
<!-#box{
height: 100px;
width:100px;
background-color:red;
} -->
</style>
5. W sekcji body, napisz kod tworzący pudełko - element div.
...
<div id=”box”></div>
...
6. Zapisz zmiany wprowadzone do dokumentu.
7. Przetestuj dokument.
8. Powiększ pudełko o margines wewnętrzny (dopełnienie) grubości 50px.
...
padding: 50px;
...
9. Zapisz zmiany wprowadzone do dokumentu.
10.Przetestuj dokument.
11.Napisz deklarację tworzącą obrys o grubości 5px, typu - linia ciągła, w kolorze czarnym.
...
border: 5px solid black;
...
12.Napisz deklarację tworzącą margines zewnętrzny grubości 50px.
...
margin:50px;
...
13.Twój arkusz powinien wyglądać następująco:
<style type=”text/css”>
<!-#box{
height: 100px;
width:100px;
background-color: red;
padding: 50px;
border: 5px solid black;
margin:50px;
} -->
</style>
14.Zapisz zmiany wprowadzone do dokumentu.
15.Przetestuj dokument.
Ćwiczenie 2 - zapis szerokości pudełka
1.
2.
3.
•
•
Utwórz dokument html5.
Zapisz dokument - „02-Box.html”
W sekcji nagłówka dokumentu napisz arkusz CSS formatujący dwa elementy sekcji div.
Pierwszy - box-1 - o szerokości - 100px i wysokości 100px, w kolorze czerwonym.
Drugi - box-2 - o szerokości - 100px i wysokości 100px, w kolorze niebieskim.
<style type=”text/css”>
<!-#box-1{
height: 100px;
width:100px;
background-color: red;
}
#box-2{
height: 100px;
width:100px;
background-color: blue;
}
-->
</style>
4. W sekcji body, napisz kod tworzący dwa pudełka
- elementy div.
...
<div id=”box-1”></div>
<div id=”box-2”></div>
...
5. Zapisz zmiany wprowadzone do dokumentu.
6. Przetestuj dokument.
Ćwiczenie 3 - marginesy wewnętrzne i zewnętrzne o stałej grubości
1.
2.
3.
•
•
Utwórz dokument html5.
Zapisz dokument - „03-Box.html”
W sekcji nagłówka dokumentu napisz arkusz CSS formatujący dwa elementy sekcji div.
Pierwszy - box-1 - o szerokości - 100px i wysokości 100px, z marginesami wewnętrznymi (dopełnieniem) o grubości 50px w kolorze czerwonym.
Drugi - box-2 - o szerokości - 100px i wysokości 100px, z marginesami wewnętrznymi
(dopełnieniem) o grubości 50px w kolorze niebieskim.
<style type=”text/css”>
<!-#box-1{
height: 100px;
width:100px;
background-color: red;
padding:50px;
}
#box-2{
height: 100px;
width:100px;
background-color: blue;
padding:50px;
}
-->
</style>
4. W sekcji body, napisz kod tworzący dwa pudełka
- elementy div.
...
<div id=”box-1”></div>
<div id=”box-2”></div>
...
5.
6.
7.
•
Zapisz zmiany wprowadzone do dokumentu.
Przetestuj dokument.
Powiększ wielkość pudełek o grubość marginesów zewnętrznych.
wstaw nową linijkę do kodu deklaracji selektora #box-1 i wpisz:
#box-1{
height: 100px;
width:100px;
background-color: red;
padding:50px;
margin: 50px;
}
• wstaw nową linijkę do kodu deklaracji selektora
#box-2 i wpisz:
#box-2{
height: 100px;
width:100px;
background-color: red;
padding:50px;
margin: 50px;
}
8. Zapisz zmiany wprowadzone do dokumentu.
9. Przetestuj dokument.
Wyznaczanie szerokości i wysokości pudełka - edycja marginesów wewnętrznych i zewnętrznych
margin-top
padding-left
padding-bottom
margin-bottom
padding-right
margin-right
margin-left
padding-top
Wyznaczanie szerokości i wysokości pudełka - edycja marginesów wewnętrznych i zewnętrznych
#box-3 {
padding-top: 30px;
padding-right: 40px;
padding-bottom: 50px;
padding-left: 60px;
}
#box-4 {
margin-top: 30px;
margin-right: 40px;
margin-bottom: 50px;
margin-left: 60px;
}
#box-3 {
padding: 30px 40px 50px 60px;
}
lub
#box-4 {
margin: 30px 40px 50px 60px;
}
Ćwiczenie 4 - marginesy wewnętrzne i zewnętrzne o różnej grubości
1. Utwórz dokument html5.
2. Zapisz dokument - „04-Box.html”
3. W sekcji nagłówka dokumentu napisz arkusz CSS formatujący szerokość - 100px i wysokość 100px sekcji <div>.
4. Aby generowany element był w przeglądarce widoczny wypełnij go barwą, np. czerwoną.
<style type=”text/css”>
<!-#box{
height: 100px;
width:100px;
background-color: red;
} -->
</style>
5. W sekcji body, napisz kod tworzący pudełko - element div.
...
<div id=”box”></div>
...
6. Zapisz zmiany wprowadzone do dokumentu.
7. Przetestuj dokument.
8. Powiększ pudełko o marginesy wewnętrzne (dopełnienia): górny - 30px, lewy - 40px,
dolny - 50 px, prawy - 60.px.
...
padding: 30px 40px 50px 60px;
...
9. Zapisz zmiany wprowadzone do dokumentu.
10.Przetestuj dokument.
11.Napisz deklarację tworzącą marginesy zewnętrzne: górny - 30px, lewy - 40px, dolny 50 px, prawy - 60.px.
margin: 30px 40px 50px 60px;
12.Zapisz zmiany wprowadzone do dokumentu.
13.Przetestuj dokument.
punkt ćw. 1-6
punkt ćw. 8-9
punkt ćw. 10-12
Pozycjonowanie
Domyślny zapis elementów blokowych układa je pionowo, jeden pod drugim.
Aby ułożyć je poziomo należy do deklaracji wprowadzić: właściwość display o wartości inline-block.
div {display: inline-block}
LUB
Do deklaracji układu wskazanego selektora wprowadzić właściwość float, która odpowiedzialna jest za poziome wyrównanie względem siebie elementów blokowych w jednym wierszu.
Wyróżniamy trzy cechy tej wartości:
left - do lewej
right - do prawej
none - element nie sąsiaduje z innymi
float: left;
float: right;
float: none;
Ćwiczenie 5 - wyrównanie w poziomie - metoda 1
(właściwość display o wartości inline-block)
1. Utwórz dokument html5.
2. Zapisz dokument - „05-Box.html”
3. W sekcji nagłówka dokumentu napisz arkusz CSS.
<style type=”text/css”>
<!-div {
width:100px;
height:100px;
margin:5px;
display: inline-block;
}
div#box-1 {
background-color: red;
}
div#box-2 {
background-color: blue;
}
p {display:inline-block;}
-->
</style>
4. W sekcji body, napisz kod:
...
<div id=”box-1”></div>
<div id=”box-2”></div>
<p>wiosna</p>
<p>lato</p>
...
5. Zapisz zmiany wprowadzone do dokumentu.
6. Przetestuj dokument.
Ćwiczenie 6 - wyrównanie w poziomie - metoda 2 (właściwość : float o wartości left)
1. Utwórz dokument html5.
2. Zapisz dokument - „06-Box.html”
3. W sekcji nagłówka dokumentu napisz arkusz CSS.
div#box-1,div#box-2 {
width:100px;
height:100px;
margin:5px;
padding:20px;
}
div#box-1 {
background-color: red;
float: left;
}
div#box-2 {
background-color: blue;
float: left;
}
-->
</style>
4. W sekcji body, napisz kod:
...
<div id=”box-1”></div>
<div id=”box-2”></div>
...
5. Zapisz zmiany wprowadzone do dokumentu.
6. Przetestuj dokument.
Ćwiczenie 7 - wyrównanie w poziomie - metoda 2 (właściwość : float o wartości right)
1. Otwórz dokument „06-Box.html”
2. Zapisz dokument jako - „07-Box.html”
3. W sekcji nagłówka dokumentu właściwości float dla selektorów: div#box-1 oraz
div#box-2 przypisz wartość right.
div#box-1,div#box-2 {
width:100px;
height:100px;
margin:5px;
padding:20px;
}
div#box-1 {
background-color: red;
float: right;
}
div#box-2 {
background-color: blue;
float: right;
}
-->
</style>
4. W sekcji body, napisz kod:
...
<div id=”box-1”></div>
<div id=”box-2”></div>
...
5. Zapisz zmiany wprowadzone do dokumentu.
6. Przetestuj dokument.
Ćwiczenie 8 - wyrównanie w poziomie - metoda 2 (właściwość : float)
1. Otwórz dokument „07-Box.html”
2. Zapisz dokument jako - „08-Box.html”
3. W sekcji nagłówka dokumentu właściwości float dla selektora: div#box-1 przypisz wartość left.
div#box-1,div#box-2 {
width:100px;
height:100px;
margin:5px;
padding:20px;
}
div#box-1 {
background-color: red;
float: left;
}
div#box-2 {
background-color: blue;
float: right;
}
-->
</style>
4. W sekcji body, napisz kod:
...
<div id=”box-1”></div>
<div id=”box-2”></div>
...
5. Zapisz zmiany wprowadzone do dokumentu.
6. Przetestuj dokument.
Ćwiczenie 9 - wyrównanie w poziomie - metoda 2 (właściwość : float)
1. Otwórz dokument „08-Box.html”
2. Zapisz dokument jako - „09-Box.html”
3. W sekcji nagłówka dokumentu właściwości float dla selektora: div#box-1 przypisz wartość right.
4. W sekcji nagłówka dokumentu właściwości float dla selektora: div#box-2 przypisz wartość left.
div#box-1,div#box-2 {
width:100px;
height:100px;
margin:5px;
padding:20px;
}
div#box-1 {
background-color: red;
float: right;
}
div#box-2 {
background-color: blue;
float: left;
}
-->
</style>
5. W sekcji body, napisz kod:
...
<div id=”box-1”></div>
<div id=”box-2”></div>
...
6. Zapisz zmiany wprowadzone do dokumentu.
7. Przetestuj dokument.
Najczęściej stosowane jednostki miary:
Absolutne (niezależne, sztywne)
pt — punkt (point)
px — piksel (pixel)
Relatywne (wielkość elementów podrzędnych zależna jest od wielkości elementów nadrzędnych)
% — procent
100% oznacza domyślną wartość, 200% wartość dwukrotną, 50% połowę itd.
em — stopień pisma
Standardowa, domyślna wielkość czcionki w nowoczesnych przeglądarkach to:
100% = 1 em = 16 px = 12 pt = 1 pc
ex — wysokość x (x-height)
1 ex = x (wysokość małej litery bez wydłużeń)
ex to jednostka względna, zależna od wysokości małych liter w danym kroju. 1 ex ma
długość równą wysokości małych liter (bez wydłużeń dolnych) w danym kroju (np. litera
„x» — stąd nazwa x-height ).
Jak widać, wielkość ex jest zależna od rodzaju użytego kroju. Każdy krój ma inny stosunek
wysokości dużych liter do małych. Średnio ten stosunek wynosi 1:2
na podstawie: http://taat.pl/narzedzia/typo/kalkulator_jednostek.html
CSS
Wysokość i szerokość
selektor
cecha
przykładowa wartość
div
width:
hight:
100px;
100px;
Margines wewnętrzny (dopełnienie)
selektor
cecha
przykładowa wartość
div
padding-top:
padding-right:
padding-bottom:
padding-left:
10px;
20px;
30px;
40px;
Zapis skrótowy:
selektor
cecha i przykładowa wartość
opis
div
padding:10px
Wszystkie o jednakowej wartości.
Pierwszy określa top i bottom,
a drugi right i left
Pierwszy określa top, drugi right i left, trzeci bottom.
Pierwszy określa top, drugi right i left, trzeci bottom, czwarty right
padding:10px
20px
padding:10px
20px 30px
padding:10px
20px 30px 40px
Margines zewnętrzny
selektor
cecha
przykładowa wartość
margin-top:
margin-right:
margin-bottom:
margin-left:
10px;
20px;
30px;
40px;
Zapis skrótowy:
selektor
cecha i przykładowa wartość
opis
div
padding:10px
Wszystkie o jednakowej wartości.
Pierwszy określa top i bottom,
a drugi right i left
Pierwszy określa top, drugi right i left, trzeci bottom.
Pierwszy określa top, drugi right i left, trzeci bottom, czwarty right
padding:10px
20px
padding:10px
20px 30px
padding:10px
20px 30px 40px
Obrys
selektor
cecha
div
obrys (górny)
border-top-width:
border-top-style:
border-top-color:
obrys (prawy)
border-right-width:
border-right-style:
border-right-color:
obrys (dolny)
border-bottom-width:
border-bottom-style:
border-bottom-color:
obrys (lewy)
border-left-width:
border-left-style:
border-left-color:
Zapis skrótowy dla jednakowych wartości obrysu:
div {
border: thin solid #C0C0C0;
}
Zapis skrótowy dla różnych wartości obrysu:
div {
border-top: 3px hidden #800080;
border-right: 6px dotted #C0C0C0;
border-bottom: 8px groove #008080;
border-left: 1px ridge #FF00FF;
}
przykładowa wartość
thin;
solid;
red;
thin;
solid;
red;
thin;
solid;
red;
thin;
solid;
red;
