前端常見的十種布局

前端布局是每一個前端都應該熟悉和掌握的，好的布局更是能瞬間吸引用戶，增加用戶體驗。

前端常見的十種布局方式

作為一個開發小白，也是第一次編寫博客文章，若有錯誤請各位大牛大佬指正，輕噴！！！

我在學校接觸最多的就是前端，然后最近在學習新的前端知識，發現前端布局常見的有很多種，不同的應用場景有不同的布局方式，下面就來簡單介紹一下吧。

靜態布局
浮動布局
定位布局
柵格布局
table布局
彈性（flex）布局
圣杯布局
自適應布局
流式布局
響應式布局

前端常用布局方式

大部分前端布局都是自上而下，或者自左而右；并且不同的布局能夠給用戶帶來不一樣的體驗，好的更是能瞬間吸引用戶。

靜態布局

靜態布局常見于pc端，是給頁面設定固定的寬高且居中布局，web網站開發的單位一般用px。

特點：不管頁面多大，始終都是用初始設置的值，一般是定寬相當于min-width。
優點：簡單，沒有兼容性問題。現在還有一些門戶網站和企業官網在用，他們有些設備的尺寸是固定的，這個靜態布局就適合了。而且對于剛入門的技術小白是很適合學習也很容易接受。
缺點：不會隨著屏幕的大小而變化。
下面是一個靜態布局的例子：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>靜態布局</title>
		<style>
			body {
				margin: 0px auto;
				color: white;
				text-align: center;
				line-height: 200px;
			}
			
			.container {
				min-width: 1600px;
				background: indianred;
				margin: 0 auto;
			}
			
			nav,
			section {
				float: left;
				min-height: 200px;
			}
			
			section {
				width: 70%;
			}
			
			nav {
				width: 30%;
				background: blueviolet;
			}
			
			.clearfix:after {
				content: ".";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="clearfix">
				<nav>這是左邊導航</nav>
				<section>這是右邊內容</section>
			</div>
		</div>
	</body>

</html>

浮動布局

浮動布局是調用浮動屬性來使得元素向左或者向右移動從而共享一行，直到碰到包含框或者另一個浮動框。浮動元素是脫離文檔流的，不占據頁面空間，但不脫離文本流，且浮動會將行內元素和行內塊元素轉化為塊元素。

特點：

脫離標準普通流的控制(浮) 移動到指定位置(動), (俗稱脫標)。
浮動的盒子不再保留原先的位置，會一行內顯示并且元素頂部對齊。
浮動的元素會具有行內塊元素的特性。

優點：

排版友好，例如圖文排版或者首字母下沉排版等。
兼容性好。

缺點：
需要調整網站布局對代碼改動很大，頁面的寬度不夠會影響布局。浮動是脫標的，那么就無法撐起父元素造成塌陷。
這里我使用文字環繞的例子：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>浮動布局</title>
		<style>
			.box{
				width: 520px;
				overflow: hidden;
				border: 2px solid paleturquoise;
				padding: 10px;
				margin: 20px auto;
				border-radius: 5px;
			}
			.box_left {
				float: left;
				width: 150px;
				margin-right: 15px;
				padding: 1em;
				border-radius: 5px;
				background-color: blueviolet;
				min-height: 150px;
				color: white;
				text-align: center;
				line-height: 150px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="box_left">向左浮動</div>
			<p>浮動布局是調用浮動屬性來使得元素向左或者向右移動從而共享一行，直到碰到包含框或者另一個浮動框。浮動元素是脫離文檔流的，不占據頁面空間，但不脫離文本流，且浮動會將行內元素和行內塊元素轉化為塊元素。
			</p>
			<div style="clear: both;"></div>
			<p>浮動布局是調用浮動屬性來使得元素向左或者向右移動從而共享一行，直到碰到包含框或者另一個浮動框。浮動元素是脫離文檔流的，不占據頁面空間，但不脫離文本流，且浮動會將行內元素和行內塊元素轉化為塊元素。</p>
		</div>
	</body>

</html>

注：在上面的例子中我們可以看到浮動元素下面文字沒有受到影響，是因為在下面的 div 的樣式加了 clear:both 來清除浮動（一般是四種，clear:both 比較常用）的影響。
擴展：一般浮動布局可以使用樣式 box-sizing:border-box; 來確保每個盒子的寬高（包括內邊距和邊框）不會因為擴大而破裂，可以輕松使用浮動布局。

定位布局

定位布局是給元素設置 position 屬性從而控制元素顯示在不規則的位置，偏向于單個元素定位操作。
position 有五個選項值：

static 靜態定位：頁面元素定位的默認值，出現在正常流中；

fixed 固定定位：元素相對于頁面窗口是固定位置的，即使窗口滾動它也不會移動，fixed 屬性是脫離文檔流的，不會占據空間，但會重疊其他元素之上；例如側邊導航條的固定定位等。

relative 相對定位：以自身作為參照物，對象不可層疊、不脫離文檔流，移動相對定位元素，但它原本所占的空間不會改變。通過 top, bottom, left, right 定位；

absolute 絕對定位，選擇最近一個設置有相對定位的父元素進行絕對定位，若沒有則以 body 的坐標原點為參照。與其他元素重疊，脫離文檔流，不占空間，通過 top, bottom, left, right 定位；

sticky 粘性定位：基于滾動位置來定位，在 relative 和 fixed 之間切換，當超出頁面目標區域時，就是 fixed 固定在目標位置，否則為 relative；元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位。須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效，否則其行為與相對定位相同。

這些不同的定位在不同的場景有不同的作用，這里就不一一列舉。

特點：定位布局中不同的屬性有各自的特點，最明顯的是使用定位的元素獨立開來。
優點：無需考慮元素的顯示方式和位置，直接獨立定位，方便控制。
缺點：很難預測各元素之間是否有影響，例如重疊覆蓋等。
以父元素相對子元素絕對布局為例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>定位布局</title>
		<style>
			.container {
				position: relative;
				width: 400px;
				height: 400px;
				background-color: chocolate;
			}
			.box{
				width: 100px;
				height: 100px;
				position: absolute;
				background-color: antiquewhite;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">這是子元素</div>
		</div>
	</body>
</html>

注：在上面的例子中我們可以看到子元素居中于父元素，這里是絕對定位配合使用 transform: translate(-50%,-50%); 來居中布局。

柵格布局

柵格布局也被稱為網格布局，它是一種新興的布局方式，常用的有瀑布流（每列的項目高度是隨機的，根據自身的內容而定，詳細可以看這個）。柵格布局是二維的，包含了行和列，與彈性布局相似，柵格系統也是由柵格容器包裹柵格元素進行使用，且它的布局很簡單，就是把一個區域劃分為一個個的格子排列好，再把需要的元素填充進去。它的應用場景沒有彈性布局和浮動布局多，因為有些瀏覽器對它的支持性較不好。詳細可以看這位大佬的CSS柵格布局

特點：重視比例、秩序、連續感和現代感。以及對存在于版面上的元素進行規劃、組合、保持平衡或者打破平衡，以便讓信息可以更快速、更便捷、更系統和更有效率的讀取；另外最重要的一點是，負空間的規劃（即：留白）也是柵格系統設計當中非常重要的部分 ---wiki
優點：

能大大的提高網頁的規范性和可重用性。在柵格系統下，固定和靈活的尺寸，這對于大型網站的開發和維護來說，能節約不少成本。
基于柵格進行設計，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。
將多個項目放入網格單元格或區域中，可以部分重疊。
缺點：兼容性不好。
這里使用grip布局，還有跟 flex 和響應式結合等。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>柵格布局</title>
    <style>
        main {
            border: solid 5px gray;
            display: inline-grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
        }

        main div {
            background: burlywood content-box;
            padding: 10px;
            border: 1px black dashed;
            text-align: center;
            line-height: 80px;
            color: #fff;
        }
    </style>
</head>

<body>
    <main>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
   </main>
</body>

</html>

table布局

在我看來柵格布局跟 table 有相似的點，但是柵格布局比較友好，只是 div 進行各種處理。table 布局是在父元素使用 display:table; 子元素使用 display:table-row或 display:table-cell; 子元素會默認自動平均劃分父元素的空間。

特點：如果設置其中一個子元素 table-cell 為固定寬度，那么其余子級容器會自動平分寬度沾滿父級容器。
優點：兼容性好，容易上手，做表格是100%正確。
缺點：

比其他 html 標簽占更多的字節。造成下載時間延遲，占用服務器更多的流量資源（代碼冗余）。
渲染不友好，阻礙瀏覽器渲染引擎的渲染順序，等內容全部加載完成在顯示表格，會延遲頁面的生成速度，讓用戶等待時間更久。
靈活性差，一旦設計確定會變死，后期很難通過 CSS 改變新的面貌，且不能自適應。
不利于搜索引擎抓取信息，直接影響到網站的排名。
這里使用簡單的 table 布局例子：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>table布局</title>
		<style>
			.box {
				width: 600px;
				height: 100px;
				display: table;
			}
			
			.a,
			.b,
			.c,
			.d {
				display: table-cell;
			}
			
			.a {
				background: blueviolet;
			}
			
			.b {
				background: aqua;
			}
			
			.c {
				background: palevioletred;
			}
			
			.d {
				background: hotpink;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="a"></div>
			<div class="b"></div>
			<div class="c"></div>
			<div class="d"></div>
		</div>
	</body>

</html>

彈性（flex）布局

flexible 模型又被稱為 flexbox，它不像柵格布局可以同時處理行跟列，只能處理單行或者當列，是一維的布局模型。它可以簡便、完整且適應的實現頁面各種布局，web網站頁面一般用 em 或者 rem 單位(1em = 16px, 1rem = 10px)，小程序一般用 rpx 單位(1px = 2rpx)進行相對布局，特別的是字體能夠放縮方便且自適應。flex 是我平常使用最多的布局，它適用的場景有很多，主要是用于比例分割居中顯示，例如攜程的移動頁面或者淘寶網頁的布局等。

特點：能夠調整其子元素在不同的屏幕分辨率下用最適合的方法填充合適的空間。
優點：適應性強，容易上手，且很簡便的完成很多頁面布局效果，后期維護容易，若需求細微度不高，那么是很好的選擇。
缺點：兼容性差，在低版本的瀏覽器有可能渲染不出效果（ie9及以上）。
注：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style>
        .flexbox {
            width: 500px;
            background: bisque;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 10px;
        }
        .flexbox div {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            border: 1px solid #fefefe;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="flexbox">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

圣杯布局

看到圣杯布局是不是會想到雙飛翼布局呢？其實圣杯布局跟雙飛翼的布局區別在于中間是否有包括兩邊的區域，圣杯布局是沒有的，兩邊或者一邊非主要部分填充父元素的 padding；而雙飛翼布局是有的，但多了一層 dom 節點，非主要部分用的是 center 部分的 margin 空間，聯想一下名字就好啦!下面看圖吧比較容易清楚：

圣杯布局要求頭部跟尾部要有固定的高，寬則占滿屏幕；中間是一個三欄布局，比頭尾高度要高，兩側寬度不變，中間自動充滿區域。其實這樣一來只要有去瀏覽過網站的大佬們都知道圣杯布局比較常見，大部分網站比較喜歡這種布局。圣杯布局可以用浮動、flex 和 grid 三種實現。

特點：中間主要部分放在文檔流前面保證先行渲染。
優點：布局簡單，縮到最小也不會變形。
缺點：瀏覽器兼容性不是很友好。當瀏覽器無限放大的時候圣杯會破碎掉，而當 center 部分寬小于兩邊或者單邊就會發生布局混亂。
下面使用浮動來實現圣杯布局：

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>圣杯布局</title>
</head>
<style>
  body {
    min-width: 600px;
    font-size: 20px;
  }
 
  #header, #footer {
    background-color: blueviolet;
    text-align: center;
    height: 100px;
    line-height: 100px;
  }
  #footer {
    clear: both;
  }
 
  #center {
    padding-left: 200px; 
    padding-right: 200px;  
    overflow: hidden;
  }
 
  #center .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #content {
    width: 100%;
    background: rgb(206, 201, 201);
  }
 
  #nav {
    width: 200px;           
    right: 200px;         
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
 
  #aside {
    width: 200px;         /*  */
    margin-left: -200px;  
    right: -200px;
    background: rgb(231, 105, 2);
  }
 
