margin的auto的理解 top,left[,bottom,right] position

auto

auto 总是试图充满父元素

margin有四个值：

All the margin properties can have the following values:

auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of
inherit - specifies that the margin should be inherited from the parent element

absolute: 会脱离标准文档流，但若不指定top,right,bottom,left 则还在原位置上

margin-left,margin-top是影响自身

margin-right,margin-bottom是影响它后面的元素

top left

top

MDN top

The top CSS property specifies part of the position of positioned elements. It has no effect(只对于定位了的元素有效，包括相对定位，绝对定位) on non-positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

For relatively positioned elements(相对定位的元素：top是相对于自身) (those with position: relative), it specifies the amount the element is moved below its normal position.

When both top and bottom are specified, as long as height is unspecified, auto or 100%(高度值未声明，auto或是100%), both top and bottom distances will be respected. Otherwise, if height is constrained(如果top和bottom同时声明，并且height被限制，则bottom就会无效) in any way, the top property takes precedence and the bottom property is ignored.

/* <length> values */
top: 3px;
top: 2.4em;

/* <percentages> of the height of the containing block(containing block的高度的百分) */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: unset;

left

mdn left

The left CSS property specifies part of the position of positioned elements(适用于被定位了的元素). For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the left margin edge of the element and the left edge of its containing block.

/* <length> values */
left: 3px;
left: 2.4em;

/* <percentage>s of the width of the containing block(containing block的百分比) */
left: 10%;

/* Keyword values */
left: auto;

/* Global values */
left: inherit;
left: initial;
left: unset;

right:

The right property has no effect on non-positioned elements.

When both the right CSS property and the left CSS property are defined, the position of the element is overspecified(同时对元素采用left和right属性时，对于从左向右的dom，left优先级更高). In that case, the left value has precedence when the container is left-to-right (that is that the right computed value is set to -left), and the right value has precedence when the container is right-to-left (that is that the left computed value is set to -right).

position

mdn position

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

A positioned element is an element whose computed position property is either relative, absolute, fixed or sticky.

• A relatively positioned element is an element whose computed position property is relative.
• An absolutely positioned element is an element whose computed position property is absolute or fixed.
• A stickily positioned element is an element whose computed position property is sticky.