Co to jest normalny przepływ w projektowaniu stron internetowych?

Bill Oxford/Getty Images

Normalny przepływ to sposób, w jaki elementy są wyświetlane na stronie internetowej w większości przypadków. Wszystkie elementy w HTML znajdują się w polach, które są albo polami śródliniowymi, albo blok pudła.

Układanie pudełek blokowych

W normalnym układzie pola blokowe są umieszczane na stronie jedno po drugim (w kolejności, w jakiej są pisane w HTML ). Zaczynają się w lewym górnym rogu pudełka i układają się w stos od góry do dołu. Odległość między poszczególnymi polami jest określona przez marginesy, przy czym górny i dolny margines zapadają się na siebie.

Na przykład możesz mieć następujący kod HTML:

|_+_|To jest szerszy div.

Każdy

DIV jest elementem blokowym, więc zostanie umieszczony poniżej poprzedniego elementu blokowego. Każda lewa zewnętrzna krawędź będzie dotykać lewej krawędzi bloku zawierającego

Boksy inline są ułożone na stronie poziomo, jedno po drugim, zaczynając od góry elementu kontenera. Gdy nie ma wystarczająco dużo miejsca, aby zmieścić wszystkie elementy pola śródliniowego w jednej linii, zawijają się do następnej linii i stamtąd układają się pionowo.

Na przykład w następującym kodzie HTML:

|_+_|

Akapit jest elementem blokowym, ale istnieje 5 elementów śródliniowych:

• 'Ten tekst jest '
• 'pogrubienie'
• ' a ten tekst to '
• 'kursywa'
• „. A to jest zwykły tekst.

Tak więc normalny przepływ to sposób, w jaki te elementy blokowe i wbudowane będą wyświetlane na stronie internetowej bez żadnej interwencji projektanta stron internetowych. Jeśli chcesz wpłynąć na położenie elementu na stronie, możesz użyć pozycjonowania CSS lub pływaki CSS .