亲爱的前端学习者们，我相信在我们写前端页面的时候，我们都使用了百分比布局，也就是我们今天所说的流式布局。然后让我们总结一下流式布局的使用。
:什么是流媒体布局？
网页布局包括：静态布局、流式布局、响应式布局和灵活布局。静态布局3360意味着网页中的所有元素都以px为单位。无论浏览器的具体大小如何，始终按照设定值布局显示。由于浏览器大小不同，这种布局在不同设备中容易出现滚动条等问题。因此，这种布局并不是移动开发中的主流布局方式。
流布局：是根据屏幕分辨率自动调整页面中元素宽度的布局，也就是我们常说的适配。它可以保证当当前屏幕分辨率发生变化时，页面中元素的大小也可以相应变化，因此流布局是移动终端开发的常用布局。其他布局方法将在后面总结。
:什么时候用流布局？
1.当我们打开我们的手机页面，我们发现无论什么样的移动设备，页面总是全屏显示，如下图：所示。
图：显示了iphone6，7pluse :中JD.COM页面的效果。
图2 :显示了iphone4 :中JD.COM页面的效果。
在移动开发中，这种情况下会用到流布局的实现。具体实现如下：首先，在网页的头部标签添加元标签，设置视口。
然后将页面中父元素的宽度设置为100%。
2.移动终端中的导航项目应平均分配到父容器中。例如，在携程的手机网页中，导航在iphone4中平均分为五部分，在iphoneX中分为五部分，如下图：所示。
图：显示了iphone4中5个等份的效果。
图2 :显示了ipnoneX中5个相等部分的效果。
在移动开发中如此平等划分的情况下，也有必要使用流布局实现。以5的等分为例，具体代码如下：
也许有些朋友已经想过，如果把他们分成其他相等的部分。我们的做法是100%除以相应的股份数。如果你想分成3等份，100除以3。如果你想分成4等份，100除以4。
3.如果网页布局左右两侧有固定尺寸，中间适配的纵向布局(Grail布局、双飞翼布局)也需要通过流式布局来实现，如下图：所示。
具体实现如下：在：的HTML结构中准备3个框。
然后设置对应的CSS代码：
流媒体布局还有其他情况，比如左边是固定大小，右边是自适应。右边是固定尺寸，左边是自适应尺寸。其余两种情况可以参考上面的Grail布局灵活实现，这里就不做演示了。
:流媒体布局有什么缺点吗？
流布局用于解决同类设备不同分辨率之间的兼容性。如果屏幕比例跨度太大，就无法在原本设计太小或太大的屏幕上正常显示。
因为宽度是用% percentage定义的，但是高度和文字大小大部分是用px固定的，所以大屏手机上一些页面元素的显示效果会变得很长，但是高度和文字大小还是和以前一样(也就是这些东西不能变成‘流动’)，显示非常不协调。
所以后面我们会和大家分享如何通过响应式布局和灵活布局来解决这些问题。这里将总结和分享流式布局。让我们在下一篇文章中解释灵活的布局。
最新黑马活动：
黑马程序员2020 java中级程序员学习路线图，所有资源均免费分发，点击下方链接：“了解更多”即可前往页面获取。