HTML+CSS 輕松入門之流動模型之塊狀元素
先來說一說流動模型，流動（Flow）是默認的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的。
流動布局模型具有2個比較典型的特征：
第一點，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據(jù)位置。
下面我們寫一個流動模型下的塊狀元素實例，代碼如下：
<!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><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認顯示為100%-->
<h1>PHP 中文網(wǎng)</h1><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認顯示為100%-->
<p>測試代碼測試代碼測試代碼測試代碼測試代碼測試代碼測試代碼測試代碼測試代碼</p>
<!--塊狀元素，由于沒有設(shè)置寬度，寬度默認顯示為100%-->
<div id="box1">強軍</div><!--塊狀元素，由于設(shè)置了width:300px，寬度顯示為300px-->
</body>
</html>如上代碼中三個塊狀元素標簽(div，h1，p)寬度顯示為100%
