流式布局（百分比布局）

定义

流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。
在早期用来应对不同尺寸的PC端，如今也是移动开发使用的比较常见的布局方式。

max-*、min-*

百分比布局经常搭配这两个使用
比如所选区域占宽75%，但是将视觉视口调小又需限制其最小宽度，所以往往通过min-width限制，在定义图片时往往使用max-width等于其宽度来防止图片拉伸变形。
如：

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

优缺点

优点：通过百分比设置宽度，可以自适应不同尺寸屏幕

缺点：高度和文字大小都是通过px固定取值，所以如果当显示屏幕过大或过小可能会导致某些页面元素被拉的很长很扁，不能正常显示。