（前端干货）网页的六种布局方式（固定布局，表格布局，浮动布局，流式布局，弹性布局，响应式布局）
思维导图
固定布局
介绍
固定布局也叫静态布局
特征
- 给页面元素设置固定的宽度，高度，单位一般采用px等绝对长度单位
- 一般设置了min-width，当窗口缩小时，会出现滚动条
- 针对不同分辨率的设备，分别写入不同的样式文件。
优点
- List item
- 固定宽度的布局更易于使用以及制定设计页面。
- 浏览器支持度高
缺点
- 用户体验不好，固定宽度的布局可能给屏幕分辨率大的用户造成过多空白空间。
- 较小的屏幕分辨率可能需要水平滚动条，这取决于固定布局的宽度。
- 在可用性方面，固定宽度布局总体效果不是很好。
- 不能根据用户的屏幕尺寸做出不同的表现。
应用
- 当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。
- 固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 清除浏览器默认样式 */
*{
margin: 0;
padding: 0;
}
.head{
width: 1000px;
height: 150px;
background-color: antiquewhite;
margin: 0 auto;
}
.content{
font-size: 0;
width: 1000px;
height: 400px;
background-color: aqua;
margin: 10px auto;
}
.content .left{
display: inline-block;
width: 200px;
height: 100%;
background-color: #F0F8FF;
}
.content .center{
display: inline-block;
width: 600px;
height: 100%;
background-color: #F0a8FF;
}
.content .right{
display: inline-block;
width: 200px;
height: 100%;
background-color: #F00fFF;
}
.footer{
width: 1000px;
height: 120px;
background-color: aliceblue;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 网页布局就是摆盒子 -->
<!-- 大盒套小盒，盒子模型，简单布局，div块，浮动 -->
<!-- 头部div -->
<div class="head">
</div>
<!-- 主要内容div -->
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<!-- 底部信息的div -->
<div class="footer">
</div>
</body>
</html>
浮动布局
介绍
也叫float布局
浮动的设计初衷是为了设计文字环绕效果
特征
- 脱离文档流
优点
- 浮动可以使元素block块状化（也就是行内元素浮动后可以设置宽高）；即display:inline-block;
- 可以使块元素同行排列
缺点
- 导致父元素高度塌陷
- 元素脱离文档流，布局困难
应用
- 现在pc端网页使用此布局较为频繁，和固定布局结合使用
示例代码
中间内容区使用浮动布局，实现三个div块同行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 清除浏览器默认样式 */
*{
margin: 0;
padding: 0;
}
.head{
height: 150px;
background-color: antiquewhite;
}
.content{
width: 1000px;
height: 400px;
background-color: aqua;
margin: 10px auto;
}
.content .left{
width: 200px;
height: 100%;
background-color: #F0F8FF;
float: left;
}
.content .center{
width: 600px;
height: 100%;
background-color: #F0a8FF;
float: left;
}
.content .right{
width: 200px;
height: 100%;
background-color: #F00fFF;
float: left;
}
.footer{
height: 120px;
background-color: aliceblue;
}
</style>
</head>
<body>
<div class="head">
</div>
<!-- 主要内容div -->
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<!-- 底部信息的div -->
<div class="footer">
</div>
</body>
</html>
表格布局
介绍
表格更多的是用来展示数据
特征
- 当内容溢出时会自动撑开父元素
优点
- 兼容性很好
- 结构位置更简单
- 容易上手
缺点
- 无法设置栏边距；
- 当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的
- 标签结构多，复杂
- 不利于搜索引擎抓取信息，直接影响到网站的排名
- Table要比其它html标记占更多的字节。(延迟下载时间，占用服务器更多的流量资源。)
- table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌
应用
- 很少有网站直接使用这种布局方式，但有些网站后台分页会使用它来展示数据
示例代码
可以看到代码结构较为复杂
<html>
<body>
<h2 align="center">合并表格行或列</h2>
<!--显示菜单-->
<table border="1" align="center" bordercolor="#E76BFF" height="225px" cellpadding="1px" cellspacing="0px" width="400px">
<tr>
<!--colspan="3"表该列要占用三列-->
<td align="center" colspan="3">菜谱</td>
</tr>
<tr>
<td rowspan="3">素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小炒韭菜</td>
<td>白豆腐</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>清蒸龙</td>
<td>鱼香肉丝</td>
</tr>
<tr>
<td>小炒肉
<imgsrc="dog.jpg" width="70px" />
</td>
<td>水煮肉片</td>
</tr>
</table>
<h2 align="center">列里边嵌入子表</h2>
<table border="1" align="center" bordercolor="#E76BFF" height="200px" cellpadding="1px" cellspacing="0px" width="400px">
<caption>购物车</caption>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>名称</td>
<td align=center>
<table border="0" bordercolor="#E76BFF" cellpadding="1px" width="100%" height="100%" cellspacing="0px">
<tr>
<td align=center>1</td>
</tr>
<tr>
<td style="border-top:1px solid #E76BFF;" align=center>2</td>
</tr>
</table>
</td>
<td>
<table border="0" bordercolor="#E76BFF" cellpadding="1px" width="100%" height="100%" cellspacing="0px">
<tr>
<td align=center>1</td>
</tr>
<tr>
<td style="border-top:1px solid #E76BFF;" align=center>2</td>
</tr>
<tr>
<td style="border-top:1px solid #E76BFF;" align=center>3</td>
</tr>
</table>
</td>
<td>小计</td>
</tr>
<tr>
<td>名称</td>
<td align=center><b>2016-11-22</b></td>
<td>小计</td>
<td>小计</td>
</tr>
<tr>
<td>苹果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
<tr>
<td colspan=3 align=center>总价</td>
<td>27元</td>
</tr>
</table>
</body>
</html>
流式布局
介绍
也叫百分比布局
特征
- 高度定死,宽度自适应
- 使用相对单位
优点
- 可以适应不同尺寸的屏幕
缺点
- 对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长
应用
- 移动端一般采用流式布局
- 对于大的轮播图等,宽度100%自适应
示例代码
可以试着改变浏览器宽度，看看页面的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>流式布局</title>
<style type="text/css">
.box{
/* 百分比流式 */
/* 参考最近父级 */
/* width:90%; */
/* max-width:900px;
min-width:600px; */
/* 窗口比 */
/* width:90vw;
max-width:900px;
min-width:600px; */
height:600px;
background-color:orange;
margin:0 auto;
}
.b{
width:100px;
height:100px;
background-color:red;
border-radius:50%;
float:left;
}
body{
font-size:30px;
}
.sup{
font-size:20px;
}
.text{
/* 1em=16px 不一定*/
/* font-size:1em; */
/* font-size:16px; */
/* font-size:0.4em; */
/* em为最近设置字体大小的父级规定的字体大小 */
font-size:1rem;
/* rem为html字体大小 */
}
html{
font-size:40px;
}
</style>
</head>
<body>
<!-- 流式布局 -->
<!-- 目的：让布局脱离固定值限制，可以根据页面情况改变相应发生改变 -->
<div class="box">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="sup">
<div class="text">wenben</div>
</div>
</body>
</html>
自适应布局
介绍
自适应的概念网上有很多，这里单单指媒体查询
它本质是多个静态布局
特征
- 分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围
- 屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化
优点
- 适配大部分设备
缺点
- 为每个设备写一个媒体查询
应用
- @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
- 在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 清除浏览器默认样式 */
*{
margin: 0;
padding: 0;
}
.head{
height: 150px;
background-color: antiquewhite;
}
.content{
font-size: 0;
width: 80%;
background-color: aqua;
margin: 10px auto;
}
.content .left{
display: inline-block;
width: 25%;
height: 300px;
background-color: #F0F8FF;
}
.content .center{
display: inline-block;
width: 50%;
height: 300px;
background-color: #F0a8FF;
}
.content .right{
display: inline-block;
width: 25%;
height: 300px;
background-color: #F00fFF;
}
.footer{
height: 120px;
background-color: aliceblue;
}
@media screen and (max-width: 500px) {
.content .left,.content .center,.content .right{width:100%;}
}
</style>
</head>
<body>
<!-- 头部div -->
<div class="head">
</div>
<!-- 主要内容div -->
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<!-- 底部信息的div -->
<div class="footer">
</div>
</body>
</html>
响应式布局
介绍
通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用
特征
- 每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变
优点
- 适应pc和移动端，如果足够耐心，效果完美
缺点
- 媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高
- 要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本
应用
- bootstrap
- 响应式布局的实现可以通过媒体查询+px,媒体查询+百分比，媒体查询+rem+js这几种方式来实现
示例代码
这是一个bootstrap实例
<div class="jumbotron text-center" style="margin-bottom:0">
<h1>我的第一个 Bootstrap 4 页面</h1>
<p>重置浏览器窗口大小查看效果！</p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">导航</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>关于我</h2>
<h5>我的照片:</h5>
<div class="fakeimg">这边插入图像</div>
<p>关于我的介绍..</p>
<h3>一些链接</h3>
<p>说明文本</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">激活状态</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>标题</h2>
<h5>副标题</h5>
<div class="fakeimg">图像</div>
<p>一些文本..</p>
<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
<br>
<h2>标题</h2>
<h5>副标题</h5>
<div class="fakeimg">图像</div>
<p>一些文本..</p>
<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p>底部内容</p>
</div>
弹性布局
介绍
也叫flex布局
当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
特征
- 弹性盒子是CSS3的一种新布局模式
- 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
- 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
- 弹性容器内包含了一个或多个弹性子元素。
优点
- 容易上手，根据flex规则很容易达到某个布局效果
缺点
- 浏览器兼容性比较差
应用
- 用于适应各个尺寸的设备
示例代码
<style>
body{margin:0;}
ul,li{margin:0; padding:0;}
li{list-style-type:none;}
#list{border:2px solid gold; height:500px; display:flex; flex-direction:row;}
#list li{font-family:"microsoft yahei"; font-size:50px; background:#C00; color:#fff; margin:2px; flex-grow:1;}
#list li:nth-child(2){flex-grow:2;}
</style>
<ul id="list">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
常见布局模式
单列布局
- 头部、主体、底部等宽
- 头部、底部自适应；主体固定宽度
双列布局
- 左侧边栏固定，右边主体自适应
- 右侧边栏固定，左边主体自适应
三列布局
- 左右两列固定宽度；中间主体区自适应
- 左右两列绝对定位；中间主体区自适应
补充： rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。
注： 每个布局各有优缺点，在现实项目中应该配合使用