Head First HTML and CSS-layout and positioning, headcss

Head First HTML and CSS-layout and positioning, headcss

1. flow is used by browsers to place HTML elements on pages.

For block elements, the browser displays each element one by one from top to bottom along the element stream, and adds a line break between each block element;

For inline elements, the horizontal direction will be opposite each other, and the overall direction will be left from the top left to the bottom right.

2. stream and Box Model

Box Model: From the CSS perspective, each element is a box. It consists of content area, padding, border, and margin.

When two inline elements are placed side by side: their margins are superimposed.

When two block elements are placed up and down: the outer margins of the two elements are folded, and the common outer margins are the larger ones (including the nested ones ).

3. float

A floating element must have a width.

When an element floats, it is out of the document flow. Other block elements are filled with its position. However, for inline elements in other block elements, they are centered around this floating element.

Clear float: When an element enters the page, floating content is not allowed on both sides of the element. You can use the clear attribute to clear the float.

4. Gel (jello) Layout

Compared with the float Fluid layout (liquid layouts), the gel layout locks the width of the content area on the page, but centers it in the browser.

Set the property margin: 0 auto;

5. Use CSS to Create Table display

In CSS, set the value to table, table-row, and table-cell through the attribute display.

Unlike HTML tables, CSS table display only uses a table-like layout to express the content in this structure.