个人感觉Web前端最难的就是文档定位的这一块儿，用起来感觉要比Swing和WPF困难，在Swing中可以使用多种布局，比如BorderLayout / GridLayout / BoxLayout等等，而且Java是强语言，不管用相对布局还是绝对布局，用Java程序控制使用起来比较顺手。WPF更简单，VS的可视化工具不用多说，可算“史上最强大的”开发工具。一套拖拉拽，然后再适当改改配置文件，写写C#代码什么的，也很容易。

     在Web中要进行元素定位或者文档布局可使用的方法很多，其实有的时候太灵活了用不是什么好事儿，起码对于我们开发来说，灵活的文档布局就需要我们有更多的经验，掌握更多的资料，来挑选最“合适的”技术。

1.Table布局

       Table布局是最简单也最让人熟知的，很多初学Web开发技术的都会用Table进行布局，Table布局对初学者来说没什么不好，简单，好控制，基本上想要什么结构都能“画”出来。很多Web可视化编辑器也都支持Table的托拉拽布局。

2.Iframe布局

      我认为这可以称为一种布局方式，比Table还简单，后台管理框架最常用的布局方式，把一个页面拆分为多个页面，也不错。尽管很多资料都在说不用iframe什么的，但是现在很多Web应用都还在用，适当使用，很有好处。比如163，比如office online都有适当的使用，虽然不一定是用来布局。

3.DIV+CSS布局

      现在的主流布局方式，利用流式、相对、绝对定位等方式，能编写非常精美的高效的页面。DIV布局比Table布局要难，而且要注意浏览器兼容性，要不然页面很容易乱掉。DIV布局相对Table布局的好处，网上可以搜到很多，不多说。记得有一次面试还被问过DIV布局和Table布局的区别，最重要的一点：DIV相对Table来说性能要高，可以按层渲染，而Table要整体刷新，所以会有很明显的延迟。

        从浏览器渲染的角度来说，table的某个td进行reflow很有可能导致整个table的reflow，这是比较恐怖的。

4.技术选择

       在实际中选用哪种布局方式，没有什么标准，而且Web前端本身就没那么统一的标准。选用什么技术看实际项目，以及项目成本和要求，而且经常会3种技术相结合，比如我们现在正在使用。外部用iframe技术加载内容页，而内容页，用DIV技术进行响应式布局；但是控件，先用Table进行框架布局，然后用DIV+CSS在局部进行绘制于控制，这样能有很好的页面稳定性。当需要展示数据的时候，用Table非常容易。

5.三种文档定位方式

      在DIV+CSS的布局中，很重要的一点就是文档定位，分三种：普通流、浮动和绝对定位，固定定位。主要理解元素的display / position已经float属性，想要进行精确定义一定要理解Box Model也就是盒子模型，这个很复杂，网上教程很多，先要理解W3C的定义，然后看看IE这个奇葩有什么不同，其实Box Model就是对一个元素如果确定大小的解释。

      W3C很明确的告诉我们，在HTML页面中一切皆是框，通过display属性，我们可以让元素变成不同的框，或者用none属性，让它不出现在renderTree中，然后通过position属性，告诉浏览器，这个元素该相对谁来定位，最后通过float、top、left等属性，控制定位时的一些具体内容。

      在H5中有一个Box-sizing属性，这个已经被绝大部分浏览器支持了，使用这个属性，我们可以指定元素的盒子模型，很多时候，用IE的盒子模型是很利于编程计算的，比较，我们希望指定了一个元素的width后，就不在程序中考虑它的border、padding等内容了。这样可以很好的降低程序复杂度。