常用布局

编码方面的常用布局有：
1.语义化标签(包含div+css)布局；
2.frameset的iframe框架(特殊地方使用)布局；
3.表格布局

frameset和div常规布局的优缺点比较

DIV传统布局与frameset相比的缺点与解决办法：
1，不可能快速的实现“局部”刷新那种效果，要转用ajax方式实现真正意义上的局部刷新。
2，页面代码不能高度重用，但是可以使用服务器动态语言里的include等语句实现。
所以DIV布局方式与frameset相比之下：前者可以完全弥补掉frameset的一些局限和缺点，而且也可以使用其他手段完成frameset的优点，且实现难度较小。

Table的布局容易上手，可以形成复杂的变化，简单快速，表现上更加“严谨”，在不同的浏览器中都能得到很好的兼容。但是如果你的网站有布局变化的需要时，这样table的布局就会重新设计，再加table分行分列什么的，页面变化的比例会稍大一些，这就会影响你前期做好一些排名和搜索基础了，div就不同了，你可以把大部分更新的东东写在CSS里，页面的布局和改动不会太大，也就对搜索引擎的影响不大了。

常见的网页布局方式主要有：
1.响应式布局；
2.自适应布局；
3.静态布局；
4.流式布局。

响应式布局与自适应布局的区别：转载 响应式布局跟自适应布局的不同总结

第一点：自适应的目的是在不同分辨率的不同设备上面显示相同的页面。
手机的屏幕比较小，宽度通常在600像素以下，pc的像素一般在1000像素以上，部分配置高的笔记本在2000像素以上的也有，同样的页面要显示在不同的设备上面，还要呈现出满意的效果，不是一件容易的事情。因此就有人想出了一个办法，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕的宽度，自动调节网页的内容大小，但是无论怎么样子，他们的主体的内容和布局是没有变化的。

响应式的概念应该是覆盖了自适应，但是包括的东西更多了。响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。
响应式布局的一些技术点纪录：
(1)允许网页的宽度自动的调整
(2)尽量少使用绝对的宽度，多点百分比
(3)相对大小的字体:字体不要使用px写死，最好使用相对大小的em，或者高清方案rem，这个不限制与字体，别的属性也可以这么设置
(4)流式布局，float等float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
(5)选择加载css，，这个意思是如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。

转：响应式与自适应的原理相似，都是检测设备，根据不同设备采用不同的css，且css都是采用的百分比而不是固定的宽度，不同点是，响应式在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。
自适应布局因为实施起来代价更低，测试更容易，往往成为更切实际的解决方案，在资源有限时就可以让它出马。
流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载（例如现在的微博和QQ空间等），静态的就是采用固定宽度。