Four, positioning method

Summary: Indentation or outer convex refers to the height or width of an extruded element when one or more edges overlap with the parent container, and the offset refers to the element's overall deviation from the normal flow position without changing the height and width, and the alignment means that the set size or shrink fit element does not change the height and width of the model. Reposition its position to one of the upper container's edges, or offset a certain position relative to the edge.

1. Indent: The element is first stretched to each edge of the container and then displaced relative to the container's sides. A positive margin produces an indent effect, and a negative margin produces an outer convex effect.

2. Static offset: Static inline element: Set Margin-lleft/right to offset the element left and right

Static block-level elements: Set margin to offset the elements left and right

3, static table offset and indentation: Use the left and right margin can be set size or shrinkage adaptive table offset, if set margin-left value, you need to set the Margin-right to auto, and vice versa;

The stretched table width is set to a percentage less than%100, and the left and right margins of the sheet are automatically set to auto;

4. Floating offset: Use margins to offset floating elements, and margins to offset floating elements without changing the size. Float:left/right Margin:+/-value

5. Absolute offset vs. fixed offset absolute/fixed: Use Margin-left/top to deflect elements from the regular flow

6. Relative offset: The relative element refers to a floating or static element that has a position:relative set. Use top and left to deflect an element from its current position. Unlike the outer margin of an element, the relative offset does not affect the position of other elements. Elements can overlap, z-index.

7. Static inline alignment: horizontal alignment Text-align:left/right/center/justify

Set the line-height to be larger than the content is overvalued, you can set the vertical alignment Vertical-align:constant/value

8. Static block-level alignment and offset: Margin-right:auto margin-left:value to align elements left or offset

Margin-left:auto Margin-right:auto elements are aligned in the parent element

Margin-left:auto Margin-right:value to align elements to the right or offset

9. Static table alignment and offset settings are the same as static block-level elements.

10. Absolute alignment and Offset:

Offsets the element relative to the left:

left:0 Right:auto to align elements to the left

Margin-left:+value offset relative left to right; Margin:-value relative left-to-left offset

11. The absolute positioning element is horizontally centered relative to the nearest positioned ancestor element:

Width:+value specified width; left:0 right:0 margin-left:auto Margin-right:auto

Four, positioning method