前端开发之初探四
布局
第一节、静态布局（Static Layout）
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。
1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。
2、设计方法：
PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
在移动端开发中采用静态布局的两种方式：
（1）在viewport meta标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。
（2）设在viewport meta标签上设置content”width=640,user-scalable=no，页面的各个元素也采用px作为单位。由于640px超出了手机宽度，浏览器会自动缩小页面至刚好全屏。
优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。
第二节、流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。
1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。（这就导致如果屏幕太大或者太小都会导致元素无法正常显示）
2、设计方法：使用%百分比定义宽度，高度大小都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
第三节、自适应布局（Adaptive Layout）
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局
第四节、响应式布局（Responsive Layout）
随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式几乎已经成为优秀页面布局的标准。
1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
第五节、弹性布局（rem/em布局）
1、rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。
2、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。
3、这类布局的特点是，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
4、浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。
那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。
针对这个现象，可以尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。
5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }
6、使用rem单位的弹性布局在移动端也很受欢迎。
rem与em、px的区别：
px：像素，比较精确的单位，但不好做响应式布局
em：以父节点font-size大小为参考点，标准不统一，容易造成混乱
REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。
优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
宽高自适应：网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。
元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。
（1）宽度自适应
元素宽度设置为100%。（块元素宽度默认为100%）
（2）高度自适应
1)元素高度自适应窗口高度
设置方法：html,body{height:100%;}
2)自适应元素高度：height:100%;
（3）元素具备最小高度的自适应
min-height属性：最小高度；(IE6浏览器不识别该属性)
hack1:min-height:value; _height:value;
hack2:min-height:value; height:auto!important; height:value;(建议使用)
注：height属性在IE6里就类似min-height作用。
min-height（最小高度）
max-height(最大高度)
min-width(最小宽度)
max-width(最大宽度)
注：IE6及以下版本不识别该组属性。
（4）浮动元素父元素高度自适应（高度塌陷）
hack1：给父元素添加声明overflow:hidden;
hack2:在浮动元素下方添加空div,并给该元素添加声明：clear:both;height:0;overflow:hidden;
hack3:万能清除浮动法
:after{content:”.”;display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
