HTML+CSS 輕鬆入門之流動模型之塊狀元素
先來說一說流動模型，流動（Flow）是預設的網頁佈局模式。也就是說網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的。
流動佈局模型具有2個比較典型的特徵：
第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式佔據位置。
下面我們寫一個流動模型下的塊狀元素實例，程式碼如下：
<!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>如上程式碼中三個區塊狀元素標籤(div，h1，p)寬度顯示為100%
