（前端乾貨）網頁的六種佈局方式（固定佈局，表格佈局，浮動佈局，流式佈局，彈性佈局，響應式佈局）

思維導圖

固定佈局

介紹

	固定佈局也叫靜態佈局

特徵

給頁面元素設置固定的寬度，高度，單位一般採用px等絕對長度單位
一般設置了min-width，當窗口縮小時，會出現滾動條
針對不同分辨率的設備，分別寫入不同的樣式文件。

優點

List item
固定寬度的佈局更易於使用以及制定設計頁面。
瀏覽器支持度高

缺點

用戶體驗不好，固定寬度的佈局可能給屏幕分辨率大的用戶造成過多空白空間。
較小的屏幕分辨率可能需要水平滾動條，這取決於固定佈局的寬度。
在可用性方面，固定寬度佈局總體效果不是很好。
不能根據用戶的屏幕尺寸做出不同的表現。

應用

當前，大部分門戶網站、大部分企業的PC宣傳站點都採用了這種佈局方式。
固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單辦法。

示例代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 清除瀏覽器默認樣式 */
			*{
				margin: 0;
				padding: 0;
			}
			.head{
				width: 1000px;
				height: 150px;
				background-color: antiquewhite;
				margin: 0 auto;
			}
			.content{
				font-size: 0;
				width: 1000px;
				height: 400px;
				background-color: aqua;
				margin: 10px auto;
			}
			.content .left{
				display: inline-block;
				width: 200px;
				height: 100%;
				background-color: #F0F8FF;
				
			}
			.content .center{
				display: inline-block;
				width: 600px;
				height: 100%;
				background-color: #F0a8FF;
				
			}
			.content .right{
				display: inline-block;
				width: 200px;
				height: 100%;
				background-color: #F00fFF;
				
			}
			.footer{
				width: 1000px;
				height: 120px;
				background-color: aliceblue;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 網頁佈局就是擺盒子 -->
		<!-- 大盒套小盒，盒子模型，簡單佈局，div塊，浮動 -->
		<!-- 頭部div -->
		<div class="head">
		</div>
		<!-- 主要內容div -->
		<div class="content">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
		<!-- 底部信息的div -->
		<div class="footer">
		</div>
	</body>
</html>

浮動佈局

介紹

	也叫float佈局
	浮動的設計初衷是爲了設計文字環繞效果

特徵

脫離文檔流

優點

浮動可以使元素block塊狀化（也就是行內元素浮動後可以設置寬高）；即display:inline-block;
可以使塊元素同行排列

缺點

導致父元素高度塌陷
元素脫離文檔流，佈局困難

應用

現在pc端網頁使用此佈局較爲頻繁，和固定佈局結合使用

示例代碼

中間內容區使用浮動佈局，實現三個div塊同行

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
		<style type="text/css">
			/* 清除瀏覽器默認樣式 */
			*{
				margin: 0;
				padding: 0;
			}
			.head{
				height: 150px;
				background-color: antiquewhite;
			}
			.content{
				width: 1000px;
				height: 400px;
				background-color: aqua;
				margin: 10px auto;
			}
			.content .left{
				width: 200px;
				height: 100%;
				background-color: #F0F8FF;
				float: left;
			}
			.content .center{
				width: 600px;
				height: 100%;
				background-color: #F0a8FF;
				float: left;
			}
			.content .right{
				width: 200px;
				height: 100%;
				background-color: #F00fFF;
				float: left;
			}
			.footer{
				height: 120px;
				background-color: aliceblue;
			}
		</style>
	</head>
	<body>
		<div class="head">
		</div>
		<!-- 主要內容div -->
		<div class="content">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
		<!-- 底部信息的div -->
		<div class="footer">
		</div>
	</body>
</html>

表格佈局

介紹

	表格更多的是用來展示數據

特徵

當內容溢出時會自動撐開父元素

優點

兼容性很好
結構位置更簡單
容易上手

缺點

無法設置欄邊距；
當其中一個單元格高度超出的時候，兩側的單元格也是會跟着一起變高的
標籤結構多，複雜
不利於搜索引擎抓取信息，直接影響到網站的排名
Table要比其它html標記佔更多的字節。(延遲下載時間，佔用服務器更多的流量資源。)
table一旦設計完成就變成死的，很難通過CSS讓它展現新的面貌

應用

很少有網站直接使用這種佈局方式，但有些網站後臺分頁會使用它來展示數據

示例代碼

可以看到代碼結構較爲複雜

<html>

<body>

    <h2 align="center">合併表格行或列</h2>
    <!--顯示菜單-->
    <table border="1" align="center" bordercolor="#E76BFF" height="225px" cellpadding="1px" cellspacing="0px" width="400px">
        <tr>
            <!--colspan="3"表該列要佔用三列-->
            <td align="center" colspan="3">菜譜</td>

        </tr>
        <tr>
            <td rowspan="3">素菜</td>
            <td>青草茄子</td>
            <td>花椒扁豆</td>
        </tr>

        <tr>

            <td>小炒韭菜</td>
            <td>白豆腐</td>
        </tr>
        <tr>
            <td rowspan="2">葷菜</td>
            <td>清蒸龍</td>
            <td>魚香肉絲</td>
        </tr>
        <tr>

            <td>小炒肉
                <imgsrc="dog.jpg" width="70px" />
            </td>
            <td>水煮肉片</td>
        </tr>
    </table>

    <h2 align="center">列裏邊嵌入子表</h2>
    <table border="1" align="center" bordercolor="#E76BFF" height="200px" cellpadding="1px" cellspacing="0px" width="400px">
        <caption>購物車</caption>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>名稱</td>
            <td align=center>
                <table border="0" bordercolor="#E76BFF" cellpadding="1px" width="100%" height="100%" cellspacing="0px">
                    <tr>
                        <td align=center>1</td>

                    </tr>
                    <tr>
                        <td style="border-top:1px solid #E76BFF;" align=center>2</td>
                    </tr>

                </table>
            </td>
            <td>
                <table border="0" bordercolor="#E76BFF" cellpadding="1px" width="100%" height="100%" cellspacing="0px">
                    <tr>
                        <td align=center>1</td>

                    </tr>
                    <tr>
                        <td style="border-top:1px solid #E76BFF;" align=center>2</td>
                    </tr>
                    <tr>
                        <td style="border-top:1px solid #E76BFF;" align=center>3</td>
                    </tr>
                </table>
            </td>
            <td>小計</td>
        </tr>
        <tr>
            <td>名稱</td>
            <td align=center><b>2016-11-22</b></td>
            <td>小計</td>
            <td>小計</td>

        </tr>
        <tr>
            <td>蘋果</td>
            <td>3公斤</td>
            <td>5元/公斤</td>
            <td>15元</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>2公斤</td>
            <td>6元/公斤</td>
            <td>12元</td>
        </tr>
        <tr>
            <td colspan=3 align=center>總價</td>
            <td>27元</td>
        </tr>
    </table>
</body>

</html>

流式佈局

介紹

	也叫百分比佈局

特徵

高度定死,寬度自適應
使用相對單位

優點

可以適應不同尺寸的屏幕

缺點

對於大屏幕來說,用戶體驗並不是特別好,有些佈局元素會顯得很長

應用

移動端一般採用流式佈局
對於大的輪播圖等,寬度100%自適應

示例代碼

可以試着改變瀏覽器寬度，看看頁面的變化

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>流式佈局</title>
    <style type="text/css">
        .box{
            /* 百分比流式 */
            /* 參考最近父級 */
            /* width:90%; */
            /* max-width:900px;
            min-width:600px; */
 
            /* 窗口比 */
            /* width:90vw;
            max-width:900px;
            min-width:600px; */
 
            height:600px;
            background-color:orange;
            margin:0 auto;
        }
        .b{
            width:100px;
            height:100px;
            background-color:red;
            border-radius:50%;
            float:left;
        }
        body{
            font-size:30px;
        }
        .sup{
            font-size:20px;
        }
        .text{
            /* 1em=16px 不一定*/
            /* font-size:1em; */
            /* font-size:16px; */
            /* font-size:0.4em;  */
            /* em爲最近設置字體大小的父級規定的字體大小 */
            font-size:1rem;
            /* rem爲html字體大小 */
        }
        html{
            font-size:40px;
        }
    </style>
</head>
<body>
    <!-- 流式佈局 -->
    <!-- 目的：讓佈局脫離固定值限制，可以根據頁面情況改變相應發生改變 -->
    <div class="box">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
    <div class="sup">
        <div class="text">wenben</div>
    </div>
</body>
</html>

自適應佈局

介紹

	自適應的概念網上有很多，這裏單單指媒體查詢
	它本質是多個靜態佈局

特徵

分別爲不同的屏幕分辨率定義佈局，即創建多個靜態佈局，每個靜態佈局對應一個屏幕分辨率範圍
屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化

優點

適配大部分設備

缺點

爲每個設備寫一個媒體查詢

應用

@media 媒體查詢給不同尺寸和介質的設備切換不同的樣式。
在優秀的響應範圍設計下可以給適配範圍內的設備最好的體驗，在同一個設備下實際還是固定的佈局

示例代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 清除瀏覽器默認樣式 */
			*{
				margin: 0;
				padding: 0;
			}
			.head{
				height: 150px;
				background-color: antiquewhite;
			}
			.content{
				font-size: 0;
				width: 80%;
				background-color: aqua;
				margin: 10px auto;
			}
			.content .left{
				display: inline-block;
				width: 25%;
				height: 300px;
				background-color: #F0F8FF;
				
			}
			.content .center{
				display: inline-block;
				width: 50%;
				height: 300px;
				background-color: #F0a8FF;
				
			}
			.content .right{
				display: inline-block;
				width: 25%;
				height: 300px;
				background-color: #F00fFF;
				
			}
			.footer{
				height: 120px;
				background-color: aliceblue;
			}
			@media screen and (max-width: 500px) {
			    .content .left,.content .center,.content .right{width:100%;}
			}
		</style>
	</head>
	<body>
		<!-- 頭部div -->
		<div class="head">
		</div>
		<!-- 主要內容div -->
		<div class="content">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
		<!-- 底部信息的div -->
		<div class="footer">
		</div>
	</body>
</html>

響應式佈局

介紹

	通常是糅合了流式佈局+彈性佈局，再搭配媒體查詢技術使用

特徵

每個屏幕分辨率下面會有一個佈局樣式，即元素位置和大小都會變

優點

適應pc和移動端，如果足夠耐心，效果完美

缺點

媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高
要匹配足夠多的屏幕大小，工作量不小，設計也需要多個版本

應用

bootstrap
響應式佈局的實現可以通過媒體查詢+px,媒體查詢+百分比，媒體查詢+rem+js這幾種方式來實現

示例代碼

這是一個bootstrap實例


<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>我的第一個 Bootstrap 4 頁面</h1>
  <p>重置瀏覽器窗口大小查看效果！</p> 
</div>
 
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">導航</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">鏈接</a>
      </li>    
    </ul>
  </div>  
</nav>
 
<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>關於我</h2>
      <h5>我的照片:</h5>
      <div class="fakeimg">這邊插入圖像</div>
      <p>關於我的介紹..</p>
      <h3>一些鏈接</h3>
      <p>說明文本</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">激活狀態</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">鏈接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">鏈接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">禁用</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <div class="col-sm-8">
      <h2>標題</h2>
      <h5>副標題</h5>
      <div class="fakeimg">圖像</div>
      <p>一些文本..</p>
      <p>菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！</p>
      <br>
      <h2>標題</h2>
      <h5>副標題</h5>
      <div class="fakeimg">圖像</div>
      <p>一些文本..</p>
      <p>菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！菜鳥教程，學的不僅是技術，更是夢想！！！</p>
    </div>
  </div>
</div>
 
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>底部內容</p>
</div>

彈性佈局

介紹

	也叫flex佈局
	當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式

特徵

彈性盒子是CSS3的一種新佈局模式
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值爲 flex 或 inline-flex將其定義爲彈性容器。
彈性容器內包含了一個或多個彈性子元素。

優點

容易上手，根據flex規則很容易達到某個佈局效果

缺點

瀏覽器兼容性比較差

應用

用於適應各個尺寸的設備

示例代碼

<style>
	body{margin:0;}
	ul,li{margin:0; padding:0;}
	li{list-style-type:none;}
	#list{border:2px solid gold; height:500px; display:flex; flex-direction:row;}
	#list li{font-family:"microsoft yahei"; font-size:50px; background:#C00; color:#fff; margin:2px; flex-grow:1;}
	#list li:nth-child(2){flex-grow:2;}
</style>
<ul id="list">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>

常見佈局模式

單列布局

頭部、主體、底部等寬
頭部、底部自適應；主體固定寬度

雙列布局

左側邊欄固定，右邊主體自適應
右側邊欄固定，左邊主體自適應

三列布局

左右兩列固定寬度；中間主體區自適應
左右兩列絕對定位；中間主體區自適應

補充： rem,em都是順應不同網頁字體大小展現而產生的。其中，em是相對其父元素，在實際應用中相對而言會帶來很多不便；而rem是始終相對於html大小，即頁面根元素。

注： 每個佈局各有優缺點，在現實項目中應該配合使用

（前端乾貨）網頁的六種佈局方式（固定佈局，表格佈局，浮動佈局，流式佈局，彈性佈局，響應式佈局）

思維導圖

固定佈局

浮動佈局

表格佈局

流式佈局

自適應佈局

響應式佈局

彈性佈局

常見佈局模式

用python的re庫統計《鬥破蒼穹》詞頻

python進階知識之迭代器和生成器---斐波那契數列

python只會基礎能做什麼？---你可以做一個文字遊戲！

2020前端不得不掌握的css3動畫特效之（圖片立體化效果）

小白前端自制紅警登陸界面（試水前端）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結