Layout templates are external representations.
CSS contains 3 basic layout models, summarized in English: Flow, Layer and Float.
In a web page, there are three layout models for elements:
1. Flow model (Flow)
2. Float model (Float)
3. Layer model (Layer)
2. Flow model
Flow model, flow (Flow) is the default page layout mode. That is to say, the HTML page elements of the web page in the default state all distribute the web page content according to the flow model.
The flow layout model has two typical characteristics:
The first point is that block elements are distributed vertically in order from top to bottom in the containing element, because by default, the width of block elements is 100%. In fact, block elements take their place in rows. For example, the width of the three block element tags (div, h1, p) in the code editor on the right is displayed as 100%.
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:3px solid red;
}
</style>
</head>
<body>
<div id="box2">box2</div><!--block element, since no width is set, the default width is displayed as 100%-->
<h1>Title</h1><!--Block element, since no width is set, the width defaults to 100%-->
<p>Text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment text segment </p><!--Block elements, since the width is not set, the width defaults to 100%-->
<div id="box1">box1</div><!--block element, since width: 300px is set, the width is displayed as 300px-->
</body>
The width is not set, so the display is 100%
set width
The second point is that under the flow model, inline elements are displayed horizontally from left to right within the containing element. (Inline elements are not as domineering and exclusive as block elements)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inline elements in flow mode</title>
<style type="text/css">
</style>
</head>
<body>
<a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
<strong>emphasis</strong>
</body>
</html>
3. Floating Model
Let two block elements be displayed side by side, any element cannot be floated by default, but can be defined as floating with CSS, such as div, p, table, img and other elements can be defined as floating.
div{
width:200px;
height:200px;
border:2px red solid;
float:left;/*Key displayed side by side*/
}
<div id="div1"></div>
<div id="div2"></div>
