HTML+CSS Easy to Get Started with Block Elements of Fluid Model
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>流動(dòng)模式下的塊狀元素</title>
<style type="text/css">
#box1{
width:300px;
height:100px;
}
div,h1,p{
border:1px solid red;
}
</style>
</head>
<body>
<div id="box2">中國(guó)</div><!--塊狀元素，由于沒(méi)有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<h1>PHP 中文網(wǎng)</h1><!--塊狀元素，由于沒(méi)有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<p>測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼</p>
<!--塊狀元素，由于沒(méi)有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<div id="box1">強(qiáng)軍</div><!--塊狀元素，由于設(shè)置了width:300px，寬度顯示為300px-->
</body>
</html>The width of the three block element labels (div, h1, p) in the above code is displayed as 100%
