12-2流動模型（一） · 初識HTML+CSS

先來說一說**流動模型**，流動（Flow）是默認的網頁布局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的。流動布局模型具有2個比較典型的特征：第一點，**塊狀元素**都會在所處的**包含元素內**自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為**100%**。實際上，塊狀元素都會以行的形式占據位置。如右側代碼編輯器中三個塊狀元素標簽(div，h1，p)寬度顯示為100%。 ### 任務觀查一下右側代碼編輯器中的代碼，感受一下塊狀元素的特點：“在默認狀態下，塊狀元素的寬度都為100%”。這一小節沒有驗證正確性任務，單擊“提交”按鈕進行下一個小節學習。 ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; 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">box2</div> <h1>標題</h1> <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p> <div id="box1">box1</div> </body> </html> ```