Layoutaufbau/Positionierung im Browser

[Hallowelt]

Hallo!

Mein Problem: Ich habe immer wieder Mühe zu verstehen, wie ein Browser etwas positionieren wird bzw. wie man ein bestimmtes Layout erzielt. Es geht dabei rein um die Positionierung und Grösse der Blöcke, nicht um Aspekte der Gestaltung.

BEISPIELE:
Die CSS-Eigenschaften position, width/height, left/top, float, display, visibility, etc. sowie die dazugehörige Struktur des HTML-Dokuments. Man kann die Eigenschaften natürlich nachschlagen, aber das Zusammenspiel ist meist kaum erklärt.

Unklarheiten, die ich in den letzten Tagen hatte:

• Warum ist ein Div, das mehrere Divs enthält, viel kleiner als der Raum, den seine Kind-Divs tatsächlich einnehmen?
• Wie geht man korrekt vor, wenn man ein Div haben möchte, dass man später explizit und absolut positioniert einblendet?

ZUSMMENFASSUNG:
Worum es letztlich geht: Ich merke einfach, dass ich keinen Plan habe, wie der Browser grundsätzlich beim Aufbau des Layouts vorgeht. Wie dafür die Regeln sind. Darüber würde ich gerne etwas mehr lesen, habe aber leider keine umfassende Erklärung gefunden. Würde mich freuen, wenn mir jemand einen Link oder einen Buchtipp hätte.

Cheers!