</style>
 
<body>
  <header id="header">header</header>
  <div id="center">
    <section id="content" class="column">content</section>
    <nav id="nav" class="column">nav</nav>
    <aside id="aside" class="column">aside</aside>
  </div>
  <footer id="footer">footer</footer>
 
 
</body>
 
</html>

自適應布局

當時 Ethan Marcotte 提出這個自適應這個概念是為了能夠解決移動端網頁的問題。總結的來說就是創建多個靜態布局，每個布局對應一個屏幕的分辨率范圍，每個靜態布局頁面的元素大小不會因為窗口的改變而變化，除非從一個靜態布局變到另外一個布局，不然在同一設備下還是固定的布局。常用的方式有使用 CSS 的 @media 媒體查詢，也有高成本的 JS 進行設計開發，或者使用第三方開源框架 bootstrap，這個能夠很好的支持多個瀏覽器。

特點：自適應多端，不同的分辨率下為固定布局，不會使元素大小發生變化。
優點：

對網站的復雜程度兼容性大。
測試容易，代碼執行效率高，降低了開發者的頁面開發成本代價。
在一定寬度范圍內提供了穩定的視覺體驗，增加用戶體驗。
缺點：對老舊或者非標準的瀏覽器兼容性較差，當對一個頁面作出修改時，同時需要改變多種尺寸的布局，流程相對變得繁瑣。
下面用的CSS媒體查詢的方式來實現響應式布局：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自適應布局</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            #head, #foot, #main
            {
                height: 100px;
                width: 1200px;
                background-color: blanchedalmond;
                text-align: center;
                font-size: 30px;
                line-height: 100px;
                margin: 0 auto;
            }
            #head div{
                display: none;
                font-size: 20px;
                height: 30px;
                width: 100px;
                background-color: greenyellow;
                float: right;
                line-height: 30px;
                margin-top: 35px;
            }
            #head ul{
                width: 80%;
            }
            #head ul li{
                width: 20%;
                float: left;
                text-align: center;
                list-style: none;font-size: 20px;
            }
            #main{
                height: auto;
                margin: 10px auto;
                overflow: hidden;
            }
            .left, .center, .right{
                height: 500px;
                line-height: 500px;
                float: left;
                width: 20%;
                background-color: peachpuff;
            }
            .center{
                width: 60%;
                border-left: 10px solid #FFF;
                border-right: 10px solid #FFF;
                box-sizing: border-box;
            }
            @media only screen and (max-width: 1200px) {
                #head, #foot, #main{
                width: 100%;
                }
            }
            @media only screen and (max-width: 612px) {
                .left, .center, .right{
                    width: 100%;
                    display: block;
                    height: 150px;
                    line-height: 150px;
                }
                .center{
                    border: hidden;
                    border-top: 10px  solid #FFFFFF;
                    border-bottom: 10px solid #FFFFFF;
                    height: 500px;
                    line-height: 600px;
                }
                #head ul{
                    display: none;
                }
                #head div{
                    display: block;
                }
            }
        </style>   
    </head>
    <body>
        <div>
            <header id="head">
                <ul>
                    <li>nav1</li>
                    <li>nav2</li>
                    <li>nav3</li>
                    <li>nav4</li>
                    <li>nav5</li>
                </ul>
                <div>icon</div>
            </header>
            <section id="main">
                <div class="left">left</div>
                <div class="center">center</div>
                <div class="right">right</div>
            </section>
            <footer id="foot">footer</footer>
        </div>
    </body>
