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> ```