在PC端制作网页时，经常使用像素固定、内容居中的网页布局。为了适应小屏幕设备，在开发移动设备和跨平台(响应式)网页的过程中，大多采用流式布局。下面详细介绍一下流式布局。
流式布局是一种比例缩放布局，在CSS代码中使用百分比来设置宽度，也称为百分比自适应布局。流式布局是通过将CSS固定像素宽度转换为百分比宽度来实现的。转换公式如下:目标元素宽度/父框宽度=百分比宽度。这里用一个案例来演示如何将固定版式转换成百分比版式，如demo4-1.html所示。
& lt！DOCTYPE html & gt& lthtml lang = & # 34恩& # 34；& gt& lthead & gt& ltmeta charset = & # 34UTF-8 & # 34；& gt& lttitle & gt固定布局转换为百分比布局
可以尝试改变浏览器窗口的大小，页面元素的大小不会随着浏览器窗口而改变，如下图所示。
修改下面的演示4-1样式代码，并将所有宽度更改为百分比，如下所示:
<style type="text/css">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:25.510204%; /*250÷980*/}article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}</style>刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如下图所示：
& ltstyle type = & # 34text/CSS & # 34；& gtbody & gt*{宽度:95%；高度:自动；边距:0自动；页边距-顶部:10px边框:1px纯色# 000；填充:5px} header { height:50px；} section { height:300 px；}页脚{ height:30px；} section & gt*{身高:100%；边框:1px纯色# 000；浮动:左；}一旁{宽度:25.510204%；/* 250 0 */} article { width:71.428571%；/* 700 0 */margin-left:1.0204088%；} & lt/style & gt；刷新页面并缩小浏览器。页面会随着浏览器按百分比逐渐缩小，显示完整。页面效果如下图所示:
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
