web大前端布局
常用的布局
常用的布局一般分為一下幾大類：
文件布局（text）
文件流本質是 nomal flow （普通流、常規流）
元素在文件中的特點 塊級元素，和內聯元素。
塊級元素：是自帶有這行效果，在文件中獨佔一行的效果，塊狀元素會自上而下的排列且在預設寬度是父元素的100%而高度預設被內容撐開。
內聯元素：內聯元素在文件流中只佔自身的大小，會預設從左向右排列，如果一行中不足以容納所有的內聯元素，則換到下一行，繼續自左向右。在文件流中，內聯元素的寬度和高度預設都被內容撐開。 什麼是文件流（文件布局）將窗體自上而下分成一行一行，塊級元素從上至下、行內元素在每行中從左至右的順序依次排放元素。
缺點：在移動端不可以使用pc端的頁面，兩個頁面的布局是不一致的，移動端需要自己再設計乙個布局並使用不同的網域名稱呈現
浮動布局（float）
浮動一般用於讓塊級元素排成一行在同一行顯示
任何元素都可浮動，如乙個元素設定為浮動元素，浮動元素無論最初是什麼都會變成乙個行塊級元素，擁有disolay：inline-block屬性float：left沿著父容器頂部向左推入容器，如果卡住推不動，判斷當前位置能否全部顯示該子容器，如果能完成 如果不能繼續找空檔往裡推
缺點：脫離文件流，需要清除浮動，高度塌陷（float的破壞性主要是指它會使父容器的高度塌陷，也就是父元素在高度計算的時候會忽略浮動的元素）。
優點：相容性好，計較簡單容易上手
清除浮動
清除浮動是為了父級元素所在容器中的block-level box布局不產生影響所以在浮動布局情況下，讓父級得適合的高度
最後在同一結構下, 如果採用浮動布局,所有的同級別兄弟標籤都要採用浮動布局浮動布局的盒子寬度在沒有設定時會自適應內容寬度
定位布局（position）
relative屬性：脫離文件流，但保留佔位符，其偏移位置是相對於本身在正常文件流中時的位置， 脫離文件流是說設定了relative屬性之後，元素不在z-index：0；的正常文件流中，其z-index的值》0但保留佔位符，就是在正常文件流中位置依舊保留著，後續元素不能佔位，然後相對於本身正常位置進行偏移。
absolute：完全脫離文件流，不保留佔位符，其元素定位是相對於其父級以上，一直追溯至設定了position：relative或fixed屬性的外層元素（也包含塊元素），如果其外層元素均勻未設定position屬性，則定位是相對於html文件進行的絕對定位，並不是相對於body的定位
缺點：脫離文件流，會導致後續元素全部脫離文件流，可用行差。
優點： 就是 讓元素擁有了 inline-block 寬高限制
流式布局（streaming）
元素的寬高用百分比做單位，元素寬高按螢幕解析度調整，布局不發生變化。螢幕尺度跨度過大的情況下不能正常顯示
使用百分比定義寬高大多數都是用px來固定住，可以根據可視區域（viewport）和父元素的尺寸進行調整，盡可能的適應各種解析度，往往max-width/min-width等屬性控制尺寸流動範圍以免過大或者過小影響閱讀頁面。這種布局方式在web前端開發的時早期歷史上，用來應對不同尺寸的pc螢幕（那時螢幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果長度過大，那麼在相對其原始設計而言過小或過大的螢幕都不能在螢幕上正常的顯示。
因為寬度使用百分比（%）來定義，但是高度和文字大小等大都是用px來固定。所以在大螢幕的手機下顯示效果變成有些頁面元素寬度被拉的很長，但是高度，文字大小文字還是和原來一樣，享受到非常的不協調
缺點：如果尺度過大或者過小在螢幕上就不能正常顯示
優點：相容性比較好，當螢幕解析度變化時元素大小不變布局也不變
彈性布局（rem/em）
彈性布局是css3引入的布局方式，用來代以前的web開發人員的一些複雜易錯的hacks方法（如float實現流失布局）
rem是相對於html元素的font-size大小而言的，而em是相對於其父元素，使用rem單位的彈性布局在移動端比較受歡迎使用。
、這類布局的特點是，包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同「流式布局」或「靜態/固定布局」）。早期瀏覽器不支援整個頁面按比例縮放，僅支援網頁內文字尺寸的放大，這種情況下。使用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放。
rem,em區別：rem,em都是順應不同網頁字型大小展現而產生的。其中，em是相對其父元素，在實際應用中相對而言會帶來很多不便；而rem是始終相對於html大小，即頁面根元素。
瀏覽器的預設字型高度一般為16px，即1em:16px，但是 1:16 的比例不方便計算，為了使單位em/rem更直觀，css編寫者常常將頁面跟節點字型設為62.5%，比如選擇用rem控制字型時，先需要設定根節點html的字型大小，因為瀏覽器預設字型大小16px*62.5%=10px。這樣1rem便是10px，方便了計算。
缺點：瀏覽器的相容性比較差只能到ie9以及以上。
優點：適應性強，在做不同螢幕解析度的介面時非常使用，可以隨意按照寬度，比列劃分元素的寬高，實現快捷，易維護。簡單，方便，快速。
自適應布局（adaptation）
自適應布局分辨為不一樣螢幕解析度定義布局，可以建立多個靜態布局，每乙個靜態布局對應乙個解析度範圍，螢幕解析度變化時，頁面裡面的元素的位置會變化而大小不會變，可使用(@media**查詢)給不同的尺寸和介質的裝置切換不同的樣式在優秀的響應範圍設計下可以給配範圍內的裝置最好的體驗，在同乙個裝置下實際還是固定的布局
缺點：如果需要不同頁面那麼還需要寫多頁的**
優點：螢幕解析度變化時，頁面裡面元素的位置變化而大小不會變化
響應式布局（ bootstrap）
為不同的螢幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著視窗調整而自動適配。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。即：建立多個流體式布局，分別對應乙個螢幕解析度範圍。響應式幾乎已經成為優秀頁面布局的標準，每個螢幕解析度下面會有乙個布局樣式，即元素位置和大小都會變**查詢+流式布局。通常使用 @media **查詢 和網格系統 (grid system) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 css 給單一網頁不同裝置返回不同樣式的技術統稱。
缺點：**查詢是有限的，也就是可以列舉出來的，只能 適應主流的寬高，要匹配足夠的螢幕大小，工作量比較大，設計也需要多個版本
優點：適應pc和移動端，如果只夠的耐心，效果會很完美。
以上就是常見的前端布局，不理解的可以多多查詢，瀏覽，理解。
常見的四種前端布局方式
1.自適應 2.響應式 3.靜態 4.流式 剛剛接觸網頁設計的時候，常常分不清響應式布局和自適應布局，其實他們就是 傻傻分不清楚 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap.或...
前端常見的布局方式
一 靜態布局 static layout 布局概念 最傳統 原始的web布局設計。網頁最外層容器 outer 有固定的大小,所有的內容以該容器為標準,超出寬高的部分用滾動條 overflow scroll 來實現滾動查閱。優點採用的是css2之前的寫法,不存在瀏覽器相容性。布局簡單。缺點但是移動端不...
前端常見布局方式實現
這種方式最好應用於 按鈕 文字之類的居中模式，否則就需要借助inline block來進行居中布局。適用於塊級元素不給出寬高的情況下 需要借助transtrom的tanslatex方法 parent child子元素寬度已知的情況下 parent子元素 div 絕對定位 父元素需要被定位 子元素 t...