一、回顾布局的前世今生
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
这是所谓的最早的网页的样子：从中我们可以看到，没有任何的css痕迹，完全就是一个纯html。这应该就是早期网页发展的雏形了。
很早以前有看过资料，可惜的是我现在暂时找不到了。印象中，最早的网页用途是研究机构单纯的展示数据用的。展示数据用的方式选择了表格方式，因此很自然的先入为主从表格布局开始了所谓的布局生涯。在 Web 开发的早期阶段，布置网页的最常见方式就是使用表格。使用表格进行网页布局也很快成为了人们最早期的一种网页设计方法，在当时还比较落后的互联网背景下也曾大受欢迎。
回顾过去，Table布局的优点是简单易用。然而缺点也很明显，比如：
1、代码很容易臃肿，不管内容多少，你都要table、tr、td才能开始写内容。
2、页面内容和修饰没分离，语义不明，代码繁乱不利于修改。table顾名思义是表格、数据的意思，用在全局网站布局似乎也真的不合适。
3、 虽然Table在表现上有利有弊，但在越来越多可能性和变化性的web设计实现上已经显的力不从心了。
我们现在随便打开一个主流网站，看到的网站代码几乎都会是html（div）+css方式布局的。因为DIV是标准，是大势所趋。使用 CSS的标准布局，并不是简单地用div等元素代替table元素，而是要从根本上改变对页面的理解方式，达到结构和表现相分离。
在当前的一些布局中，似乎大部分采用的还是固定宽度的布局方式。不过，传统的固定宽度布局方式也正在走向现代的自适应响应式布局方式。在走向现代的自适应响应式布局方式之前，我们可以来看看传统的以及现在依然正在进行时的一些布局方式的实现。
在正式的开始传统布局实现之前，我们重新来梳理一些必要的基本知识：
Block element 块级元素 （块属性）
顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的div、h、p、ul默认状态下都是属于块级元素。块级元素比较霸道，默认状态下每次都占据一行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能。对应的有一个专业术语叫BFC（Block Formatting Context），可用于布局。
Inline element 内联元素 （行属性）
通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度都是不可以设置的，其高宽度就是自身文字（可通过padding撑开）或者图片的宽度。我们常用到的a、span、em、img、input都属于内联元素。内联元素的显示特点就是像文本一样的显示，不会独自占据一个行。当然块级元素也能变成内联元素，那就是通过css的display:inline或者float来实现。对应的也有一个专业术语叫IFC（Inline Formatting Context），可用于布局。
- 1、关于布局居中的问题(核心代码是什么，控制的本质是什么？)，居中又分水平居中和垂直居中。
水平居中：
正常情况下，人们常用的居中的代码似乎主要有这么几种：
1、text-align：center
2、margin-left：auto；margin-right：auto；width：xxx；
3、center标签 (不推荐，已被淘汰)
4、align：center；（非style，不推荐）
通过这些基础的居中代码，我们来看看自适应的居中布局。似乎单纯的行属性是没法居中的，于是乎就有了常见的内联块布局方式。实现方法是把内联元素变成块元素（display:block）或者嵌套在块属性元素里(比如父级加个div、p什么的)，好像我们大部分都不知不觉的在用这种方式。
还有常见的负边距布局。比如两列登高布局：关键点是父级要有overflow:hidden;然后两列都设置padding-bottom:9999px;margin-top:-9999px;
垂直居中：
正常情况下，人们常用的居中代码也似乎主要有这么几种：
1、line-height:xx;与外部标签盒子的高度设置一致，单行文字默认就是居中的。
2、margin或padding设置
大小不固定的图片和多行文字的垂直水平居中，我们直接来看张鑫旭的博客好了：
http://www.zhangxinxu.com/wordpress/?p=61
http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html
二、目前一些主流的框架
通常情况下，我们为了提高开发效率，所以总是会想有没有什么现成的框架可以直接使用？截至目前，因为进入前端的时间也不长，做的网站规模都比较小，所以我目前还没用过任何框架，但是一些热门框架的名称（比如bootstrap、foundation）却一直会出现在我的视野里。
我本身不一定会用什么框架，但是框架背后的东西我很有兴趣。我们可以从框架中借鉴到什么有利于我们工作的东西？目录组织？css规范？运用方式？Hack及响应式的处理？
假设，我要实现一个自适应的布局，你们会怎么做？会用到哪些关键的技术，css属性和js？我们现在一起来做一个自适应布局？
就我个人而言，最后框架肯定是会有的，从各大主流框架中吸收自己要的然后重新组合成自己的框架。
三、如何选择对应布局方式，如何取舍，现在又有什么前沿的布局方式
现在很明显的随着3G/4G高速网络、wifi等的普及，手机、笔记本和一些移动终端设备的出现对传统的宽度固定布局提出了新的要求。
所以，从「固定」到「自适应」或「响应式」：一种向移动端友好方向迈进的方式也必然要出现。
固定宽度布局和自适应响应式布局，我们来一个简要的优缺点对比吧：
1.优点
- 固定宽度布局更容易实现，在设计方面更容易定制。
- 在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的麻烦。
- 相对的兼容性好，所有浏览器都支持。
- 小分辨率下，网页的主体内容仍然有足够的宽度易于阅读。
2.缺点
- 对于使用高分辨率的用户，固定宽度布局会留下很大的空白。
- 屏幕分辨率过小时会出现滚动条。
- 无缝纹理，连续的图案需要适应更大的分辨率才能正常展示。
- 固定宽度布局一般在可用性上得分较低，很显然的对移动设备支持不是很友好。
作为个人我自然会偏向于自适应布局，但是不是绝对的说什么都要自适应布局才行。
截至目前，Flexibox Box（弹性布局或者也说伸缩性布局）出现的字眼越来越频繁了，这似乎是一个趋势并正在走向主流。
那么，什么是Flexibox Box？（一开始是box，然后是flexbox，现在最新版本的属性名称是flex。）
简单的说，这是一个在css3中出现的新的布局属性。旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者是动态的。Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。
为什么是Flex？
我们知道移动端两大主流平台android和ios的浏览器都是webkit内核的，而webkit内核的浏览器对css3支持是最好的，也是走在前列的。
一个在线生成flex布局框架的网站：http://flexiejs.com/playground
详情：http://www.w3.org/TR/css3-flexbox
最后我们来看一下手机移动端的布局
做过移动端网页的人应该会很熟悉跟这一行类似的标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no” >其中：viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例为1.0，即网页初始大小占屏幕面积的100%，不允许用户缩放界面。
当然，作为一种相对新生的事物，通常情况下自然也就只能作用在新生的浏览器上。不过其实还好，除去IE6、7、8，几乎其他的浏览器包括移动端都是支持这个设置的。
网页的宽度高度可以自动调整后，那么接下来我们要面对的就是内容如何自适应了。要想实现自适应，我们要改变一些什么习惯或者有什么新的特性可以使用呢？
一个很明显的特点的就是：单位的改变，改用相对的单位。比如：em、rem、%、px。其中图像自适应有一段神奇的代码，img{max-width:100%;height:auto;}
强烈推荐一个移动端资源的 github：https://github.com/jtyjty99999/mobileTech
一个东西再先进再强大，最终我们看的还是是否接地气。新技术可以无忧的全兼容的正常使用么？想太多了，那是只存在于理想国度。
PS：
这个是个人2014年6月在福建前端联盟交流会上的一些文字内容（厦门小鱼网提供场地）。
