Three ways of web page layout:
- Standard stream
- float
- Positioning
Standard stream:
In-line elements can be multiple in one line.
Block-level elements are on their own line.
That is, each element has its own format.
Often used for top-to-bottom layout.
float:
Definition: The
element deviates from its original position and is at a higher level.
Syntax
selector {float: attribute value}
none (default) left. Right
features:
1. Off-standard:
Depart from the standard position, that is, the original position will be occupied by the unfloating grid.
2. Parallel:
multiple boxes are set to float, and the tops are aligned, arranged in the same row until they reach the edge of the container.
3. Inline block element characteristics:
any element can be floated, and the floated element has the characteristics of inline block element.
4. Note:
Arrange the standard parent elements up and down to constrain the position of floating child elements.
One element floats, in theory, other sibling elements also float. (Only affect the following standard stream).
5. Clear float:
When to use: When the
parent class is inconvenient to give the height.
Principle:
Closed floating.
Syntax:
selector {clear: attribute value}
left. right. Both (commonly used)
four methods:
- Add an extra tag after the last floating element and add a clear floating style.
- The parent element adds overflow attributes (hidden, auto, scroll), but the overflow part cannot be displayed.
- after pseudo-element.
- Double pseudo-element.
Positioning:
Definition: The
box is fixed in a certain position and presses other boxes.
Structure:
Positioning mode + Positioning distance
Positioning mode:
position: static/relative/absolute/fixed/sticky
Positioning distance:
top/bottom/left/right
Static:
Default positioning:
(no positioning), standard flow.
Relative positioning:
relative to the original position.
Not off the mark.
Absolute positioning:
relative to the position of the parent element (no parent element, or no positioning, the browser is the standard).
The parent element has a positioning of 90 (non-static), and the nearest parent element is the standard.
Do not occupy the original position and miss the bid. Fixed positioning of the
son and the father
: the
visual area of the browser is the standard, and it does not scroll with the progress bar.
Do not occupy the original position and miss the bid.
Sticky positioning:
(a mix of relative and fixed.)
Relative to the browser's visual window.
Occupy the position.
One of the four distances must be added to be effective.
Positioning stacking sequence:
z-index: Integer or auto; the one with the
larger attribute value is at the top.
Those with the same attribute value come first.
Only the positioned box has the z-index attribute