What is the positioning system: the provisions of the visual formatting model, the positioning system is divided into:
1. Regular flow
2. Floating
3. Absolute positioning
Any element must belong to one of the positioning systems, and elements of different positioning systems are in the containing block. There will be some differences in size and position:
the value of position is obsolute or fixed, which belongs to absolute positioning, and the
value of float is left or right, which belongs to floating.
If none of the above two belong to the normal flow,
note: the default value of position is: static
float default value: non
Regular flow
link inline elements, each element will be displayed next to each other until it is filled with free space
block elements, each element will be filled with free space
Box model only margin can take a negative value, auto calculates
regular flow according to the rules of your different positioning systems Also called normal flow. Document flow, document flow, normal document flow, regular document flow
1. width: auto, no matter what the left and right margins are, the content will automatically occupy the available space
2. width: auto, margin-left: 10px; the right margin is automatic , the interior will automatically fill the available space on the right
3. width: auto, margin-right: 10px; if the left margin is automatic, the interior will automatically fill the available space on the left
4. width: 10px, the left and right margins are: atuo, it will be centered horizontally
5. width: 10px, margins on both sides: 10px, when the width of the element is smaller than the width of the containing block, the margin on the right will automatically become auto and occupy the available area on the right. The
vertical
margin is auto: 0px
height is auto: adapts to the height of the content. The
box
is placed in the vertical direction of the containing block. The box is
placed from top to bottom according to the writing order of HTML elements.
The size occupied in the containing block is the size of the entire box in the
vertical direction. , if the two sides are adjacent, the combination
is positive, the maximum value
is positive and the negative value is added
, and the minimum value is taken.
Margin adjacent conditions: no padding border content.
Floating
When the value of the element's float property is left or right, the element belongs to floating positioning and cannot be inherited. The default value
of auto in the box
is none, and the value is none left right
Regular flow Floating
margin-left auto Fill the containing block as much as possible 0
margin-left auto Fill the containing block as much as possible 0
margin-left auto 0 0
margin-left auto 0 0
width auto Fill the containing block as much as possible Adapt to the content height
weight auto Adapt to the content height to adapt to the content Height
Box Position
Left-floated boxes are arranged up and left.
Right-floated boxes are arranged up and right.
The top edge of the floating box must not be higher than the top edge of the previous box.
If the remaining space cannot fit the floating box, the box will move down
Until there is enough space for the box, then move the
regular flow box to the left or right to mix the
floating box. When placing the floating box, avoid the regular flow box.
When the box is floating, it will cause the document flow out of the flow .When
the regular flow box is placed, it ignores the floating box---the height collapses. (Indicates that the content of the floating element does not occupy the height)
The actual height of the parent element: regular flow box
overflow: hidden
1. When the content overflows, a hides b exceeds Some scroll bars appear.
2. When the child element floats, the height will be retrieved and written on the parent of the floating element.
Clearing the float Clearing the float
for an element can make the element appear below the floating element when it is placed.
Clear : The default value is none
, and the value is left to clear the left float, right appears below the left floating element box,
clears the right float, and both appears below the right floating element box,
clears the left and right float, and appears below the bottom edge
div:after{ clear:both } Clear the float of the last child element of the div to prevent the parent element from collapsing at high speed.
The absolute positioning (absulote postioned)
attribute postion cannot be inherited. The default value is static
static static position, the position of the box under the original positioning system
relative relative position
absolute absolute position
fixed fixed
positioning
Absolute position movement:
1. It will leave the document flow
2. It will find a containing block whose position is not equal to static. If it is not found, it will take the initial position of the page as the base point.
If an element is fixedly positioned, it will be separated from the document flow, Positioned in the viewport (initializing the containing block), moving with the viewport.
When a floated element is set to absolute positioning, the float property is forced to None.
Absolutely positioned elements will not have any effect on other elements