CSS Small full

Use of CSS
Inline (inline style attribute) should not do this at all
The <style> tag in the
Recommended way of outreach in <link> tags

Three main selectors
Element Selector
Class Selector
ID Selector

Style priority (high-to-low)
!important
inline style
Execute sequentially

Selector priority (high-to-low)
!important
inline style
ID Selector
Class Selector
Element Selector

Display Properties
None
Block
Inline
Inline-block

None does not show

Block occupies one row
The default block tag has
DIV P ul ol li H1 H2 H3 h4 h5 h6

Inline only accounts for content size

Inline-block is the inline layout block mode
Inline-block is externally represented as inline, so it can be placed on a line with other inline
The internal performance is block, so you can set its own width and height

Box model
Content
Padding
Border
Margin

The Position property is used for element positioning
Static default positioning
Relative relative positioning, relative to the position they should be in
Absolute absolutely positioning, acting a little strange
Fixed fix positioning, relative position is the entire window

Non-static elements can be set with the top left bottom right property
Non-static elements can use the Z-index property to set the display hierarchy
Relative is relative positioning
Absolute completely absolutely positioned, ignoring everything else.
Floating upward to a non-static element
Fixed window-based absolute positioning
Does not change with page scrolling

Overflow property
Visible default
Scroll bar when auto is needed
Hidden hiding extra elements
Scroll will force the scroll bar even if you don't need it.

Box model-related CSS

Border
Border-width
Border-style default is None, indicating that border is not displayed
Border-color
Abbreviated as follows, the order does not matter
border:10px Blue Solid;

Border-top
Border-top-width
Border-top-style
Border-top-color

Border-right
Border-right-width
Border-right-style
Border-right-color

Border-bottom
Border-bottom-width
Border-bottom-style
Border-bottom-color

Border-left
Border-left-width
Border-left-style
Border-left-color

Margin
Margin-top
Margin-right
Margin-bottom
Margin-left

Padding
Padding-top
Padding-right
Padding-bottom
Padding-left

Three abbreviations, corresponding to the interpretation of 4 2 3 values respectively
Padding
Margin:top Right Bottom Left
Margin: (top/bottom) (Right/left)
Margin:top (right/left) Bottom

Border-radius upper left corner is top, bottom right corner is bottom

Background related properties and abbreviations
Background-color: #233;
Background-image:url (bg.png);
Background-repeat:no-repeat;
background-attachment:fixed; /* Background picture moves with the scroll axis */
Abbreviated as follows
Background: #233 URL (bg.png) no-repeat;

Centered notation
Block element centered, two steps away
1, set your own width
2, set their own margin:0 auto;

Inline Inline-block element Centered
Set the Text-align property of the parent element
Text-align:center;

It is important that the float property
Use clear float to prop up the parent element
Suppose the parent element to be propped up is. gua-float
. gua-float::after {
Content: "";
Display:block;
Clear:both;
}

Pseudo class
: hover
Pseudo element
:: After
:: Before

"""

CSS Small full