流式布局（百分⽐布局）
定义
流式布局，就是百分⽐布局，也称⾮固定像素布局。
通过盒⼦的宽度设置成百分⽐根据屏幕的宽度进⾏伸缩，不受固定像素的限制，内容向两侧填充。
在早期⽤来应对不同尺⼨的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固定取值，所以如果当显⽰屏幕过⼤或过⼩可能会导致某些页⾯元素被拉的很长很扁，不能正常显⽰。margin属性值可以为百分比

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。