1 流式布局(百分比布局)

流式布局，就是百分比布局，也称非固定像素布局。
通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
注意事项：需要定义页面的最大和最小支持宽度。

常用初始化样式

body {
    margin:0 auto;
    min-width:320px;
    max-width:540px;
    background:#fff;
    font-size:14px;
    font-family:-apple-system,Helvetica,sans-serif;
    line-height:1.5;
    color:#666;
}

举个例子：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流失布局</title>
    <style>
        body>* {
            width: 95%;
            height: auto;
            margin: 0 auto;
            margin-top: 10px;
            border: 1px solid #000;
            padding: 5px;
        }
        
        header {
            height: 50px;
        }
        
        section {
            height: 300px;
        }
        
        footer {
            height: 30px;
        }
        
        section>* {
            height: 100%;
            border: 1px solid #000;
            float: left;
        }
        
        aside {
            width: 27%;
        }
        
        article {
            width: 71%;
            margin-left: 1%;
        }
    </style>
</head>

<body>
    <header>header</header>
    <nav>nav</nav>
    <section>
        <aside>aside</aside>
        <article>article</article>
        <article>article</article>
    </section>
    <footer> footer</footer>
</body>

</html>

效果如下：

当缩小浏览器，页面按百分比随浏览器逐渐缩小，放大时也会按百分比随浏览器逐渐放大