HTML+CSS 流體モデルのブロック要素で簡単に始められる
まずフローモデルについて説明しましょう。フローはデフォルトの Web ページレイアウトモードです。つまり、デフォルト狀態(tài)の Web ページの HTML Web 要素は、フロー モデルに従って Web コンテンツを配信します。
流體レイアウト モデルには 2 つの典型的な特性があります:
まず、デフォルト狀態(tài)ではブロック要素の幅がすべて 100% であるため、ブロック要素は含まれる要素內(nèi)で上から下に順番に垂直に拡張されて分散されます。実際、ブロック要素は行の形式でその位置を占めます。
フローモデルの下にブロック要素の例を書いてみましょう。コードは次のとおりです。
<!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">中國</div><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<h1>PHP 中文網(wǎng)</h1><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<p>測試代碼測試代碼測試代碼測試代碼測試代碼測試代碼測試代碼測試代碼測試代碼</p>
<!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<div id="box1">強(qiáng)軍</div><!--塊狀元素，由于設(shè)置了width:300px，寬度顯示為300px-->
</body>
</html>上記のコードでは、3つのブロック要素タグ(div,h1,p)の幅が100%で表示されています
