流式布局（百分比布局）
- 流式布局就是百分比布局，也称非固定像素布局。
- 通过盒子宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。
- 流式布局方式是移动web开发使用的比较常见的布局方式
- max-width 最大宽度（max-height 最大高度）
- min-width 最小宽度（min-hight 最小高度）
京东首页案例
注意：里面的图片默认和文字基线对齐，注意要添加vertical-align: middle; 让图片和文字中线对齐，解决图片底部留白问题。
部分重要代码：
<!-- 首先添加meta viewport属性 设置视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
初始化body样式
body {
/* 让body和设备一样宽 */
width: 100%;
margin: 0 auto;
/* 给定最大宽度 */
max-width: 640px;
/* 给定最小宽度 */
min-width: 320px;
font: 14px/1.5 -apple-system, Helvetica, sans-serif;
color: #666;
}
盒子用百分比给宽度
.app ul li:nth-child(1) {
width: 8%;
}
.app ul li:nth-child(2) {
width: 10%;
}
.app ul li:nth-child(3) {
width: 57%;
}
.app ul li:nth-child(4) {
width: 25%;
background-color: #f63515;
}
/* 搜索模块 */
.search-wrap {
position: fixed;
/* 解决子盒子.search外边距合并问题 */
overflow: hidden;
height: 44px;
/* 固定定位的盒子需给定宽度 ，且给百分比需在一定范围内*/
width: 100%;
max-width: 640px;
min-width: 320px;
}
/* 左右两个盒子用定位 不占位置*/
.search-wrap .search-btn,
.search-wrap .search-login {
position: absolute;
top: 0;
width: 40px;
height: 44px;
}
.search-wrap .search-btn {
left: 0;
}
.search-wrap .search-login {
right: 0;
}
/* 使用伪元素添加小图标 */
.search-wrap .search-btn::after {
content: "";
display: block;
position: absolute;
bottom: 12px;
right: 6px;
width: 20px;
height: 18px;
background: url(../images/s-btn.png) no-repeat;
/* 背景图缩放 */
background-size: 20px 16px;
}
/* 中间盒子不给宽，左右margin值留出空白，使盒子能跟随设备宽度伸缩 */
.search-wrap .search {
position: relative;
height: 30px;
margin: 7px 50px 0;
background-color: #fff;
border-radius: 15px;
}
/* 放大镜 */
.search-wrap .search .sou {
position: absolute;
top: 8px;
left: 53px;
width: 18px;
height: 15px;
/* 二倍精灵图技术，先缩放整张精灵图后再量坐标，代码里精灵图尺寸也要缩放 */
background: url(../images/jd-sprites.png) no-repeat -83px 0;
background-size: 200px;
}
/* 主体内容 */
/* 滑动图 */
.main-content .slider img {
width: 100%;
}
/* 品牌日 */
.main-content .brand div {
float: left;
width: 33.33%;
}
.main-content .brand div img {
width: 100%;
}
/* 导航模块 */
.main-content .nav a {
/* 添加浮动就不需要转换行内块 */
float: left;
width: 20%;
text-align: center;
}
.main-content .nav a img {
width: 40px;
margin: 10px 0;
}
.main-content .nav a span {
/* 转换为块级元素，另起一行显示 */
display: block;
}
