乐鱼电竞

  • 教育行业A股IPO第一股（股票代码 003032）

    全国咨询/投诉热线：400-618-4000

    什么是流式布局？流式布局是什么意思?

    更新时间:2021年03月16日15时18分 来源:乐鱼电竞 浏览次数:

    HTML&JS+前端课程


    在PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，下面我们就对流式布局进行详细介绍。

    流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。 流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度 下面通过一个案例来演示固定布局如何转换为百分比布局，如demo4-1.html 所示。

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定布局转换为百分比布局</title>
	<style type="text/css">
		body>*{ width: 980px; 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:250px;}
		article{ width:700px; margin-left:10px;}
	</style>

</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
	<aside>aside</aside>
	<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>

    打开Chrome浏览器访问demo4-1.html，页面效果如下图所示。

    流式布局效果01

    可以尝试改变浏览器窗口的大�。趁嬖氐拇笮〔换崴驿榔鞔翱诟谋�，如下图所示。

    流式布局效果02

    下面修改demo4-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>

    刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如下图所示：

    流式布局03


    猜你喜欢：

    流式布局介绍：流式布局的优势和不足

    弹性盒布局简介

    网页一般用什么工具布局？常用的网页流程布局介绍

    什么是页面布局?页面布局有什么原则？

    弹性布局使用介绍：什么情况下用弹性布局?

    乐鱼电竞web前端培训课程

    0 分享到：
    和我们在线交谈！
    【网站地图】【sitemap】