Model pudełkowy - BOX Model.
Na każdy element strony internetowej można spojrzeć jak na pudełko mające kilka zasadniczych wartości,
które można łatwo zdefiniować.
Do takich można zaliczyć WYSOKOŚĆ, SZEROKOŚĆ, ZAWARTOŚĆ, DOPEŁNIENIE, OBRAMOWANIE,
MARGINES. Część z tych właściwości została już wcześniej omówiona, dlatego w tym temacie ograniczym się do rzeczy
nowych.
Powyższy obrazek przedstawia ideę spojrzenia na elementy strony internetowej jak na pudełko. Jako pudełko można
potraktować całą stronę internetową, jak również pojedyncze obiekty jak obrazy, akapity, kontenery i inne znaczniki.
Inne właściwości pudełek
Oprócz oczywistych wartości selektorów takich jak szerokość, wysokość i inne widoczne wyżej, warto poznać dodatkowe
wartości pozwalające na niestandardowe zachowanie i wygląd elementów na stronie www.
Zaokrąglenie obramowania:
border-radius: 30px; - wszystkie narożniki obiektu mają zaokrąglenie o promieniu 30 pikseli.
Wysokość i szerokość akapitu:
p {
width: 800px;
height: 300px;
}
Ustawienia marginesów dla całej strony:
html, body {
margin: 50px;
}
Inne style obramowania:
solid - linia ciągła,
dotted - linia kropkowana,
dashed - linia kreskowana,
dashed - linia podwójna,
groove - linia rowkowana,
ridge - linia wypukła,
inset - efekt wklęsłości,
outset - efekt wypukłości,
none - brak obramowania.
WARTO WIEDZIEĆ!
Zaokrąglenie dla obramowania jest dostępne wyłącznie dla wartości solid.
Gdy zmienisz styl obramowania na dowolny, zaokrąglenie nie będzie widoczne (nie jest to Twój błąd lub brak odpowiedniego prefixu).
Więcej na temat obramowania
Gdy decydujesz się na dodanie obramowania dla dowolnego znacznika, nie zawsze musisz ustalać jednakowe wartości dla każdego
z boków. W zasadzie można ustawić każdy bok zupełnie inny. Przyjrzyj się poniższemy przykładowi.
.box {
border: 3px black; - szerokość linii obramowania ma 2 piksele i kolor czarny,
border-style: dotted dashed solid double; - góra kropkowana, prawa kreskowana, dolna ciąła, lewa podwójna,
}
Łatwo zauwazyć, że wartości dotted, dashed, solid i double spowodowały zmianę boków zgodnie z ruchem wskazówek
zegara zaczynając od górnej części obramowania, a kończąc na lewym boku.
Istnieje możliwość ustawienia tylko wybranych boków. Oto kilka przykładów.
Linia ciągła tylko dla górnej i dolnej
części obramowania:
border-style: solid none solid none;
lub w wersji skróconej:
border-style: solid none;
Można też podać wartości odnoszące się wyłącznie do jednego z boków:
border-left: 12px solid red;
Pudełko z zaokrąglonymi narożnikami:
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
CIEKAWOSTKA!
Część wartości nie będzie działać we wszystkich przeglądarkach. W tym celu należy w pliku css dodać kod dla każdej z przeglądarek, np:
-moz-border-radius: 30px;- dla przeglądarki Mozilla Firefox,
-webkit-border-radius: 30px;- dla przeglądarki Safari,
-o-border-radius: 30px;- dla przeglądarki Opera,
-ms-border-radius: 30px;- dla Internet Explorer,
border-radius: 30px;- dla pozostałych przeglądarek.
Jeśli jakakolwiek wartość selektora nie działa w przeglądarce MOZILLA FIREFOX, należy dodać prefix-moz-, a w przypadku przeglądarki SAFARI należy dodać prefix-webkit-. Podobnie w pozostałych przeglądarkach dodajemy odpowiednie prefixy w zależności od potrzeb.
BOX Model.
Every element of a website can be looked at as a box that has several core values,
which can be easily defined.
These may include: HEIGHT, WIDTH, CONTENT, PADDING, BORDER,
MARGINS. Some of these properties have been discussed previously, so in this topic I will limit myself to things
new.
The image above shows the idea of looking at website elements as a case. As a box, you can
consider the whole web page, as well as individual objects like images, paragraphs, containers and other tags.
Other box features
In addition to the obvious selector values such as width, height and others seen above, it is worth learning about additional
values. They allow for custom behavior and appearance of elements on the website.
Rounding the border:
border-radius: 30px; - all corners of an object have a rounded radius of 30 pixels.
Paragraph height and width:
p {
width: 800px;
height: 300px;
}
Margin settings for the entire web page:
html, body {
margin: 50px;
}
Other border styles:
solid - solid line,
dotted - dotted line,
dashed - dashed line,
double - double line,
groove - groove line,
ridge - ridge line,
inset - concavity effect,
outset - bulge effect,
none - no border.
GOOD TO KNOW!
Rounding for border is available only for solid values.
When you change the border style to anything, the rounding will not be visible (it is not your fault or missing the correct prefix).
More about the border
When you decide to add a border for any tag, you don't always have to set equal values for each
sides. In fact, you can set each side completely different. Take a look at the example below.
.box {
border: 3px black; - border line width is 2 pixels and black,
border-style: dotted dashed solid double; - top dotted, right dashed, bottom solid, left double,
}
It is easy to see that the values dotted, dashed, solid i double caused the sides to change clockwise starting from
the top part of the border, and ending on the left side.
It is possible to set only selected sides. Here are some examples.
Solid line on top and bottom only
parts of the border:
border-style: solid none solid none;
short version:
border-style: solid none;
It is also possible to give values relating to only one of the sides:
border-left: 12px solid red;
Box with rounded corners:
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-o-border-radius: 30px;
REMEMBER!
Some values will not work in all browsers. In order to do that, you should add a different code in the css file for each of the browsers, for example:
-moz-border-radius: 30px;- for Mozilla Firefox browser,
-webkit-border-radius: 30px;- for the Safari browser,
-o-border-radius: 30px;- for the Opera browser,
-ms-border-radius: 30px;- for Internet Explorer browser,
border-radius: 30px;- for other browsers.
If any selector value does not work in the browser MOZILLA FIREFOX, add a prefix-moz-, and for the SAFARI browser add a prefix-webkit-. In other browsers, add the appropriate prefixes as needed.