★文章内容学习来源：拉勾教育大前端就业集训营

本篇学习目标：了解流式布局方法

目录：
一、介绍
二、注意事项
三、简单举例
四 、实践

一、介绍

  • 流式布局：也称为百分比布局、非固定像素布局；
  • 实现方式：通过将盒子的宽度设置为百分比，从而实现屏幕宽度变化其盒子宽度也相应变化，不受固定像素限制；
  • 是移动web开发常见的布局方式。

二、注意事项

  • 制作时要设置页面支持的最大、最小宽度； 
/*比如*/
max-width:540px;
min-width:320px;

三、简单举例

样式如图

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流式布局简单举例</title>
    <style> body {
     max-width: 750px; min-height: 320px; } section {
     width: 100%; height: 300px; background-color: hotpink; margin: 0 auto; } section div {
     float: left; height: 300px; width: 50%; border: 20px solid skyblue; box-sizing: border-box; } </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
    </section>
</body>
</html>

四 、实践

具体可查看我上传的资源：
用流式布局实现一个京东移动端.zip

下篇继续：【61】移动WEB开发(8)——布局常见方式②flex布局