Learning the html (12) CSS layout model from scratch-on, css layout

Learning the html (12) CSS layout model from scratch-on, css layout
I. css layout model

After understanding the basic concepts and types of the CSS box model, we can thoroughly explore the basic model of web page layout.

Like the box model, the layout model is the most basic and core concept of CSS.

However, the layout model is based on the box model, which is different from the CSS layout style or CSS layout template that we often call.

If the layout model is local, the CSS layout template is the end and an external representation.

 
CSS contains three basic layout models: Flow, Layer, and Float.

On a webpage, there are three layout models for elements:
1. Flow Model)
2. Float Model)
3. Layer Model)

What are the three layout models?

Ii. Flow Model (I)

1 <! Doctype html> 2 Flow Model (I)
Let's talk about the Flow model first. Flow is the default webpage Layout mode.
That is to say, by default, the HTML web page elements of a webpage are distributed based on the flow model.
The flow layout model has two typical features:
First, block elements are vertically distributed from top to bottom in order within the contained elements, because by default, block elements are 100% in width.
In fact, block elements occupy positions in the form of rows. For example, the width of the three block element labels (div, h1, p) in the code editor is 100%.
Check the code in the code editor on the right and find out the features of block elements: "by default, block elements are 100% in width ".
3. Flow Model (2)
1 <! Doctype html> 2 Flow Model (2)
Second, in the flow model, inline elements are displayed horizontally from left to right in the contained element.
(An inline element is not as overbearing as a block element)
In the Code Editor, inline element labels a, span, em, and strong are all inline elements.
Check the code in the Code Editor and find out the features of inline elements in the flow model: "displays the horizontal distribution of elements from left to right ".
 
Flow Model:
1. The vertical display width of a block-level element is 100%
2. Horizontal distribution of inline elements from left to right
 
Iv. Floating Model
1 <! Doctype html> 2 Floating Model
A block element is an exclusive line. What if we want two block elements to be displayed side by side?
Don't worry, set the element floating to achieve this desire.
By default, no element can be floating, but can be defined as floating by CSS,
Elements such as div, p, table, and img can all be defined as floating. The following code displays two div elements in one row.
div{    width:200px;    height:200px;    border:2px red solid;    float:left;}<div id="div1"></div><div id="div2"></div>


Of course, you can also set two elements to float right at the same time or display one row.
div{    width:200px;    height:200px;    border:2px red solid;    float:right;}


Another friend asked, can one row be displayed when two elements are set to one left and one right? Of course:
div{    width:200px;    height:200px;    border:2px red solid;}#div1{float:left;}#div2{float:right;}


 
In the code editor on the right, try to display the two columns side by side and the two columns are left aligned.
Enter the following code in line 5 of the Code Editor:
Float: left;
The three columns are displayed side by side. You can use the previous {inline-block}