(060)css_流动布局模型 

流动模型（一）
先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>layout_flow.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css">
        #box1 {
            width: 300px;
            height: 100px;
        }
        div,h1,p {border:1px solid red;}
    </style>
  </head>
  
  <body>
        <div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
        <h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
        <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
        <div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
  </body>
</html>

 

posted @ 2015-01-27 11:39  雪中飞雁  阅读(431)  评论(0)    收藏  举报