HTML的三种页面布局方式

1.流动布局

流动布局是浏览器默认的布局方式。他会按照你所写的标签特性，从上至下、从左到右的方式进行排列
在HTML中我们按照标签的排列特性可以将它们分成三类：
1.行级元素：不独占一行，不能设置元素的高度、宽度和底边边距，它的宽度和高度是由他的内容撑起来的。
2.行内块元素：不独占一行，可以设置元素的宽度、高度和底边边距。
3.块级元素：独占一行，元素的宽度、高度、上下边的边距都可以设置。
常用的行级元素有：<span> <a>
常用的行内块元素：<img><input> <textarea>
常用的块级元素：<div> <h1> <p> <table> <tr><td><form> <ul> <ol> <li> <dl> <dt> <dd>
例如：

样式设置div{border: 1px solid black;width:200px;height:200px;}.img1{width: 150px;height: 150px;}.img2{width: 200px;height: 200px;}span{width: 100px;height: 100px;}
标签设置<div>这是一个块级元素</div><img src="2.jpg" class="img1"><img src="2.jpg" class="img2"><span>这是一个行级元素</span>

通过代码的演示，属于块级元素的<div> 标签可以独占一行，它后面的元素会换行到下面去，而且宽高可以自由设置；属于行级块元素的<img>标签不能独占一行，所以两张图片并列在一起，当时它可以自由设置宽高，所以两张图片大小不同；而属于行内元素的<span> 标签会与前面的行内块元素在一行排列，即使我们给他设置了固定的宽高，它的大小依旧取决于其中的内容。

在流动布局中，有一些标签由于其元素属性的影响，不能摆放到我们想要的位置，会给我们的布局带来很大的困扰。

2.浮动布局

在默认情况下，块级元素会独占一行，但是当我们想让两个块级元素在同一行排列时，我们就可以用到浮动布局

样式设置#div{width:300px;height: 300px;border: 1px solid black;}.div1{background-color: red;width:100px;height:100px;}.div2{background-color: green;width:100px;height:100px;}
标签设置<div id="div"><div class="div1"></div><div class="div2"></div></div>

当我们不设置浮动时，两个<div> 标签各自独占一行，会上下排列在一起。

而当我们给两个标签设置左浮动后，他们会按照代码从上到下的运行顺序在首行从左边一次排列开来。
当然浮动模型不止能向左边浮动，还能向右边浮动：float:right;

3.层模型

设置层模型属性会将标签从原来的文本流中上升到浮动层中来，然后调整他在浮动层中的位置，文本层中的标签会覆盖在下面文本层中的标签上面。

相对定位

如果我们要给元素设置相对定位属性，就要在样式中设置

position: relative;

我们可以利用

left: 0px;
right: 0px;
top: 0px;
bottom: 0px;`

来调整它相对于没有设置定位属性之前位置的相对偏移

绝对定位

在标签样式中设置绝对定位属性，它会上升到原本文本层上方的浮动层中。以最接近的一个具有相对定位属性的父元素，没有就以整个页面的主体标签，也就是<body> 标签的左顶点为原点，进行位置偏移。

 position: absolute;

同样我们可以利用left、right、top、bottom的值来调整他的位置，将他挪到我们想要的位置上。

固定定位

当我们要给标签设置固定定位属性时，要在其样式中设置

position: fixed;

同样我们可以利用left、right、top、bottom的值来调整他的位置，但是这个位置是相对与整个的网页窗口。但因为网页窗口本身是固定的，它不会随着窗口的滚动条的滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受其他元素的影响。

总结

对于页面的布局，我们要是熟练的掌握上述是三种页面布局方式，当有很多相同元素需要修改位置时我们可以利用浮动让他们自动排列——例如：利用列表制作横向导航条时，列表和列表项都属于块级元素独占一行，我们利用浮动就可以让他自觉在一行排列，这样就很方便。再例如我们想调整子级<div> 标签在父级<div> 中的位置时，就可以使用相对定位或者子绝父相（子级<div> 绝对定位，父级<div> 相对定位）布局把他挪到我们想要的位置上去。