HTML5 CSS布局模型

在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

流动模型

流动（Flow）是默认的网页布局模式。流动布局模型具有2个比较典型的特征：
1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素那样占一行），如a、span、em、strong等标签

示例：

<!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;
}
#box2{
    width:100px;
    height:100px;
}
</style>
</head>
<body>
    <div id="box2">box2</div>
    <h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    
    <div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>

效果：

浮动模型

元素默认情况下是从上往下排列，如果想要并排显示，那么可以设置浮动
如：

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}

两个div就会在左侧并排显示：

同理可以设置右侧，可以设置一个左一个右

层模型

层模型：类似PS中的图层，可以对每层进行单独处理，由于浏览器大小的活动性，限制了层模型的运用，不过在某些方面，还是很方便的

层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

层模型--绝对定位
绝对定位，需要设置position:absolute，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
代码示例：

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}

效果：

层模型--相对定位
既相对于之前位置的便宜量，需要设置position:relative，然后通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
代码示例：

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

效果：

注意：
假如上面div后面有跟一个< span>的文字标签，那么在设置偏移后，仅仅是< div>标签进行了移动，文字还是在原来未发生偏移的位置，就把这个偏移看作是障眼法，假的偏移，实际位置还是在原来的位置，这样理解会简单点

层模型--固定定位
固定定位与绝对定位差不多，绝对定位是居于父包含块，如果不存在父包含块就居于浏览器，固定定位是直接居于浏览器
假如这么设定：

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

这样的效果是无论放大缩小浏览器，都会在浏览器的右下角

HTML5 CSS布局模型

流动模型

浮动模型

层模型

推荐阅读更多精彩内容