1. 前端幾種常見的布局方式
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 ,固定表格布局。
2. 前端布局————長度比例
這是一些不太惹人注意的知識，但是掌握了他會對你的前端不具有很大幫助。
在前端布局時，我們將長度單位分為兩種，一種是絕對單位，一種是相對單位。
上述這些就是絕對單位，這些單位在現實中有絕對定義，不會隨著你的布局平台大小比例變化而變化 （ps：1inch = 2.54cm）
沒錯，你沒有看錯，px是一個相對單位，px是Pixel的縮寫,代表的是圖像上最小的一個點的大小，他會因為圖像大小的不同而改變， 比如1024x1024的一張圖，當他的長寬擴大一倍，而解析度不變（即1024x1024），那麼他的每個像素的大小都將擴大一倍
通常我們所指的4.5寸、5,0寸這些手機屏幕的大小指的是手機屏幕對角線的距離 （只包括可顯示部分，邊框部分不包括）
我們在開發移動設備的網站時，最常見的的一個動作就是把下面這個東西復制到我們的head標簽中：↓↓↓
該meta標簽的作用是讓當前viewport的寬度等於設備的寬度， 同時不允許用戶手動縮放
（ps：移動端下定寬寫法：viewport width=定值（設計稿寬），我們不設置縮放相關屬性，移動端瀏覽器會自動縮放頁面以適配屏幕）
rem 和 em 單位是由瀏覽器基於你的設計中的字體大小計算得到的像素值。em 單位基於使用他們的元素的字體大小。rem 單位基於 html 元素的字體大小。em 單位可能受任何繼承的父元素字體大小影響。rem 單位可以從瀏覽器字體設置中繼承字體大小。
（ps：一般情況下，不要給字體大小用rem）
3. 前端常見布局方式
常見的布局方式
常見的布局這么幾種單列水平居中布局, 一列定寬一列自適應布局, 兩列定寬一列自適應布局, 兩側定寬中間自適應三列布局。
一列定寬一列自適應
定位布局
左邊的寬度寫死，右邊盒子使用定位拉伸法實現，left等於左邊盒子的寬度，right等於0
.left-box{ width:200px; }
.right-box{ position:absolute; left:200px; right:0; }
或者左邊的定位寫死寬度，右邊的寫padding-left等於左邊的寬度（常用一點）
.left-box{ width:200px; position: fixed; height:100%; }
.right-box{ padding-left:200px;}
浮動布局
左邊的寬度寫死並且浮動，右邊盒子寫overflow:hidden;利用的是創建一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的布局環境，它內部元素的布局不受外面布局的影響
.left-box {
width: 200px;
height: 150px;
float: left;
background: #f22;
}
.right-box {
height: 200px;
overflow: hidden;
background: #cff;
}
兩列定寬一列自適應上面的布局方式同樣適用
常見的三列布局一般使用聖杯布局和雙飛翼布局。
聖杯布局和雙飛翼布局
兩者都屬於三列布局，是一種很常見的頁面布局方式，
三列一般分別是子列、主列和附加列，其中子列一般是居左的導航，且寬度固定；主列是居中的主要內容，寬度自適應；附加列一般是廣告等額外信息，居右且寬度固定。
聖杯布局
<div class="container">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
.container {
padding-left: 210px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
height: 300px;
}
.sub {
position: relative;
left: -210px;
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
}
.extra {
position: relative;
right: -190px;
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
}
雙飛翼布局
<div class="main-wrapper">
<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
.main-wrapper {
float: left;
width: 100%;
}
.main {
height: 300px;
margin-left: 210px;
margin-right: 190px;
background-color: rgba(255, 0, 0, .5);
}
.sub {
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: rgba(0, 255, 0, .5);
}
.extra {
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
background-color: rgba(0, 0, 255, .5);
}
倆種布局方式都是把主列放在文檔流最前面，使主列優先載入。
兩種布局方式在實現上也有相同之處，都是讓三列浮動，然後通過負外邊距形成三列布局。
兩種布局方式的不同之處在於如何處理中間主列的位置：聖杯布局是利用父容器的左、右內邊距定位；雙飛翼布局是把主列嵌套在div後利用主列的左、右外邊距定位。
其他的話還有
flex布局
Flexbox又叫彈性盒模型。它可以簡單使用一個元素居中（包括水平垂直居中），可以讓擴大和收縮元素來填充容器的可利用空間，可以改變源碼順序獨立布局，以及還有其他的一些功能。
Flex布局是我最喜歡的布局，合理使用它能夠大大減少布局方面的工作, 例如以上列舉的三列布局也可以使用flex輕松實現。此外在移動端使用flex也比較常見。
響應式布局
網頁可以自動識別設備屏幕寬度，根據不同的寬度採用不同的CSS的樣式，從而達到兼容各種設備的效果。
響應式布局使用媒體查詢(CSS3 Media Queries), 根據不同屏幕解析度採用不同CSS規則
流式布局
流式布常見的就是bootstrap了它提供了一套響應式，移動優先的流式柵格系統(grid system)，將屏幕分成12列來實現響應式的。它的實現原理非常簡單，Media Query加上float布局
4. 安卓移動開發的前端UI設計可以使用哪些不同的布局，這些布局適用於哪些情況
沒懂啥意思，是前端還是ui？
UI的話就是隨便設計，使用什麼布局是技術的問題，安卓的布局就是以下六大基本布局
線性布局
線性布局在開發中使用最多，具有垂直方向與水平方向的布局方式，通過設置屬性「android:orientation」控制方向，屬性值垂直（vertical）和水平(horizontal)，默認水平方向。
RelativeLayout
相對布局可以讓子控制項相對於兄弟控制項或父控制項進行布局，可以設置子控制項相對於兄弟控制項或父控制項進行上下左右對齊。
FrameLayout
幀布局或叫層布局，從屏幕左上角按照層次堆疊方式布局，後面的控制項覆蓋前面的控制項。
AbsoluteLayout
絕對布局中將所有的子元素通過設置android:layout_x 和 android:layout_y屬性，將子元素的坐標位置固定下來，即坐標(android:layout_x, android:layout_y) ，layout_x用來表示橫坐標，layout_y用來表示縱坐標。屏幕左上角為坐標(0,0)，橫嚮往右為正方，縱嚮往下為正方。實際應用中，這種布局用的比較少，因為Android終端一般機型比較多，各自的屏幕大小。解析度等可能都不一樣，如果用絕對布局，可能導致在有的終端上顯示不全等。
TableLayout
表格布局，適用於多行多列的布局格式，每個TableLayout是由多個TableRow組成，一個TableRow就表示TableLayout中的每一行，這一行可以由多個子元素組成。
GridLayout(網格布局)
作為android 4.0 後新增的一個布局,與前面介紹過的TableLayout(表格布局)其實有點大同小異;
5. 手機前端頁面尺寸
iPhone手機網頁的設計尺寸
iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI
安卓網頁的設計尺寸
320dp：一個普通的手機屏幕（240X320，320×480，480X800）
480dp：一個中間平板電腦像（480×800）
600dp：7寸平板電腦（600×1024）
720dp：10寸平板電腦（720×1280，800×1280）
ipad網頁的設計尺寸
iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI
以上是移動端的尺寸，單獨的如果某一個移動的網站的尺寸是沒有的，因為移動網站的一半情況是按照%比的尺寸 來自動適應屏幕的大小，或者也通過設置，iphone執行什麼尺寸，安卓情況執行什麼尺寸的。
6. 怎麼簡單的製作一個手機web前端預約界面
製作一個手機web前端：
工具：智能手機，普通智能手機：320×480 豎版。
節省樣式的載入
目前而言，要改變網站的配色方案或者寫iPad專用的樣式表，是通過如下代碼：
7. web前端切完圖怎麼布局
這問題問得有點，，，，一下都不知道怎麼回答了，，想了好一會。
這樣一問，斷定你是新手。
布局就是通過html各種標簽的位置組合來達到你設計頁面的效果。
建議你先用table吧,,,,,div css這些，如果在你問這樣的問題前提下，，估計你會遇到非常多問題。
Dreamweaver只是一個工具。。。8. 前端不知道怎麼布局
在談WEB前端怎麼布局前，我們先梳理前端的布局類型，具體有以下幾種：
1.靜態布局：不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規的pc的網站都是靜態（定寬度）布局的，也就是設置了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2.流式布局：布局特點是屏幕解析度變化時，頁面里元素的大小會變化而但布局不變。
3.自適應布局：自適應布局的特點是分別為不同的屏幕解析度定義布局，即創建多個靜態布局，每個靜態布局對應一個屏幕解析度范圍。
4.響應式布局：布局特點是每個屏幕解析度下面會有一個布局樣式，即元素位置和大小都會變。
那麼我們如何布局呢？通過以下幾點來選擇布局。
1.如果只做電腦端，最好的選擇是靜態布局。
2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，通過一份css+一份js調節font-size就搞定。
3.如果電腦端，移動端要兼容，而且要求很高，那麼響應式布局還是最好的選擇。前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。9. 手機前端頁面尺寸
iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隱藏URL與狀態欄)
iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隱藏URL與狀態欄)
Note2 360 * 567 (未隱藏URL與狀態欄)
iPad 3/4 768*928 (未隱藏URL與狀態欄)
GALAXY SIII 360 * 567 (未隱藏URL與狀態欄)
小米2A 360 *567 (未隱藏URL與狀態欄)
HTC G10 320 * 460
<meta name="viewport"
網頁手機wap2.0網頁的head里加入下面這條元標簽，在iPhone的瀏覽器中頁面將以原始大小顯示，並不允許縮放。
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
width - viewport的寬度 height -
viewport的高度
initial-scale - 初始的縮放比例
minimum-scale -
允許用戶縮放到的最小比例
maximum-scale -
允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
參考：
一、網頁手機wap2.0網頁的head里加入下面這條元標簽，在iPhone的瀏覽器中頁面將以原始大小顯示，並不允許縮放。
<meta name="viewport"
content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no">
其中： width - viewport的寬度 height - viewport的高度 initial-scale -
初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例
user-scalable -
用戶是否可以手動縮放c
二、關於meta的詳細介紹請參考
三、下文是關於Meta的例子的詳細介紹 原文地址
3. Meta元素可視區
默認情況下，iPhone上的Safari會象在大屏幕的
桌面瀏覽器那樣顯示你的頁面，寬度達到了980像素，然後縮小內容以適應iPhone的小屏幕，因此用戶在iPhone看這個頁面時感覺字體就比較小了，
也比較模糊，必須要放大才能看得真切，對於一個普通的Web頁面似乎可以接受，但對於一個常用的應用程序就沒幾個人能夠受得了。
幸運的是可以使用特殊的Meta元素可視區進行糾正：
<meta
name="viewport" content="width=device-width"/>
這個元素通知瀏覽器使用設備的寬度作為可視區的寬度，而不是默認的980像素了，我們可以看看兩個不同的例子。
例3(鏈接：
viewport.html)顯示了一個簡單的段落元素，沒有Meta元素可視區，字體有點模糊。在iPhone中運行的實際情況如下圖所示。
圖 1 無可視區的顯示效果
例4(鏈接：
/viewport.html)包括了一個可視區元素，現在設備寬度只有320像素，字體也比前一個例子更清晰了。在iPhone中運行的實際情況如下圖
所示。
圖 2 有可視區的顯示效果
另外，你還可以手動設置device-width的值，例如，假設你的博客頁面的寬度是750像素，那麼桌面屏幕最佳大小就是800x600像素，例
5(鏈接：
/fixed750.html)顯示了一個刪減版本，如果你在iPhone中瀏覽它，你會看到980像素剩下的空間都填充了白色。
為了消除額外的空間，可以使用meta元素可視區將寬度設為780像素：
<meta
name="viewport" content="width=780"/>
例6(鏈接：/fixed750-viewport.html)顯示了meta元素可視區布局被固定後的效果。
Meta元素可視區的內容可以包括多個逗號分隔的值，如initial-scale –
用戶最初看到頁面時的放大級別，對於Web應用程序，一個常見的設置是：
<meta
name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
這個元素設置寬度為設備的最大寬度，禁止用戶放大和縮小10. 手機html5前端開發用什麼框架
jquery mobile和bootstrap都是較好的框架。為了使用便利，下文列舉了目前最強大應用最廣泛的幾款前端開發框架。
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
2. Fbootstrapp
Fbootstrapp基於Bootstrap並且提供了跟Facebook iframe apps和設計相同的功能。包含用於所有標准組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導航等等，風格與Facebook類似。
3. BootMetro
BootMetro框架的靈感來自於Metro UI CSS，基於Bootstrap 框架構建，用於創建Windows 8 的Metro風格的網站。它包括所有Bootstrap的功能，並添加了幾個額外的功能，比如頁面平鋪，應用程序欄等等。
4. Kickstrap
Kickstrap是Bootstrap的一個變體。它基於Bootstrap，並在它的基礎上添加了許多app，主題以及附加功能。這使得這個框架可以單獨地用於構建網站，而不需要額外安裝什麼。你需要做的僅僅是把它放到你的網站上，然後用就可以了。
5. Foundation
Foundation 是一款強大的，功能豐富的並且支持響應式布局的前端開發框架，你可以通過Foundation快速創建原型，利用它所包含的大量布局框架，元素以及最優範例快速創建在各種設備上可以正常運行的網站以及app。Foundation在構建的時候秉承移動優先的策略，它擁有大量實用的語義化功能，並且使用Zepto類庫來取代jQuery，這樣可以帶來更好的用戶體驗，並且提高運行的速度。
6. GroundworkCSS
GroundworkCSS 是前端框架家族裡面新添的一款小清新框架。它是基於Sass和Compass的一個高級響應式的HTML5，CSS以及JavaScript工具包，可以用於快速創建原型並且建立在各種瀏覽設備上可以正常工作的網站和app。
7. Gumby
Gumby 是一款基於Sass和Compass的簡單靈活並且穩定的前端開發框架。
它的流式-固定布局（fluid-fixed layout）可以根據桌面端以及移動設備的解析度自動優化要呈現的網頁內容。它支持多種網格布局，包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網格系統上進行設計。
8. HTML KickStart
HTML Kickstart 是一款可以用來方便創建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干凈，符合標准以及跨瀏覽器兼容的代碼。
9. IVORY
IVORY 是一款輕量，簡單但是強大的前端框架，可以用於320到1200像素寬度的響應式布局。它基於12列的響應式網格布局，包含表格，按鈕，表格，分頁，撥動開關，工具提示，手風琴，選項卡等網站中常用的組件和樣式。
10.Kube
最後，如果你的新項目需要一款實在的，不需要復雜的額外功能組件的，足夠簡單的框架，那麼 Kube 將會是你正確的選擇。Kube是一款最小化的，支持響應式的前端框架，它沒有強加的樣式設計，因此給了你充分的自由來開發自己的樣式表。它提供了一些web元素的基本樣式，比如網格，表單，排版，表格，按鈕，導航，鏈接以及圖片等等。