HTML布局
使用div的布局
流动布局
浮动布局
<div class="bankuai2"> <div class="kongbai1"></div> <div class="lunbotu"></div> <div class="guanggao"> <div class="guanggao1"></div> <div class="guanggao2"></div> <div class="guanggao3"> </div> <div class="guanggao4"></div> </div> <div class="kongbai2"></div> </div>
css：
.bankuai2{
width: 100%;
height: 500px;
}
.kongbai1{
float: left;
width: 20%;
height: 500px;
background-color: aquamarine;
}
.kongbai2{
float: left;
width: 20%;
height: 500px;
background-color: aquamarine;
}
.lunbotu{
float: left;
width: 40%;
height: 500px;
background-color: bisque;
}
.guanggao{
float: left;
width: 20%;
height: 500px;
}
.guanggao1{
float: left;
width: 50%;
height: 250px;
background-color: #CCCCCC;
}
}
.guanggao2{
float: left;
width: 50%;
height: 250px;
background-color: blueviolet;
}
.guanggao3{
float: left;
width: 50%;
height: 250px;
background-color: crimson;
}
.guanggao4{
float: left;
width: 50%;
height: 250px;
background-color: coral;
}
结果：
层模型
特点：如果我想一个div在另外一个div的上面，我们就需要可以使用绝对定位来完成，层模型的三种定位方式relative、absolute、fixed
absolute
需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，
然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。
如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
relative
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），
它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，
然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
fixed
fixed：表示固定定位，与absolute定位类型类似，
但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，
除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，
这与background-attachment:fixed;属性功能相同。
使用表格的HTML布局
<table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式
使用HTML5的布局
HTML5 语义元素
| header | 定义文档或节的页眉 |
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义独立的自包含文章 |
| aside | 定义内容之外的内容（比如侧栏） |
| footer | 定义文档或节的页脚 |
| details | 定义额外的细节 |
| summary | 定义 details 元素的标题 |
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
框架结构标签（<frameset>）
- 框架结构标签（<frameset>）定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
框架标签（Frame）
Frame 标签定义了放置在每个框架中的 HTML 文档。
例：
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
在这个例中，设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中