CSS (three)

Div+css

First, Box model CSS

• Height
• Width
• padding inner margin
• margin outer margin
• Border

1.margin outer margin

margin-top:15px;

margin-right:50px;

margin-bottom:100px;

margin-left:150px;

Or: margin:10px 50px 100px 200px;

A value representing four edges

Two values represent up or down

Three values represent upper and lower left

Four values represent upper right bottom left (each value needs to be separated by a space)

2. Padding inner margin

padding-top:10px;

padding-right:50px;

padding-bottom:100px;

padding-left:200px;

Or: padding:10px 50px 100px 200px;

A value representing four edges

Two values represent up or down

Three values represent upper and lower left

Four values represent upper right bottom left (each value must be separated by a space)

3. Universal Selector

* All the elements are selected

*{margin:0px;padding:0px}

The most common attribute effect: is to remove the small gap between the div and the browser.

4.div or Table center display

margin:0px Auto;

5. Center Font

You need to center text vertically with text-align and line-height mates

Text-align:center; Level

line-height:50px; (vertical) Note: height= sets the height of two lines: half set

Second, participate in the layout of the common properties

1.position positioning

A) absolute absolute positioning

Absolute absolute positioning if only using position:absolute does not make any sense except that the absolute positioning of the out-of-document flow is relative to the browser's 0, 0 point positioning needs to be configured using the left top right bottom these directional properties

If you have a parent element, it is positioned according to the upper-left corner of the parent element

b) Relative relative positioning

is positioned relative to the current position

c) Fixed positioning requires the use of the top left mate

d) Static default value

2. Z-index Set Display level

Auto automatically

Number numbers

The larger the number, the more it will appear on top.

3. Display properties also have block-level and inline-level element interchange capabilities

None hidden, document does not hold position not placeholder hidden

Block-level conversion

Inline transitions to inline level

Inline-block conversion to block level

4. Visibility is visible

Visible visibility

Hidden hidden placeholder Hidden

5. Overflow beyond partial processing

Visible is always viewable (default value)

Hidden out-of-section hidden processing

Scroll scroll bar declaration with scroll bar

Auto automatically if there is no scroll bar above

　　

　　　　

Reference: https://www.w3cschool.cn/css/

CSS (three)