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