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元素的基本样式，比如网格，表单，排版，表格，按钮，导航，链接以及图片等等。