Standard document flow

Standard document flow description

Document flow refers to the flow arrangement of elements from left to right and top to bottom in the process of element layout. And finally the form is divided into rows from top to bottom, and the elements are arranged in order from left to right in each row.

Standard document flow phenomenon

Blank folding phenomenon.
The height is uneven and the bottom edge is aligned.
Automatically wrap, if one line is not complete, write in a new line.

Standard document flow level

Block-level elements: all container-level tags and P tags (text-level tags)

display:block;

1. Occupy a row alone
2. Can set the width and height, if the width is not set, the default will become 100% of the father.

Inline elements: all text-level tags except P.

display:inline;

1. Side by side with other in-line elements
2. Cannot set width and height, the default is the width of the text

Inline block element

display:inline-block;

1. Can be side by side with other in-line elements.
2. Can set the width and height of the element.

Standard document flow off the mark

Float: float: left / right;

/* 清除浮动 */
 .clearfix{
    
    
  	overflow:hidden;_zoom:1;
}

Absolute positioning: position: absolute;
the child must parent phase

css selector

Note: Using uncommon selectors will affect the readability of the code.

Base selector

Tag selector: div
ID selector: #id
Class selector: .class
Wildcard selector: *

Compound selector

Descendant selector: div p
Child selector: div>p
Brother selector: h2+p
Intersection selector: div.div1
Union selector: .div1, .div2

Other commonly used selectors

Attribute selector

.div [attr]
.div[attr=‘value’]

Pseudo-class selector

State pseudo-class selector: a:hover, etc.
Structural pseudo-class selector: div:first-child, etc.

Pseudo element selector

Text: p::first-letter
Inline elements: E::before and E::after

Layout related

Box Thinking [Key]

step1. Determine the box position

A: Positioning
B: Floating
C: inner box: top, left, right, bottom
C: Adjacent box: margin method

step2. Determine the box model

User interface attributes: box-sizing, etc.
Size attributes: width, height, etc.
Inner margin properties: padding series
Border attributes: border, outline, etc.
Margin attributes: margin series

step3. Determine the appearance of the box

Background attributes: background series
Font attributes: font series
Text attributes: color, line-height, text-align, etc.

Centered

Box centered

Horizontal centering: margin:0 auto / left after absolute positioning: 50%;
Vertical centering: top after absolute positioning: 50%;

Text centered

Internal element text: text-align:center;
Current element text: line-height=height; (set line height)

7788

Clear the default style

*{
    
    margin:0;padding:0}
ul{
    
    list-style:none}

css essentials