HTML+CSS Mudah Dimulakan dengan Elemen Blok Model Bendalir
Mari kita bincangkan tentang model aliran dahulu ialah mod reka letak halaman web lalai. Maksudnya, elemen web HTML halaman web dalam keadaan lalai mengedarkan kandungan halaman web mengikut model aliran.
Model susun atur bendalir mempunyai dua ciri tipikal:
Pertama, elemen blok akan dilanjutkan secara menegak dan diedarkan mengikut urutan dari atas ke bawah dalam elemen yang mengandungi, kerana dalam Secara lalai, lebar elemen blok adalah 100%. Malah, elemen blok akan menduduki kedudukannya dalam bentuk baris.
Di bawah kita tulis contoh elemen blok di bawah model aliran Kodnya adalah seperti berikut:
<!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><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<h1>PHP 中文網(wǎng)</h1><!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<p>測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼測(cè)試代碼</p>
<!--塊狀元素，由于沒有設(shè)置寬度，寬度默認(rèn)顯示為100%-->
<div id="box1">強(qiáng)軍</div><!--塊狀元素，由于設(shè)置了width:300px，寬度顯示為300px-->
</body>
</html>Dalam kod di atas, lebar tiga label elemen blok (div, h1. , p) dipaparkan sebagai 100%
