HTML+CSS 流體モデルのブロック要素で簡(jiǎn)単に始められる
まずフローモデルについて説明しましょう。フローはデフォルトの Web ページレイアウトモードです。つまり、デフォルト狀態(tài)の Web ページの HTML Web 要素は、フロー モデルに従って Web コンテンツを配信します。
流體レイアウト モデルには 2 つの典型的な特性があります:
まず、デフォルト狀態(tài)ではブロック要素の幅がすべて 100% であるため、ブロック要素は含まれる要素內(nèi)で上から下に順?lè)舜怪堡藪垙垽丹欷品稚ⅳ丹欷蓼埂g際、ブロック要素は行の形式でその位置を占めます。
フローモデルの下にブロック要素の例を書いてみましょう。コードは次のとおりです。
<!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>上記のコードでは、3つのブロック要素タグ(div,h1,p)の幅が100%で表示されています
