首頁技術(shù)文章正文

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

更新時(shí)間:2021年03月16日15時(shí)18分來源:傳智教育瀏覽次數(shù):

在PC端進(jìn)行網(wǎng)頁制作時(shí)，經(jīng)常使用固定像素并且內(nèi)容居中的網(wǎng)頁布局，為了適應(yīng)小屏幕的設(shè)備，在移動(dòng)設(shè)備和跨平臺(tái)(響應(yīng)式)網(wǎng)頁開發(fā)過程中，多數(shù)使用流式布局，下面我們就對流式布局進(jìn)行詳細(xì)介紹。

流式布局是一種等比例縮放布局方式，在CSS代碼中使用百分比來設(shè)置寬度，也稱百分比自適應(yīng)的布局。流式布局實(shí)現(xiàn)方法是將CSS固定像素寬度換算為百分比寬度。換算公式如下: 目標(biāo)元素寬度/父盒子寬度=百分?jǐn)?shù)寬度下面通過一個(gè)案例來演示固定布局如何轉(zhuǎn)換為百分比布局，如demo4-1.html 所示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定布局轉(zhuǎn)換為百分比布局</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

可以嘗試改變?yōu)g覽器窗口的大小，頁面元素的大小不會(huì)隨瀏覽器窗口改變，如下圖所示。

流式布局效果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