1HTML布局主要有兩種方式，一種是表格布局，一種是DIV布局2HTML表格布局是WEB10時(shí)代主要使用的布局方式，即使用TABLE標(biāo)簽進(jìn)行布局，優(yōu)點(diǎn)是布局比較簡單3HTML DIV布局是WEB20時(shí)代主要使用的布局方式，優(yōu)點(diǎn)是符合；抽空時(shí)間，打算學(xué)習(xí)下displayflex本以為就是一個(gè)小小的知識(shí)點(diǎn)，正式去研究的時(shí)候，才發(fā)現(xiàn)displayflex有很多內(nèi)容，能實(shí)現(xiàn)很多效果比如三欄布局左右兩欄固定，中間欄自適應(yīng)，圣杯布局后來想著經(jīng)常聽到流式布局，自；1靜態(tài)布局 給頁面元素設(shè)置固定的寬度和高度，單位用px窗口發(fā)生變化時(shí)，會(huì)出現(xiàn)滾動(dòng)條，內(nèi)容會(huì)被遮擋優(yōu)點(diǎn)簡單方便，不存在兼容問題缺點(diǎn)網(wǎng)頁無法根據(jù)用戶設(shè)備屏幕的寬度進(jìn)行自適應(yīng)2流式布局 也叫100%布局寬度；1流式布局Fluid 流布局與固定寬度布局基本不同點(diǎn)就在于對(duì)網(wǎng)站尺寸的側(cè)量單位不同固定寬度布局使用的是像素，但是流布局使用的是百分比，這位網(wǎng)頁提供了很強(qiáng)的可塑性和流動(dòng)性換句話說，通過設(shè)置百分比，我們不需要考慮。

比如采用靜態(tài)布局的側(cè)邊欄，而采用流式布局的主區(qū)域 上面也討論過流式布局和彈性布局不適合尺寸跨度太大的屏幕所以基本上采用有限的最大最小擬合尺寸，在擬合范圍內(nèi)，采用流式布局或者彈性布局進(jìn)行擬合如果超出適應(yīng)范圍，就會(huì)變成靜態(tài)布；流式布局是移動(dòng)web開發(fā)中常用的布局父框打開后displayflex，默認(rèn)是不換行，所以使用flexwrapwrapwrap包起來使用justifycontentspacearound使其子箱的主軸間距均勻分布使用aligncontentspacearound使其子。

響應(yīng)式布局 采用自適應(yīng)布局和流式布局的綜合方式，為 不同屏幕分辨率范圍 創(chuàng)建 流式布局 彈性布局 要點(diǎn)在于使用 ltttem和rem單位lttt 來定義元素寬度，與流式布局有極大的相似性，但也有不同之處，主要區(qū)別在于；然后說PC端的，由于各個(gè)CSS框架的推進(jìn)，基本上都是以12列或12的倍數(shù)網(wǎng)格布局為主了，然后網(wǎng)格布局又分為流式網(wǎng)格和固定寬度網(wǎng)格如總寬度設(shè)為960px前者通常用百分比來實(shí)現(xiàn)，并且已經(jīng)計(jì)算和減去了所謂的“；1059M，請(qǐng)及時(shí)下載，以免失效另外附送Div+CSS30網(wǎng)頁布局案例精粹pdf。

如果是pc端頁面布局，還是采用傳統(tǒng)方式如果是移動(dòng)端或者是不考慮兼容的pc則采用flex 設(shè)置子項(xiàng)在側(cè)軸上的排列方式 并且只能用于子項(xiàng)出現(xiàn) 換行 的情況多行，在單行下是沒有效果的flexflowrow wrapflex 屬性定義子；有兩種實(shí)現(xiàn)方式在討論如何實(shí)現(xiàn)上面的方法之前，先搞懂單元格是如何被布局的用垂直的流式布局作為例子水平的很相似如果單元格具有固定的大小，只要使用 layout 對(duì)象即可 UICollectionViewFlowLayout；#流式布局流式布局是指所有元素都默認(rèn)向左上角靠攏，通過調(diào)整元素相對(duì)位置來達(dá)到預(yù)期效果這種布局方式的優(yōu)點(diǎn)是適應(yīng)性強(qiáng)，可以在不同分辨率的設(shè)備上自適應(yīng)調(diào)整缺點(diǎn)是元素位置取決于相鄰元素的位置和尺寸，不夠靈活；流式布局方式是移動(dòng)web開發(fā)使用的比較常見的布局方式父盒子開啟displayflex后，默認(rèn)為不換行，所以使用flexwrapwrap使其換行 使用justifycontent spacearound 使其子盒子主軸間距平均分配 使用aligncontent space。

流式布局，就是百分比布局，也稱非固定像素布局通過盒子的寬度設(shè)置成百分比來根據(jù)屏幕的寬度來進(jìn)行伸縮，不受固定像素的限制，內(nèi)容向兩側(cè)填充流式布局方式是移動(dòng)web開發(fā)使用的比較常見的布局方式父盒子開啟displayflex后；靜態(tài)布局 靜態(tài)布局采用像素px作為頁面設(shè)計(jì)的單位在不同的顯示寬度下，頁面元素大小都是固定的 流式布局 流式布局以百分比設(shè)定頁面寬度，當(dāng)顯示區(qū)域變化時(shí)，頁面布局會(huì)等比的發(fā)生改變 流式布局強(qiáng)調(diào)的是適應(yīng)屏幕寬度的變化在實(shí)際；第四種grid布局 父盒子display grid gridtemplatecolumns300px auto 300px分割成3列，寬度分別為300px auto 300px gridtemplaterows100px占一行，行高100px。