1. 現在前端流行什麼頁面布局方式
前端常用頁面布局分為下面幾種：
1.靜態布局
給頁面元素設置固定的寬度和高罩隱度，單位用px。窗口發生變化時，會出現滾動條，內容會被遮擋。
優點：簡單方便，不存在兼容問題。
缺點：網頁無法根據用戶設備屏幕的寬度進行自適應。
2.流式布局
也叫100%布局。寬度單位為百分比。流式布局常用的設計答孫模板:左側固定+右側自適應，左右固定寬度+中間自適應。
優點：可以適應不同尺寸的屏幕
缺點：如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定
3.響應式布局
使用meta標簽設置，頁面元素寬度隨窗口調整自動適配。採用自適應布局和流式布局的綜物舉廳合方式，為不同屏幕解析度范圍創建流式布局。
優點：適應pc和移動端，如果足夠耐心，效果完美
缺點：
（1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。
（2）要匹配足夠多的屏幕大小，工作量不小，設計也需要多個版本。
4.彈性布局
就是採用css3中的flex屬性。
優點：簡單、方便、快速
缺點：CSS3新特性,瀏覽器兼容性非常頭疼。而且手機瀏覽器對flex的支持也不是很理想。
2. 網站前端開發常用的布局方式有哪些
實現網頁布局的方式方法比較多，布局方式可以大概分為這幾類。
布局種類：
1、table布局（網頁的興起，1995）
2、Flash布局（自由的黃金時代，1996）
3、div+css（CSS的誕生，1998）
4、柵格與響應式（移動端的興起，2007與2010）
當前WEB前端開發使用DIV+CSS的布局方式會比較多也比較常用吧，網頁布局看起來貌似簡單，但是它需要綜合使用很多HTML+CSS的知識，總的來說知識量是不小。如果想系統化的了解HTML+CSS方面的知識，建議你選擇一本比較不錯的HTML5相關書籍（主要看知識邏輯、知識的表達方式，比如《HTML5布局之路》）進行學習，讓自己的知識更扎實一些，不然學的零零散散的。
Tips：學習好HTML+CSS有利於後面學習JavaScript，畢竟需要它們兩者結合在一起才可以實現出可交互的前端頁面。
3. 網站前端開發慣用的布局方式有哪些
網站布局之「廠」字型
所謂的「廠」字型布局結構，就是指頁面頂部為橫條網站標識和廣告條，下方左面為主菜單，右面顯示內容的布局。菜單條與背景，整體效果類似「廠」字。「廠」布局是目前最常見的一種網頁布局方式。這種布局的優點是頁面結構清晰，主次分明。缺點是由於被使用得過多，顯得缺乏創意，略顯呆板。
網站布局之「三」字型
這種布局多用於國外站點，通常頁面上方橫向幾條色塊，將頁面整體分割為若幹部分，色塊中大多放廣告圖片或者Flash動畫。
網站布局之 「國」字型
「國」字型布局通常上下各有一個廣告條或者其他欄目條，左面是主菜單，右面放友情鏈接或者其他欄目等，中間是主要內容。這種布局的優點是充分利用版面，信息量大。缺點是頁面顯得比較擁擠和局促，不夠靈活。
網站布局之門戶型
這類網頁通常內容多，信息量大，通常沒有時顯的線條作為邊界，圖片用得也比較少，一般通過文字的排列產生視覺上的分區效果。
網站布局之區塊型
區塊型布局現在出現的越來越多，在網頁上各個區域具有封閉的邊界，經過合理放置顯得清晰美觀。其缺點是由於片面固定，各區域很難根據其中的內容的多少而調整大小，因此不適宜用於區域內容的長度經常變化的網頁。
網站布局之宣傳單型
宣傳單型布局頁面就像一張宣傳海報，以一張精美圖片作為頁面的設計中心，常用於個性類站點。其優點是漂亮吸引人；缺點就是頁面中大面積使用圖片，導致瀏覽速度相對較慢。所以這類頁面同是可以作為宣傳單使用。
4. 【web前端】十分鍾徹底弄懂 flex 布局
flex（flexible box：彈性布局盒模型），是 2009 年 w3c 提出的一種可以簡潔、快速對頁面進行彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支持：
其中在webkit內核的瀏覽器中使用時，必須加上 -webkit- 前綴。
使用 flex 布局的容器（flex container），它內部的元素自動成為 flex 項目（flex item）。容器擁有 兩根 隱形的軸，水平的 主軸 （main axis），和豎直的 交叉軸 （cross axis）。
主軸開始的位置，即主軸與左邊框的交點，稱為 main start；主軸結束的位置稱為 main end；交叉軸開始的位置，即交叉軸與上邊框的交點，稱為 cross start；交叉軸結束的位置稱為 cross end。
item 按主軸或交叉軸排列，item 在主軸方向上占據的寬度稱為 main size，在交叉軸方向上占據的寬度稱為 cross size。
注意：使用 flex 容器內元素，即 flex item 的 float，clear、vertical-align 屬性將失效。
flex-direction 決定主軸的方向，即項目排列的方向。有四個可能的值：row（默認） | row-reverse | column | column-reverse。
flex-wrap 決定項目在盒中無法撐滿的情況下，是否換行。
它是 flex-direction 和 flex-wrap 的集合簡寫形式，如：row wrap | column wrap-reverse 等。默認值為 row nowrap，即橫向排列 不換行。
決定 item 在橫向主軸上的對齊方式，可能的值有 flex-start（默認），flex-end，center，space-between，space-around。當為橫向主軸時，具體含義如下：
決定 item 在縱向主軸上的對齊方式，可能的值有 flex-start（默認），flex-end，center，space-between，space-around。當為縱向主軸時，具體含義如下：
決定了 item 在橫向主軸上的對齊方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，當為橫向主軸時，其具體含義為：
決定了 item 在縱向主軸上的對齊方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，當為縱向主軸時，其具體含義為：
該屬性定義了當有多根主軸時，即 item 不止一行時，多行在交叉軸上的對齊方式。注意當有多行時，定義了 align-content 後，align-items 屬性將失效。align-content 可能值含義如下（假設主軸為垂直方向）：
item 的屬性在 item 的 style 中設置，item 共有如下六種屬性：
order 的值是整數，默認為 0，整數越小，item 排列越靠前，如上圖所示。
它定義了當 flex 容器有多餘空間時，item 是否放大。默認值為 0，即當有多餘空間時也不放大；可能的值為整數，表示不同 item 的放大比例。
定義了當容器空間不足時，item 是否縮小。默認值為 1，表示當空間不足時，item 自動縮小，其可能的值為整數，表示不同 item 的縮小比例。
表示 item 在主軸上占據的空間，默認值為 auto。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 三屬性的簡寫總和。
align-self 屬性允許 item 有自己獨特的在交叉軸上的對齊方式，它有六個可能的值，默認值為 auto。
5. 前端幾種常見的布局方式
1.靜態布局（固定寬高）
2.彈性布局（flex）————常用
3.聖杯布局
flex：flex-group、flex-shrink、flex-basis
flex：auto/none/負數/一個長度或百分比/兩個非負數/一個非負數和一個長度或百分比等
A，flex-group：當父元素有剩餘空間時，子元素占據剩餘空間的量
B，flex-shrink：當父元素的空間不足以展示所有的子元素，父元素沒設置flex-wrap，子元素需要進行收縮的量
C，flex-basis：表示該子元素的初始寬度
4.自適應布局（為不同的屏幕解析度定義的布局 @media媒體查詢技術）
5.流式布局：（寬高用百分比，按屏幕解析度調整，布局不發生變化）
6.響應式布局（使用meta標簽，寬高隨窗口調整自動適配，適應布局和流式布局的綜合方式）
7.柵格布局
1）.柵格(網格劃分)：在一個特定區域內劃分出有規律的格子，依靠這些格子進行有規律的版面布局。
使用柵格布局：bootstrap（12列），element（24欄），antDesign
2）.柵格布局
container：柵格系統容器；rows：行；cols：列；gutters：各列間的空隙
3）.柵格布局實現響應式布局
8.table布局（使用表格進行頁面排版和樣式設置）
1）.用法
display:table
display:table-cell，相當於td元素
display:table-row，相當於tr元素
table-layout:fixed | auto(默認)：table-layout 屬性用於顯示表格單元格、行、列；auto, 自動表格布局，列的寬度由單元格中最大內容的寬度決 定；fixed ,固定表格布局。
6. web前端幾種常見的網頁布局
現在的網頁差不多都採用分列布局，
常見的有單列布局（如網路首頁）、雙列布局、三列布局和混合布局，超過三列的布局很少見。
最簡單的要數單列布局了，這種布局適合各種搜索引擎主頁，干凈的界面和較少的干擾信息給用戶較好的體驗。
