Elementami blokowymi nazywamy P, DIV czy FORM , ponieważ przyjmują postać prostokątów, którym możemy nadać szereg właściwości - np. width, height, padding, border. Nie możemy ich natomiast nadać elementom liniowym.
Box model to w pewnym sensie sposób interpretacji powyższych właściwości przez przeglądarki internetowe. Przeglądarki wykonują to na dwa różne sposoby. Oczywiście dzielimy je na ten dobry i ten zły
. Dobrym sposobem jest ten, zgodny ze standardem CSS. Drugi został wymyślony przez autorów Internet Explorera, która od wieków nam webmasterom sprawia trudności. Właściwości width, height, padding i border są od siebie niezależne:
div {
width: 69px;
padding: 6px;
border: 9px
}Właściwość width to miejsce przeznaczone do wpisywania treści. Nie jest to szerokość ogólna, do której wliczamy ramkę itp. Aby obliczyć całkowitą szerokość posłużymy się prostym działaniem:
Tak więc całość zajmie 99px69px + 6px * 2 + 9px * 2 = 99px
Powyżej przedstawiłem wam sposób I czyli standardowy. Istnieje również inny. IE odejmuje właściwości padding i border od width. Jest to między innymi powód błędnego wyglądu twojej strony www w różnych przeglądarkach (opera, ff, ie). Ignorowanie powyższych błędów jest chyba jedną z ważniejszych błędów popełnianych przez początkujących webmasterów, którzy określają wygląd strony tylko i wyłącznie przez css.
Reasumując:
Normalne przeglądarki:
szerokość całkowita = width + padding + border miejsce na treść = width
Internet Explorer:
szerokość całkowita = width miejsce na treść = width - padding - border
Jak sobie z tym poradzić?
Opisany powyżej problem to w sumie tylko problemik, z którym łatwo sobie poradzimy i to wieloma sposobami. Sposób pierwszy jest bardzo prosty, ponieważ polega na nie dodawaniu width i padding lub border jednocześnie dla jednego elementu.
Sposób drugi polegać będzie na dodawaniu specjalnych hacków, niestandardowych sztuczek w CSS, które umożliwiają zdefiniowanie powyższych właściwości osobno dla IE i osobno dla pozostałych przeglądarek. ( bardzo często stosowana metoda jednak osobiście tego nie trawię )
Metoda trzecia to skorzystanie z komentarzy warunkowych.
Sposób czwarty - zmuszenie Internet Explorer do przejścia w tryb zgodności ze standardem CSS. Oczywiście i tutaj znalazł się pewien haczyk. Można to robić tylko i wyłącznie w IE powyżej wersji 5. Cieszmy się więc, ze już tylko niedobitki korzystają z IE 5 i w sumie nie ma sensu przejmować się już tą wersją.
Czym jest box model i jak sobie z nim radzić?
Box model to zagadnienie mocno teoretyczne, ale mające przełożenie na realne działania w świecie CSS i HTML-a. Zacznijmy od tego, że w HTML-u wyróżniamy elementy blokowe i liniowe.
Bartłomiej Dymecki
Elementy blokowe, jak P, DIV czy FORM przyjmują postać prostokątów, którym możemy nadać szereg właściwości - np. width, height, padding, border. Nie możemy ich natomiast nadać elementom liniowym.
Box model jest sposobem interpretacji wyżej wymienionych właściwości przez przeglądarki internetowe. Przeglądarki robią to na dwa różne sposoby. Tylko jeden z nich jest poprawny, zgodny ze standardem CSS. Drugi został wymyślony przez autorów Internet Explorera.
Według specyfikacji języka CSS właściwości width, height, padding i border są od siebie niezależne. Posłużę się prostym przykładem. Spójrz na ten kod:
div {
width: 200px;
padding: 20px;
border: 2px
}
Właściwość width rezerwuje miejsce przeznaczone tylko i wyłącznie dla treści. Aby dowiedzieć się, jaka będzie całkowita szerokość elementu, musimy do głównej szerokości dodać szerokość wewnętrznego odstępu i obramowania. Zdefiniowany DIV zajmie więc razem 200px + 20px * 2 + 2px * 2, czyli 244 piksele.
Oprócz trybu standard istnieje jeszcze drugi sposób interpretacji box modelu. Otóż przeglądarka Internet Explorer odejmuje właściwości padding i border od width. To znaczy, że w naszym przykładzie DIV będzie mieć szerokość 200px, a miejsce przeznaczone na treść zmniejszy się o 44 piksele, czyli szerokość obramowania i odstępu.
Powyższe różnice w interpretacji box modelu mogą być przyczyną wielu problemów z wyglądem Twoich stron. Ignorowanie powyższej różnicy jest jednym z poważniejszych błędów początkujących, którzy chcą określać wygląd strony tylko przy użyciu stylów. Powtórzmy więc to jeszcze raz:
Normalne przeglądarki:
szerokość całkowita = width + padding + border
miejsce na treść = width
Internet Explorer:
szerokość całkowita = width
miejsce na treść = width - padding - border
Jak sobie z tym poradzić?
Na szczęście z opisanym problemem można sobie poradzić i to na kilka różnych sposobów. Pierwszy sposób polega na takim tworzeniu kodu, aby nie podawać właściwości width i padding lub border jednocześnie dla jednego elementu.
Drugą możliwością jest użycie specjalnych hacków, niestandardowych sztuczek w CSS, które umożliwiają zdefiniowanie powyższych właściwości osobno dla IE i osobno dla pozostałych przeglądarek.
Trzeci sposób polega na użyciu komentarzy warunkowych, które nie zawsze są wygodne, ale niekiedy naprawdę przydatne.
Czwarta metoda - zmuszenie Internet Explorer do przejścia w tryb zgodności ze standardem CSS. Jest to możliwe tylko w przypadku szóstej i siódmej wersji tej przeglądarki, ale na szczęście mało kto używa IE 5 i nie ma już sensu przejmować się tą wersją przeglądarki.
Metoda 1: sprytne użycie właściwości
