CSS网页实例 利用box-sizing实现div仿框架结构实现代码
发布时间：2009-12-08 03:42:37 作者：佚名 
我要评论
我要评论利用box-sizing实现div仿框架.需要的朋友可以参考下。
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ]
[操作系统：Windows]
先看代码：
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
[操作系统：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正常运作）。、
现在的问题就是是不是要采用这个方法了，给点优劣的对比，大家自行斟酌吧：
比较使用绝对定位的方法来实现，这个方法在目前主要存在两个优势：
- 针对每种浏览器基本使用的同一方法，css代码简单，易修改、易理解。
- 兼容。绝对定位的方法在OP10下存在暂时找不着修复bug的办法，只好绕个弯走了。
它最大的劣势就是欠灵活，如果没有IE6，我想我是坚决选择绝对定位的方法的。
以下为应用实例demo。
提示：您可以先修改部分代码再运行
一个应注意的问题：
不要给body以overflow:hidden，它将会无情地隐藏掉任何在它以外的任何东西，包括top/bottom（header/footer）；
一个应理解的要点：
[100%+(N)px] 的高度产生的方法：div { height:100%; padding-top:(N)px;}。
相关文章
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
div往往会因为内边距的设置而使整个层宽度和高度超出预定范围,而CSS3的box-sizing属性可以简单解决这样的现象,下面我们就来详细解说使用CSS3的box-sizing属性解决div宽高被2016-06-28- 一说到CSS的盒模型(Box model)我想很多人都会比较烦，特别是对于新手，然而这个Box model又是我们CSS运用中比较重要的一个属性，box-sizing 属性允许您以特定的方式定义匹2015-04-09
- 这篇文章主要介绍了CSS3属性box-sizing使用指南,需要的朋友可以参考下2014-12-09
- CSS3 box-sizing属性，在很多新手朋友来看是比较陌生的,接下来介绍CSS3 box-sizing使用及注意部分，感兴趣的朋友可以了解下2013-01-08
- 说到 IE 的 bug，一个臭名昭著的例子是它对于“盒模型”的错误解释：在 IE5.x 以及 Quirks 模式的 IE6/7 中，将 border 与 padding 都包含在 width 之内。这为前2009-04-17
- 下面小编就为大家带来一篇关于box-sizing的全面理解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-28
最新评论