CSS core content: standard flow, box model, floating, positioning

table of Contents

1. Standard Stream

Block element

Elements in the line

Difference with HTML elements

Second, the box model

Three, float (Float)

Fourth, positioning (Position)

1. Standard Stream

Standard flow refers to the element layout process layout elements will default automatically from left to right, top-down flow arrangement . 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.

Block element

Occupy a row and cannot be side by side with any other elements
Can set width and height

Elements in the line

Juxtaposed with other elements,
Cannot refer to width and height, the default width is the width of the text

Difference with HTML elements

There are particularly many restrictions in the standard stream. The standard stream can’t make a web page: the width and height can’t be changed because they can be side by side. Therefore, we must depart from the standard stream.

There are three methods in css to make an element out of the standard document flow, namely floating and absolute positioning, and fixed positioning.

Second, the box model

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

A picture to explain:

Margin -Clear the area outside the border, the margin is transparent.
Border-A border around the inner margin and outside the content.
Padding -Clear the area around the content, the padding is transparent.
Content-the content of the box, displaying text and images

Three, float (Float)

The Float of CSS will move the element to the left or right, and the surrounding elements will also be rearranged

img{
    float:right;  //左浮动
    float:left;  //右浮动
    clear:boty;  //清除浮动
}

Fourth, positioning (Position)

The position attribute specifies the positioning type of the element.

Five values of the position property:

static: The default value, that is, there is no positioning and follow the normal standard stream object
relative: relative positioning, relative to an element
fixed: The position of the element is fixed relative to the browser window.
absolute: The position of the absolutely positioned element is relative to the nearest positioned parent element. If the element does not have a positioned parent element, then its position is relative to <html>:
sticky: Positioning based on the user's scroll position. Sticky positioning elements are dependent on the user's scrolling, switching between position: relative and position: fixed positioning.

So far, the core content of div+css is finished. If this blog is helpful to you, please remember to leave a message + like it.