</html>

擴展：圖片較多的網站適合自適應布局，但是文字為主的就不太適合了，適合定寬，這樣也會提高兼容性和開發效率。

流式布局

流式布局也叫百分比布局（也有叫非固定像素布局），是頁面中的元素根據屏幕分辨率自動進行適配調整，頁面元素大小會發生變化，但是整體布局不會發生變化，始終都是滿屏顯示。它使用的是百分比定義寬，但高一般會被固定住，這種布局在早期是為了適應不同尺寸的PC屏幕，但現在在移動端比較常見。

特點：適配，頁面元素的寬度按照屏幕分辨率進行適配調整，但整體布局不變。
優點：通過設置百分比寬度適應不同尺寸的屏幕。
缺點：高度和文字大小都是固定的，所以當屏幕尺寸過大或者過小時某些元素會被拉伸拉扁（高度、文字大小不變），無法正常顯示，顯得不協調，帶來不好的用戶體驗。

常用的流式布局有：

左側固定，右側自適應

右側固定，左側自適應

左右兩側固定，中間自適應（圣杯布局）

等分布局

下面用等分流式布局：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 
			width=device-width 表示元素寬度與當前設備的視口一樣大，
			initial-scale=1.0 表示禁止當前頁面出現縮放
		-->
		<title>流式布局</title>
		<style>
			body {
				margin: 0;
			}
			
			.container {
				height: 200px;
			}
			
			.item {
				height: 100%;
				/*display: inline-block;*/  
				/* 使用行內塊狀元素會出現邊距像素，寬度要改為24.5，當盒子撐滿會自動換行 */
				float: left;
				width: 25%;
			}
			
			.item1 {
				background-color: blanchedalmond;
			}
			
			.item2 {
				background-color: skyblue;
			}
			
			.item3 {
				background-color: plum;
			}
			
			.item4 {
				background-color: greenyellow;
			}
			/* 消除浮動，相當于在后面增加一個被隱藏的div */
			.clearfix:after {
				content: '';
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
		</style>
	</head>

	<body>
		<!-- 父元素清除浮動 -->
		<div class="container clearfix">
			<div class="item item1"></div>
			<div class="item item2"></div>
			<div class="item item3"></div>
			<div class="item item4"></div>
		</div>
	</body>

</html>

響應式布局

上面提到了自適應布局，這里又提到了響應式布局，那么兩者有什么區別呢？自適應布局是一套靜態頁面內容布局對應一個分辨率范圍，位置會變但是大小不變，需要多套界面布局；響應式通過檢測視口分辨率判斷是pc端、平板還是手機，針對不同的客戶端在客戶端做處理，來展示不同的布局和內容從而達到令人滿意的效果，屏幕大小的變化會導致元素的位置和大小都改變，可以說是流式布局和自適應布局的結合體，一套界面布局即可適應所有不同的尺寸和終端，可想而知設計考慮的比自適應復雜的多。

響應式與自適應的原理是相似的，都是檢測設備，根據不同的設備采用不同的css，而且css都是采用的百分比的，而不是固定的寬度，不同點是響應式的模板在不同的設備上看上去是不一樣的，會隨著設備的改變而改變展示樣式，而自適應不會，所有的設備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據設備采用不同的展示樣式，流式就是采用了一些設置，當寬度大于多少時怎么展示，小于多少時怎么展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態的就是采用固定寬度的了。--笨鳥兒

特點：創建多個流式布局對應不同的分辨率范圍，即每個屏幕分辨率下面會有一個布局樣式，元素位置和大小都會變。
優點：面對不同分辨率設備靈活性強，能夠快速的解決多設備顯示適應問題，如果有足夠耐心去設計考慮，那么可以達到很理想的效果。
缺點：

限制于內容布局、框架并不復雜的網站。
需要匹配足夠多的屏幕分辨率，效率低下。
無用代碼多，加載時間加長。
只能適應主流的寬高。

使用簡單的媒體查詢例子實現：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0" />
		<title>響應式布局</title>
		<style>
			body{
				margin: 0 auto;
				min-width: 375px;
			}
			@media screen and (min-width: 375px) {
				body {
					width: 680px;
					background-color: yellow;
				}
			}
			
			@media screen and (min-width: 612px) {
				body {
					width: 768px;
					background-color: blue;
				}
			}
			
			@media screen and (min-width: 1200px) {
				body {
					width: 1190px;
					background-color: red;
				}
			}
		</style>
	</head>

	<body>
	</body>

</html>

總結

前端布局有很多種，各式各樣，每個都有它自己適合的應用場景，并不是說主流或者常用好的就是最好的，視情況而定，個人用的比較多的是 flex 布局??。
常用前端布局基本就是這幾個啦，若有不同或者錯誤請評論留言指出，多謝！！

創作不易，若需轉載請備注出處！

posted @ 2023-03-18 23:21 幼兒園技術家閱讀(3349) 評論(3) 收藏舉報

刷新頁面返回頂部

zxlh1529

前進，加油！！！