Types of Mainstream Layouts:
1. Static layout
2. Responsive Layout
3. Flexible layout
Common layouts of PC stations:
1. One-column layout (static layout): One-column adaptive centering
2. Two-column layout: one column fixed width + one column adaptive
3. Three-column layout (double-flying wing layout): adaptive width of the middle column + fixed width of the left and right columns
One column layout:
1. Two points:
*The page content area has a fixed width
* The page content area is adaptively centered in the browser window
2. Implementation method:
page content area box{width: custom width; margin: 0 auto; }
Two column layout:
1. Implementation method:
fixed column container { width: fixed value; float: left/right; }
adaptive column container {margin-orientation: value = fixed column width;}
Three column layout:
Features: Three-column layout: adaptive width in the middle, fixed width on both sides.
The theme content is placed in the middle column, and the rendering is preferentially displayed in the browser
principle:
When the child element is in a floating state, when a negative margin >= the width of the child element is set, the child element will be stacked on the sibling element