CSS: Layout & Positioning Flashcards
What is browser flow?
Flow is what the browser uses to lay out a page of HTML elements. The browser starts at the top of any HTML file and follows the flow of elements it encounters.
And just considering the block elements for a moment, it puts a line-break between each one. So the first elements is displayed first, then a line break, followed by the second line break, then a line break, and so on, from the top of your file to the bottom. That’s flow.
How do inline elements flow?
Inline elements are flowed next to each other, horizontally, from top left to bottom right. The inline elements are laid next to one another horizontally, as long as there is room on the right to place them.
If we narrow the browser window or reduce the size of the content area with the width property, the browser will create a line break and the inline elements will move onto the next line. The browser uses as many lines as necessary to flow the content into the space.
Describe margin behaviour between side by side inline elements?
When the browser has the task of placing two inline elements side by side, and those elements have margins, then the browser does what you might expect. It creates enough space between the elements to account for both margins.
So if the left element has a margin of 10 pixels and the right has a margin of 20 pixels, then there will be 30 pixels of space between the two elements.
Describe margin behaviour between inline elements that sit one on top of the other?
When the browser places two block elements on top of each other it collapses their shared margins together. The height of the collapsed margin is the height of the largest margin.
Describe what the float property does?
The float property first takes an element and floats it as far left or right as it can. It then flows all the content below it around the element.
What two requirements must an element have before it can be floated?
An identity and a width.
How do you make sure that there’s no extra room around the edges of the page?
Set the margin of the body to 0.
Is the order of your HTML important when floating elements?
When you float an element, you need to move the HTML for the element directly below the element that you want it to follow.
What effect does floating an element have on its position within the flow.
Floating an element removes it completely from the normal flow.
What is the clear property and how should you use it.
The clear property is used on an element to request that as the element is being flowed onto the page, no floating content is allowed on the left, right, or both sides of the element.
For example if you apply the css clear: right to an element, no floating content will be allowed to the right of it.
Do margins collapse on floated elements?
No. Unlike block elements that are flowed on the page, floated elements are just floating. In other words, the margins of floated elements aren’t actually touching the margins of the elements in the normal flow, so they can’t be collapsed.
Can you float an inline element?
Yes you can. The best and most common example is to float images. Float an image left or right in a paragraph and you’ll see the text float around it. Don’t forget to add padding to give the room a little room, and possibly a border.
You can also float any other inline element you like, but it’s not commonly done.
What CSS feature do you use to precisely position elements on the page?
absolute positioning.
Describe the way block elements flow on the page?
Block elements flow from the top down, with a line break between elements. By default, each element takes up the entire width of the browser window.
Describe the way inline elements flow inside a block element?
Inline elements flow inside a block element from the top left to the bottom right. If more than one line is needed, the browser creates a new line, and expands the containing block element vertically to contain the inline elements.
