Let’s talk about the flow model first. Flow is the default web page layout mode. That is to say, the HTML web elements of the web page in the default state distribute the web page content according to the flow model.
The fluid layout model has two typical characteristics:
First, the block elements will be vertically extended and distributed in order from top to bottom within the containing element, because in By default, the width of block elements is 100%. In fact, block elements all occupy positions in the form of rows.
Below we write an example of a block element under the flow model. The code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:1px solid red;
}
</style>
</head>
<body>
<div id="box2">中国</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1>PHP 中文网</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p>测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码测试代码</p>
<!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1">强军</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>The width of the three block element labels (div, h1, p) in the above code is displayed as 100%
Next Section