前端常見的布局
大部分前端布局都是自上而下，或者自左而右；并且不同的布局能夠給用戶帶來不一樣的體驗，好的更是能瞬間吸引用戶。
2|1靜態(tài)布局
靜態(tài)布局常見于pc端，是給頁面設(shè)定固定的寬高且居中布局，web網(wǎng)站開發(fā)的單位一般用px。
特點：不管頁面多大，始終都是用初始設(shè)置的值，一般是定寬相當(dāng)于min-width。
優(yōu)點：簡單，沒有兼容性問題?，F(xiàn)在還有一些門戶網(wǎng)站和企業(yè)官網(wǎng)在用，他們有些設(shè)備的尺寸是固定的，這個靜態(tài)布局就適合了。而且對于剛?cè)腴T的技術(shù)小白是很適合學(xué)習(xí)也很容易接受。
缺點：不會隨著屏幕的大小而變化。
下面是一個靜態(tài)布局的例子：
<html lang="en"> <head> <meta charset="utf-8"> <title>靜態(tài)布局</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>這是左邊導(dǎo)航</nav> <section>這是右邊內(nèi)容</section> </div> </div> </body></html>
2|2浮動布局
浮動布局是調(diào)用浮動屬性來使得元素向左或者向右移動從而共享一行，直到碰到包含框或者另一個浮動框。浮動元素是脫離文檔流的，不占據(jù)頁面空間，但不脫離文本流，且浮動會將行內(nèi)元素和行內(nèi)塊元素轉(zhuǎn)化為塊元素。
特點：
脫離標(biāo)準(zhǔn)普通流的控制(浮) 移動到指定位置(動), (俗稱脫標(biāo))。
浮動的盒子不再保留原先的位置，會一行內(nèi)顯示并且元素頂部對齊。
浮動的元素會具有行內(nèi)塊元素的特性。
優(yōu)點：表格布局方式簡單，且兼容性好，是當(dāng)時非常有效的一種布局方式。
缺點：需要調(diào)整網(wǎng)站布局對代碼改動很大，頁面的寬度不夠會影響布局，還有 table 比 其他 HTML 標(biāo)簽占據(jù)更多字節(jié)，延遲頁面生成速度等等。
這里我使用文字環(huán)繞的例子：
<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>浮動布局是調(diào)用浮動屬性來使得元素向左或者向右移動從而共享一行，直到碰到包含框或者另一個浮動框。浮動元素是脫離文檔流的，不占據(jù)頁面空間，但不脫離文本流，且浮動會將行內(nèi)元素和行內(nèi)塊元素轉(zhuǎn)化為塊元素。 </p> <div style="clear: both;"></div> <p>浮動布局是調(diào)用浮動屬性來使得元素向左或者向右移動從而共享一行，直到碰到包含框或者另一個浮動框。浮動元素是脫離文檔流的，不占據(jù)頁面空間，但不脫離文本流，且浮動會將行內(nèi)元素和行內(nèi)塊元素轉(zhuǎn)化為塊元素。</p> </div> </body></html>
注：在上面的例子中我們可以看到浮動元素下面文字沒有受到影響，是因為在下面的 div 的樣式加了 clear:both 來清除浮動的影響。
擴(kuò)展：一般浮動布局可以使用樣式?box-sizing:border-box;?來確保每個盒子的寬高（包括內(nèi)邊距和邊框）不會因為擴(kuò)大而破裂，可以輕松使用浮動布局。
2|3定位布局
定位布局是給元素設(shè)置 position 屬性從而控制元素顯示在不規(guī)則的位置，偏向于單個元素定位操作。
position 有五個選項值：
static 靜態(tài)定位：頁面元素定位的默認(rèn)值，出現(xiàn)在正常流中；
fixed 固定定位：元素相對于頁面窗口是固定位置的，即使窗口滾動它也不會移動，fixed 屬性是脫離文檔流的，不會占據(jù)空間，但會重疊其他元素之上；例如側(cè)邊導(dǎo)航條的固定定位等。
relative 相對定位：以自身作為參照物，對象不可層疊、不脫離文檔流，移動相對定位元素，但它原本所占的空間不會改變。通過 top, bottom, left, right 定位；
absolute 絕對定位，選擇最近一個設(shè)置有相對定位的父元素進(jìn)行絕對定位，若沒有則以 body 的坐標(biāo)原點為參照。與其他元素重疊，脫離文檔流，不占空間，通過 top, bottom, left, right 定位；
sticky 粘性定位：基于滾動位置來定位，在 relative 和 fixed 之間切換，當(dāng)超出頁面目標(biāo)區(qū)域時，就是 fixed 固定在目標(biāo)位置，否則為 relative；元素定位表現(xiàn)為在跨越特定閾值前為相對定位，之后為固定定位。須指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效，否則其行為與相對定位相同。
這些不同的定位在不同的場景有不同的作用，這里就不一一列舉。
特點：定位布局中不同的屬性有各自的特點，最明顯的是使用定位的元素獨立開來。
優(yōu)點：無需考慮元素的顯示方式和位置，直接獨立定位，方便控制。
缺點：很難預(yù)測各元素之間是否有影響，例如重疊覆蓋等。
以父元素相對子元素絕對布局為例：
<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%); 來居中布局。
2|4柵格布局
柵格布局也被稱為網(wǎng)格布局，它是一種新興的布局方式，常用的有瀑布流（每列的項目高度是隨機(jī)的，根據(jù)自身的內(nèi)容而定，詳細(xì)可以看這個）。柵格布局是二維的，包含了行和列，與彈性布局相似，柵格系統(tǒng)也是由柵格容器包裹柵格元素進(jìn)行使用，且它的布局很簡單，就是把一個區(qū)域劃分為一個個的格子排列好，再把需要的元素填充進(jìn)去。它的應(yīng)用場景沒有彈性布局和浮動布局多，因為有些瀏覽器對它的支持性較不好。詳細(xì)可以看這位大佬的CSS柵格布局
特點：重視比例、秩序、連續(xù)感和現(xiàn)代感。以及對存在于版面上的元素進(jìn)行規(guī)劃、組合、保持平衡或者打破平衡，以便讓信息可以更快速、更便捷、更系統(tǒng)和更有效率的讀?。涣硗庾钪匾囊稽c是，負(fù)空間的規(guī)劃（即：留白）也是柵格系統(tǒng)設(shè)計當(dāng)中非常重要的部分 ---wiki
優(yōu)點：
能大大的提高網(wǎng)頁的規(guī)范性和可重用性。在柵格系統(tǒng)下，固定和靈活的尺寸，這對于大型網(wǎng)站的開發(fā)和維護(hù)來說，能節(jié)約不少成本。
基于柵格進(jìn)行設(shè)計，可以讓整個網(wǎng)站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。
將多個項目放入網(wǎng)格單元格或區(qū)域中，可以部分重疊。
缺點：兼容性不好。
這里使用grip布局，還有跟 flex 和響應(yīng)式結(jié)合等。
<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>
2|5table布局
在我看來柵格布局跟 table 有相似的點，但是柵格布局比較友好，只是 div 進(jìn)行各種處理。table 布局是在父元素使用 display:table; 子元素使用 display:table-row或 display:table-cell; 子元素會默認(rèn)自動平均劃分父元素的空間。
特點：如果設(shè)置其中一個子元素 table-cell 為固定寬度，那么其余子級容器會自動平分寬度沾滿父級容器。
優(yōu)點：兼容性好，容易上手，做表格是100%正確。
缺點：
比其他 html 標(biāo)簽占更多的字節(jié)。造成下載時間延遲，占用服務(wù)器更多的流量資源（代碼冗余）。
渲染不友好，阻礙瀏覽器渲染引擎的渲染順序，等內(nèi)容全部加載完成在顯示表格，會延遲頁面的生成速度，讓用戶等待時間更久。
靈活性差，一旦設(shè)計確定會變死，后期很難通過 CSS 改變新的面貌，且不能自適應(yīng)。
不利于搜索引擎抓取信息，直接影響到網(wǎng)站的排名。
這里使用簡單的 table 布局例子：
<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>
2|6彈性（flex）布局
flexible 模型又被稱為 flexbox，它不像柵格布局可以同時處理行跟列，只能處理單行或者當(dāng)列，是一維的布局模型。它可以簡便、完整且適應(yīng)的實現(xiàn)頁面各種布局，web網(wǎng)站頁面一般用 em 或者 rem 單位(1em = 16px, 1rem = 10px)，小程序一般用 rpx 單位(1px = 2rpx)進(jìn)行相對布局，特別的是字體能夠放縮方便且自適應(yīng)。flex 是我平常使用最多的布局，它適用的場景有很多，主要是用于比例分割居中顯示，例如攜程的移動頁面或者淘寶網(wǎng)頁的布局等。
特點：能夠調(diào)整其子元素在不同的屏幕分辨率下用最適合的方法填充合適的空間。
優(yōu)點：適應(yīng)性強(qiáng)，容易上手，且很簡便的完成很多頁面布局效果，后期維護(hù)容易，若需求細(xì)微度不高，那么是很好的選擇。
缺點：兼容性差，在低版本的瀏覽器有可能渲染不出效果（ie9及以上）。
注：彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個容器只有一行。
<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>
2|7圣杯布局
看到圣杯布局是不是會想到雙飛翼布局呢？其實圣杯布局跟雙飛翼的布局區(qū)別在于中間是否有包括兩邊的區(qū)域，圣杯布局是沒有的，兩邊或者一邊非主要部分填充父元素的 padding；而雙飛翼布局是有的，但多了一層 dom 節(jié)點，非主要部分用的是 center 部分的 margin 空間，聯(lián)想一下名字就好啦!下面看圖吧比較容易清楚：
圣杯布局要求頭部跟尾部要有固定的高，寬則占滿屏幕；中間是一個三欄布局，比頭尾高度要高，兩側(cè)寬度不變，中間自動充滿區(qū)域。其實這樣一來只要有去瀏覽過網(wǎng)站的大佬們都知道圣杯布局比較常見，大部分網(wǎng)站比較喜歡這種布局。圣杯布局可以用浮動、flex 和 grid 三種實現(xiàn)。
特點：中間主要部分放在文檔流前面保證先行渲染。
優(yōu)點：布局簡單，縮到最小也不會變形。
缺點：瀏覽器兼容性不是很友好。當(dāng)瀏覽器無限放大的時候圣杯會破碎掉，而當(dāng) center 部分寬小于 兩邊或者單邊就會發(fā)生布局混亂。
下面使用浮動來實現(xiàn)圣杯布局：
<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>
2|8自適應(yīng)布局
當(dāng)時 Ethan Marcotte 提出這個自適應(yīng)這個概念是為了能夠解決移動端網(wǎng)頁的問題。總結(jié)的來說就是創(chuàng)建多個靜態(tài)布局，每個布局對應(yīng)一個屏幕的分辨率范圍，每個靜態(tài)布局頁面的元素大小不會因為窗口的改變而變化，除非從一個靜態(tài)布局變到另外一個布局，不然在同一設(shè)備下還是固定的布局。常用的方式有使用 CSS 的 @media 媒體查詢，也有高成本的 JS 進(jìn)行設(shè)計開發(fā)，或者使用第三方開源框架 bootstrap，這個能夠很好的支持多個瀏覽器。
特點：自適應(yīng)多端，不同的分辨率下為固定布局，不會使元素大小發(fā)生變化。
優(yōu)點：
對網(wǎng)站的復(fù)雜程度兼容性大。
測試容易，代碼執(zhí)行效率高，降低了開發(fā)者的頁面開發(fā)成本代價。
在一定寬度范圍內(nèi)提供了穩(wěn)定的視覺體驗，增加用戶體驗。
缺點：對老舊或者非標(biāo)準(zhǔn)的瀏覽器兼容性較差，當(dāng)對一個頁面作出修改時，同時需要改變多種尺寸的布局，流程相對變得繁瑣。
下面用的CSS媒體查詢的方式來實現(xiàn)響應(yīng)式布局：
?
<html> ? ?<head> ? ? ? ?<meta charset="UTF-8"> ? ? ? ?<title>自適應(yīng)布局</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>
擴(kuò)展：圖片較多的網(wǎng)站適合自適應(yīng)布局，但是文字為主的就不太適合了，適合定寬，這樣也會提高兼容性和開發(fā)效率。
2|9流式布局
流式布局也叫百分比布局（也有叫非固定像素布局），是頁面中的元素根據(jù)屏幕分辨率自動進(jìn)行適配調(diào)整，頁面元素大小會發(fā)生變化，但是整體布局不會發(fā)生變化，始終都是滿屏顯示。它使用的是百分比定義寬，但高一般會被固定住，這種布局在早期是為了適應(yīng)不同尺寸的PC屏幕，但現(xiàn)在在移動端比較常見。
特點：適配，頁面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。
優(yōu)點：通過設(shè)置百分比寬度適應(yīng)不同尺寸的屏幕。
缺點：高度和文字大小都是固定的，所以當(dāng)屏幕尺寸過大或者過小時某些元素會被拉伸拉扁（高度、文字大小不變），無法正常顯示，顯得不協(xié)調(diào)，帶來不好的用戶體驗。
常用的流式布局有：
左側(cè)固定，右側(cè)自適應(yīng)
右側(cè)固定，左側(cè)自適應(yīng)
左右兩側(cè)固定，中間自適應(yīng)（圣杯布局）
等分布局
下面用等分流式布局：
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- width=device-width 表示元素寬度與當(dāng)前設(shè)備的視口一樣大， initial-scale=1.0 表示禁止當(dāng)前頁面出現(xiàn)縮放 --> <title>流式布局</title> <style> body { margin: 0; } .container { height: 200px; } .item { height: 100%; /*display: inline-block;*/ ? /* 使用行內(nèi)塊狀元素會出現(xiàn)邊距像素，寬度要改為24.5，當(dāng)盒子撐滿會自動換行 */ float: left; width: 25%; } .item1 { background-color: blanchedalmond; } .item2 { background-color: skyblue; } .item3 { background-color: plum; } .item4 { background-color: greenyellow; } /* 消除浮動，相當(dāng)于在后面增加一個被隱藏的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>
2|10響應(yīng)式布局
上面提到了自適應(yīng)布局，這里又提到了響應(yīng)式布局，那么兩者有什么區(qū)別呢？自適應(yīng)布局是一套靜態(tài)頁面內(nèi)容布局對應(yīng)一個分辨率范圍，位置會變但是大小不變，需要多套界面布局；響應(yīng)式通過檢測視口分辨率判斷是pc端、平板還是手機(jī)，針對不同的客戶端在客戶端做處理，來展示不同的布局和內(nèi)容從而達(dá)到令人滿意的效果，屏幕大小的變化會導(dǎo)致元素的位置和大小都改變，可以說是流式布局和自適應(yīng)布局的結(jié)合體，一套界面布局即可適應(yīng)所有不同的尺寸和終端，可想而知設(shè)計考慮的比自適應(yīng)復(fù)雜的多。
響應(yīng)式與自適應(yīng)的原理是相似的，都是檢測設(shè)備，根據(jù)不同的設(shè)備采用不同的css，而且css都是采用的百分比的，而不是固定的寬度，不同點是響應(yīng)式的模板在不同的設(shè)備上看上去是不一樣的，會隨著設(shè)備的改變而改變展示樣式，而自適應(yīng)不會，所有的設(shè)備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據(jù)設(shè)備采用不同的展示樣式，流式就是采用了一些設(shè)置，當(dāng)寬度大于多少時怎么展示，小于多少時怎么展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態(tài)的就是采用固定寬度的了。--笨鳥兒
特點：創(chuàng)建多個流式布局對應(yīng)不同的分辨率范圍，即每個屏幕分辨率下面會有一個布局樣式，元素位置和大小都會變。
優(yōu)點：面對不同分辨率設(shè)備靈活性強(qiáng)，能夠快速的解決多設(shè)備顯示適應(yīng)問題，如果有足夠耐心去設(shè)計考慮，那么可以達(dá)到很理想的效果。
缺點：
限制于內(nèi)容布局、框架并不復(fù)雜的網(wǎng)站。
需要匹配足夠多的屏幕分辨率，效率低下。
無用代碼多，加載時間加長。
只能適應(yīng)主流的寬高。
使用簡單的媒體查詢例子實現(xiàn)：
?
?
<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>響應(yīng)式布局</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>
3|0總結(jié)
前端布局有很多種，各式各樣，每個都有它自己適合的應(yīng)用場景，并不是說主流或者常用好的就是最好的，視情況而定，個人用的比較多的是 flex 布局??。
