CSS网页实例 利用box-sizing实现div仿框架结构实现代码


[参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[操作系统:Windows]
先看代码:



提示:您可以先修改部分代码再运行

关键部分

html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;}

原理大概就是这样的

千言万语抵不过一副画,通过整容前后的对比,大家应该能看出box-sizing:border-box的作用了。

了解box-sizing的同学们应该知道,它来自离微国比较遥远的css3世界,因此IE6/IE7是不支持的,但我很负责任滴说:本demo正常兼容IE6/IE7。

因为……

IE6/IE7下,<html>的box-sizing默认值本就是border-box(注:IE7有一点点不正常,overflow:hidden后神志有所恢复,将不影响本demo正常运作)。、

现在的问题就是是不是要采用这个方法了,给点优劣的对比,大家自行斟酌吧:

比较使用绝对定位的方法来实现,这个方法在目前主要存在两个优势:

  1. 针对每种浏览器基本使用的同一方法,css代码简单,易修改、易理解。
  2. 兼容。绝对定位的方法在OP10下存在暂时找不着修复bug的办法,只好绕个弯走了。

它最大的劣势就是欠灵活,如果没有IE6,我想我是坚决选择绝对定位的方法的。

以下为应用实例demo。



提示:您可以先修改部分代码再运行

一个应注意的问题

不要给body以overflow:hidden,它将会无情地隐藏掉任何在它以外的任何东西,包括top/bottom(header/footer);

一个应理解的要点

[100%+(N)px] 的高度产生的方法:div { height:100%; padding-top:(N)px;}。




相关阅读:
javascript 必知必会之closure
HTML教程:html水平线段<HR />
Linux系统下使用Crontab修改库表的疑惑
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
浅谈MySql的存储引擎(表类型)
1.11 ASP内建对象Server
消除计算机风扇噪音的方法
Windows 7账号自动登录任务栏设置会回到默认设置
Oracle 10g无法正常启动控制台服务问题解决
VBS教程:VBscript属性-Global 属性
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
SQL 新增/修改 表字段列的类型等
HTML基础 HTML的组成结构
ACCESS数据库向MySQL快速迁移小程序(二)
快速导航

Copyright © 2016 phpStudy |