HTML+CSS 輕松入門(mén)之流動(dòng)模型之塊狀元素
先來(lái)說(shuō)一說(shuō)流動(dòng)模型，流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁(yè)布局模式。也就是說(shuō)網(wǎng)頁(yè)在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁(yè)元素都是根據(jù)流動(dòng)模型來(lái)分布網(wǎng)頁(yè)內(nèi)容的。
流動(dòng)布局模型具有2個(gè)比較典型的特征：
第一點(diǎn)，塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會(huì)以行的形式占據(jù)位置。
下面我們寫(xiě)一個(gè)流動(dòng)模型下的塊狀元素實(shí)例，代碼如下：
<!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>如上代碼中三個(gè)塊狀元素標(biāo)簽(div，h1，p)寬度顯示為100%
