Elementy blokowe kontra liniowe - część pierwsza
01 września 2005
(Jest to autoryzowane tłumaczenie artykułu „Block vs. Inline, Part 1” autorstwa Tommy'ego Olssona.)
Istnieją dwa typy elementów w HTMLu: elementy poziomu blokowego i liniowego. Standardy nie mówią wiele o tym jak elementy blokowe powinny być wyświetlane, ale wspominają że zaczynają się one od nowej linii - zachowania którego nie przyjmują natomiast elementy liniowe (szeregowe).
Wszystkie przeglądarki, nawet te z brakami wsparcia dla CSS mają domyślne ustawienia prezentacji dla każdego elementu na stronie. Elementy blokowe wyświetlane są z ukrytym złamaniem linii przed nim i po, podczas gdy elementy liniowe tam gdzie się pojawią w strumieniu tekstu. Dlatego nie jest możliwe umieszczenie obok siebie dwóch elementów blokowych bez użycia CSS.
Czynnikiem określającym który element jest blokowy, a który liniowy jest definicja typu dokumentu - DTD. Nie możemy wpłynąc na to w żaden sposób.
Elementy blokowe
Elementy blokowe zazwyczaj zawierają w sobie inne elementy blokowe, jednakże nie dzieje się tak zawsze.
Niektóre z elementów blokowych mogą zawierać jedynie inne elementy blokowe. Na przykład <form/>. W dokumencie typu ścisłego <body/> może zawierać jedynie elementy blokowe. Tak więc cały tekst musi zostać umieszczony w akapity bądź innych blokach.
Inne elementy blokowe mogą zaś zawierać tylko tekst albo elementy liniowe. Najbardziej znanym przykładem takiego elementu jest <p/>. Akapit.
Trzecią odmianą bloku jest element który może zawierać w sobie obydwa typy elementów. Na przykład <div/> albo <li/>.
Elementy liniowe
Elementy liniowe zazwyczaj zaznaczają semantyczne znaczenie, mimo że istnieją także czysto prezentacyjne elementy. Są one nadal akceptowane w najnowszych standardach. Przykładem semantycznego elementu liniowego jest <dfn/>, który określa definicję danego terminu. (przyp. tłum.: prezentacyjnym elementem liniowym jest <u/>)
Elementy liniowe generalnie zawierają tylko tekst i inne elementy liniowe. Odstępstwem od reguły jest element <object/>, który może zawierać także elementy blokowe.
Iluzjonerzy
Czasem elementy zachowują się jak bloki, a czasem jak elementy szeregowe. Przykładami tutaj są <ins/> i <del/>. To kontekst określa jak są traktowane i co mogą przez to w sobie zawierać. Kiedy przyjmują zachowanie bloku, mogą zawierać inne bloki, elementy liniowe i tekst. A kiedy są liniowe, to tylko tekst i inne liniowe.
Elementy blokowe kontra liniowe w CSS
Pojęcia blok i element szeregowy także istnieją w CSS, gdzie są używane do rozróżnienia dwóch wyraźnie odmiennych typów pojemników, niewidzialnych prostokątów, uczestniczących w prezentacji danego elementu na stronie.
Ogólnie rzecz biorąc, elementy poziomu blokowego w HTML tworzą pojemniki blokowe, podczas gdy elementy poz. liniowego tworzą pojemniki szeregowe.
W przeciwieństwie do sztywnej klasyfikacji elementów blokowych i liniowych w HTML, w CSS możemy kontrolować ich zachowanie. Robimy to poprzez właściwość display. To znaczy, że możemy sprawić, aby element blokowy tworzył pojemnik szeregowy i na odwrót.
Często spotykanym błędem początkujących jest myślenie, że w ten sposób możemy zmienić typ elementu, a nie tylko tworzony pojemnik. Na przykład niektórzy ustawią właściwość display:block dla elementu <span/> i spróbują zagnieździć potem element <p/> w ten <span/>. To nie jest dozwolone. Właściwość display, jak sama nazwa wskazuje, kontroluje jedynie warstwę prezentacyjną elementu, nie tym czym jest.
Liniowa larwa staje się blokowym motylem
To co do tej pory powiedzieliśmy o typach pojemników odnoszących się jedynie do elementów w normalnym strumieniu dokumentu. Kiedy elementy stają się pływające (float:left albo float:right) lub pozycjonowane absolutnie (position: absolute albo position:fixed), rządzą się własnymi zasadami. Zwykle tworzą pojemniki blokowe, to znaczy wartość display przyjmuje block.
Dla elementów pozycjonowanych bądź pływających właściwość display jest zwykle ignorowana, z jednym godny uwagi wyjątkiem, o którym zaraz powiemy.
Pojemnik nie istnieje
Gdy przyznamy elementowi właściwość display:none rzeczy mają się trochę inaczej. Wtedy element wcale nie twrozy pojemnika. I to nie jest kwestia niewidocznego pojemnika. Po prostu nie ma go w ogóle. Różnica jest o wiele ważniejsza niż może się wydawać na pierwszy rzut oka.
Tutaj dochodzimy do naszego wyjątku z display. Dla elementu z display:none właściwości float i position są po prostu ignorowane.
Gdy żaden pojemnik nie jest tworzony dla elementu z display:none nie jest także możliwe sprawienie, aby podrzędny mu element był widoczny. Przyjrzyj się następującemu przykładowi:
<div style="display:none"><p style="display:block">Tekst</p></div>
Moglibyśmy myśleć, że ten kod spodowuje przywrócenie widoczności akapitowi, lecz to nie jest tak. Odkąd element nadrzędny (<div/>) nie tworzy pojemnika, element podrzędny (<p/>) także nie może.
- Ciąg dalszy nastąpi…
Ktos 5
01 września 2005, 20:59
Puck 8
01 września 2005, 21:24
nbw 11
04 września 2005, 10:08
Ja-Joanna 14
17 września 2005, 17:53