四种方法实现两边固定,中间自适应布局(浮动 定位)

只利用浮动   左右浮动



利用浮动实现两边固定中间自适应布局



左左左


中中中


只利用定位







利用绝对定位实现两边固定中间自适应布局





左左左

中中中




淘宝双飞翼布局   左浮动





淘宝双飞翼布局实现两边固定中间自适应布局(需要容器)基本也是浮动







中中中



左左左





圣杯布局 浮动加定位





利用圣杯布局实现两边固定中间自适应布局 放到容器里(基本 也是浮动加定位)




中中中

左左左





总结:圣杯布局和双飞翼布局DOM结构基本一致,仅是CSS稍有不同,这意味着HTML结构和CSS布局在一定程度上解耦了,我们开发HTML代码时,从内容触发即可,无需过多考虑布局,这也是渐进增强在前端工作流程中的体现。

下面介绍一下渐进增强和优雅降级之间的区别:

渐进增强:progressive enhancement 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能以达到更好的用户体验。

优雅降级:graceful degradatiton 一开始就构建完整的功能,然后再根据低版本浏览器进行兼容。

区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给;而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要.降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

优雅降级观点:

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为是“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如IE Mozilla)的前一个版本。

在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨(poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的BUG之外,其他的差异将被直接忽略。

渐进增强观点则认为应关注于内容本身

内容是我们建立网站的诱因。有的网站展示它,有的收集它,有的寻求,有的操作,还有的网站会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是他被YaHoo所采纳并用以构建其“分级式浏览器支持(Graded Browser Support)”策略的原因所在。




你可能感兴趣的:(四种方法实现两边固定,中间自适应布局(浮动 定位))