一篇文章带你搞懂流式布局

　　在PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台（响应式）网页开发过程中，多数使用流式布局，下面我们就对流式布局进行详细介绍。
　　流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下：目标元素宽度父盒子宽度百分数宽度下面通过一个案例来演示固定布局如何转换为百分比布局，如demo41。html所示。！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8title固定布局转换为百分比布局titlestyletypetextcssbody｛width：980height：margin：0margintop：10border：1pxsolid000；padding：5｝header｛height：50｝section｛height：300｝footer｛height：30｝section｛height：100；border：1pxsolid000；float：｝aside｛width：250｝article｛width：700marginleft：10｝styleheadbodyheaderheaderheadernavnavnavsectionasideasidearticlearticlesectionfooterfooterfooterbodyhtml
　　打开Chrome浏览器访问demo41。html，页面效果如下图所示。
　　可以尝试改变浏览器窗口的大小，页面元素的大小不会随浏览器窗口改变，如下图所示。
　　下面修改demo41样式代码，将所有宽度修改为百分比的形式，具体如下：styletypetextcssbody｛width：95；height：margin：0margintop：10border：1pxsolid000；padding：5｝header｛height：50｝section｛height：300｝footer｛height：30｝section｛height：100；border：1pxsolid000；float：｝aside｛width：25。510204；250980｝article｛width：71。428571；700980marginleft：1。0204088；｝style刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如下图所示：