Skocz do zawartości


Zdjęcie

Box model - Informacje podstawowe / W TRAKCIE


  • Zaloguj się, aby dodać odpowiedź
Brak odpowiedzi do tego tematu

#1 Ziele

Ziele

    Biblioteka Zielińskiego

  • 1 812 postów

Napisano 01 11 2008 - 10:35

W html'u wyróżniamy elementy liniowe jak i blokowe.

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 :sweat:. 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:

69px + 6px * 2 + 9px * 2 = 99px

Tak więc całość zajmie 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

  • 0

Zobacz więcej tematów z tagiem: tworzenie stron internetowych



Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych