Wymiary
Wstęp
Wymiary to stosunkowo prosty temat. W poprzedniej lekcji dowiedziałeś się jak zmieniać elementy box-model’u takie jak margines, obramowanie, czy wypełnienie. Teraz przyszła kolej na właściwy element czyli zawartość lub inaczej mówiąc kontent.
Wymiary
Do opisu wymiarów zawartości istnieje łącznie sześć właściwości, ich wartościami mogą być wszystkie jednostki miary dostępne w CSS. Wymiarów mamy dwa - szerokość, wysokość. Do ustawienia szerokości służą:width,max-widthimin-width, do wysokości:height,max-heightimin-height.
Właściwości:widthiheightustawiają na sztywno wymiary elementu, niezależnie od kontentu, czyli np. tekstu zawartego w elemencie, wymiary zawsze będą takie jak te określone przezwidthiheight.
| 1 2 3 4 5 6 7 8 91011 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><divstyle="width: 200px; height: 100px;">Tekst</div></body></html> |
|---|---|
Minimalny wymiar
Właściwości z przedrostkiemminmają nieco inne zastosowanie niż wyżej wymienione. Mianowicie, w tym przypadku ustala się minimalną szerokość lub minimalną wysokość.
Na przykład po użyciumin-height: 200px;element będzie miał przynajmniej200pikseli wysokości. Jeśli zawartości będzie na tyle dużo, że zajmuje ona więcej niż 200 pikseli, to wysokość elementu zostanie automatycznie zwiększona.
| 1 2 3 4 5 6 7 8 91011121314 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><divstyle="min-height: 20px;"></div><divstyle="min-height: 20px;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.</div></body></html> |
|---|---|
Maksymalny wymiar
Właściwości z przedrostkiemmaxustalają maksymalną wysokość i maksymalną szerokość. W tym przypadku jest odwrotnie niż z przedrostkiemmin. Elementy mogą się do woli zmniejszać dostosowując się do zawartości. Gdy uzyskają wartość maksymalną to nie zostaną już bardziej zwiększone.
Mającmax-width: 200px;element może mieć maksymalnie200pikseli szerokości, niezależnie od zawartości nie będzie szerszy.
| 1 2 3 4 5 6 7 8 91011121314 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><divstyle="max-width: 200px; max-height: 100px;"></div><divstyle="max-width: 200px; max-height: 100px;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.</div></body></html> |
|---|---|
W powyższym przykładzie widać, że pierwszydivnie posiada zawartości, nie jest więc w ogóle wyświetlany.
Łączenie poznanych właściwości
Właściwościminimaxmożna łączyć ze sobą. Zapismin-height: 100px; max-height: 300px;spowoduje, że wysokość elementu będzie mogła wynosić od100do300pikseli.
Nie można natomiast łączyć tych właściwości z ustawianiem na sztywno, ponieważ wartość określona na sztywno nie pozwala na dynamiczną zmianę danego wymiaru.
| 1 2 3 4 5 6 7 8 91011121314 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><divstyle="min-width: 100px; min-height: 20px; max-width: 200px; max-height: 100px;"></div><divstyle="min-width: 100px; min-height: 20px; max-width: 200px; max-height: 100px;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.</div></body></html> |
|---|---|
Zadanie 1
W tym zadaniu Twoim celem jest ustawienie właściwościmax-widthna200pxoraz width na90%dla elementup.
Podsumowanie
W tej lekcji zajęliśmy się dość prostym, jednak ważnym tematem, jakim jest określenie wymiarów zawartości elementu. Miałeś okazję poznać sposób na określenie dokładnych wymiarów, ich minimalnych oraz maksymalnych wartości.