一、 流式布局的概念
流式布局，就是百分比布局
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是***移动web开发使用的比较常见的布局方式***
也就是说将CSS单位全部换成百分比单位，以达到自适应屏幕的大小，缺点：需要依赖百分比的参考对象
二、说明
1、流式布局使用非固定像素来定义网页内容，即百分比布局。
2、通过将盒子的宽度设置为百分比根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。
三、分类
左侧固定,右侧自适应
右侧固定左侧自适应
两侧固定,中间自适应(圣杯布局)
等分布局
四、实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body{
margin: 0 auto;
}
.box{
width:20%;
height:300px;
background-color: yellow;
float:left;
border: 2px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
</body>
</html>
评论