Floating positioning, display, cursor, positioning of CSS Basics

1, floating positioning
1, positioning
To put it simply, positioning is the default location for changing elements on the page.
2, positioning of the classification
According to the results of positioning, you can be divided into the following categories:
1, the normal flow positioning (default method)
2, floating positioning
3. Relative positioning
4, absolute positioning
5, fixed positioning
3, positioning mode-general flow positioning
Normal flow positioning, also known as "document flow positioning", all elements of the page default positioning method
All elements appear by default at the top left of their parent element.


All block-level elements in the page, arranged from top to bottom, with one row for each element


All the inline elements in the page, arranged from left to right,
Multiple elements are displayed in one line and cannot be wrapped automatically.


Problem: multiple block-level elements want to be displayed on one line ... < core >-floating positioning
4, positioning mode-floating positioning
1, floating positioning of the overview & characteristics
If you set the element's positioning to floating positioning, the element will have the following characteristics
1, the elements will be excluded from the document flow outside the document flow, all out of the document flow does not occupy the page space (but can be displayed on the page).
The other remaining elements are to be filled up.
2. Floating elements are docked to the left or right of the parent element, or to the edges of other floating elements
3, floating only in the current line floating
4, floating element is still in the parent element containing box
5. Floating element Handling-enables multiple block-level elements to be displayed on one line
2. Grammar
Properties: Float
Take value:
1, none
Default value, that is, no floating effect
2, left
Floating left, docked to the left of the parent element, or floating elements that are already on the left side
3, right
Floating right, docked on the right side of the parent element, or floating element that is easy to use next to the right
3. Special effects caused by floating
1, when the width of the parent element does not appear all the floating child elements,
Then the last one will be wrapped, but, there may be cards
2, once the element is floating, the width will become adaptive (from the content to determine the width)
3, once the element floating up, then will become block-level elements, especially in the inline elements of the greatest impact
Block level elements: can modify the size
Inline elements: Cannot modify dimensions
4, text, inline elements, inline block elements are arranged in a wrapping manner, is not under the pressure of floating elements,

And will cleverly avoid floating elements.

Floating Right Effect:

Floating effect to the left:

4, clear floating
The element will have a position effect on subsequent elements when it floats. If the subsequent elements do not want to be affected by any effect,
can be resolved by clearing the floating way. When the float is cleared, the element does not come forward.
Properties: Clear
Take value:
1, none
Default value, do not do any cleanup action
2, left
Clears the effect of the left float of an element before the current element
3, right
Clears the impact of the right float of the previous element
4, both

Clears the effect of the left or right float of the current element's previous element 5, impact of floating elements on the height of the parent element
Because the floating element is detached from the document flow, it causes the element to not occupy the control of the parent element.
can have a certain effect on the height of the parent element. The height of the parent element is the height with no floating child element
As a subject. (If all are floating child elements, then the height of the parent element is 0)
Solution:
1, directly set the height of the parent element
Disadvantage: You must know how high the parent element is
2, set the parent element also floating
Disadvantage: Not at any time the parent elements need to float, the element float will affect the position of the subsequent elements
3. Set the overflow property for the parent element
Value is: Hidden or auto
Disadvantage: If there is something in the content to overflow display (such as pop-up box)
Then it will be hidden together
4, in the parent element, append the block-level empty element (must be block level) and set its clear property to both
5 、... ...
2, display
1, display mode
How the display determines the default positioning of elements in the page
Properties: Display
Take value:
1, none
Let the generated elements not appear and detach from the document stream
2, Block
Make the elements behave like block-level elements
3, inline
Let the elements behave like inline elements
4, Inline-block
Let the elements behave as if they were inline blocks
Multiple inline blocks are displayed in one line and allowed to modify dimensions
(except Radio,checkbox)
2, display effect
1, Visibility
Role: Visibility
Properties: Visibility
Take value:
1, visible
Default value, Visible
2, Hidden
Hidden, still occupy the page space
3, collapse
When used in a table, deleting a row or column does not affect the overall layout of the table


The difference between Visibility:hidden and Display:none
Display:none from the document stream, so it does not occupy the page space
Visibility:hidden not out of the document stream, so it occupies the page space and does not display the content.
2, opacity
Role: Specify transparency of elements
Properties: Opacity
Value: 0 (fully transparent)-1 (completely opaque) between the numbers
3, Vertical-align
Function: vertically centered, not all elements can be used to control the text or inline elements on either side of the current element
Vertical alignment relative to the current element
Note: Used in TD or inline block elements or img
Take value:
1, top: aligned
2, Middle: Middle Alignment
3. Bottom: Bottom Alignment
4, Baseline: baseline alignment
Baseline alignment:
1, the line of the block elements of the baseline
The baseline is at the bottom of the last line of text
2, image

The baseline is at the bottom of the image and down 3px.

Top alignment, center alignment, bottom alignment, Baseline alignment diagram: 3, cursor
Function: Change the display state of the mouse
Properties: Cursor
Take value:
1, default
Default
2, pointer
Small hand state, as the a mark moves
3, Crosshair
+
4, text
I
5. Wait
Wait
6. Help
Help
3, List
1. List item identification
Properties: List-style-type
Take value:
1, none
No mark
2, Disc
3, Square
4, Circle
... ...
2. List item image
Properties: List-style-image
Fetch value: URL ();
3. List item Location
Default location: Identifies the default list item content area
Properties: List-style-position
Take value:
1, outside
Default value
2, Inside
Place the identity within the list item area
4, List properties
Properties: List-style
Value: type URL () position;


Common way: List-style:none;
4, positioning
1, positioning properties
1, positioning mode
Properties: Position
Take value:
1, Static: Statically positioned, the default positioning
2, relative: relative positioning
3, Absolute: absolute positioning
4. Fixed: Stationary positioning
Note: Set the position to
Relative/absolute/fixed any kind of positioning method, then the element is called "anchored element"
2, offset properties
Property:
1. Top: Move elements up and down as datum points
2, bottom: to the bottom of the element as a datum point, move elements up and down
3, left: As the base point of the element's left-hand side, move elements around
4, right: to the element on the right-hand side as a datum point, moving elements around
3. Stacking order
Effects: Stacking effect, showing adjust stacking order
Properties: Z-index
Value: No number of units
2. Relative positioning
1, what is the relative positioning
The element offsets a distance from its original position
To fine-tune the position of an element
2. Grammar
Properties & Values:
Position:relative
Fine tuning of position with offset attributes

Top/bottom/left/right

Offset attribute diagram:

  3, absolute positioning
    1, what is absolute positioning
      1, absolutely positioned elements will be out of document flow, not occupy page space
    &N Bsp 2, the initialization of the position is implemented relative to its nearest positioned ancestor element
      3, if the current element does not have a positioned ancestor element,
      Then it will be implemented relative to the original include box initialization, such as body or HTML
      4, absolutely positioned elements will become block-level elements
    2, Syntax
      Property & value:         Position:absolute
      with the offset property to achieve the positioning of the element (position move)
    3, using Occasions
      1, pop-up menus are all using absolute positioning mode
  4, stacking order
    1, what is stacking order
      Production The order of the elements between the raw stacking effects
    2, Syntax
      properties: Z-index
      value: No value for units
&NB Sp   3, attention to issues
      1, must be positioned elements to use Z-index
      2, the default order is the successor on the
    & nbsp 3, the parent-child relationship can not be used to adjust the stacking order between the Z-index, is always the son of the pressure on the father