教育行業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 分享到:
久久精品一本到99热免费-男女18禁啪啪无遮挡剧烈-强奷漂亮少妇高潮A片-少妇性饥渴VIDEOFREE