css制作网页咨讯框,CSS制作网页实例:DIV仿框架结构分享

[参与：操作：Windows]

先看代码：

运行代码框

/p>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

关键部分：

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的同学们应该知道，它来自离微国比较遥远的

因为……

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

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

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

针对每种浏览器基本使用的同一方法，

兼容。绝对定位的方法在OP10下存在暂时找不着修复bug的办法，只好绕个弯走了。

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

以下为应用实例demo。

运行代码框

利用box-sizing实现div仿框架

top

side

bottom

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

一个应注意的问题：

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

一个应理解的要点：

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

—-想了解更多的linux相关异常处理怎么解决关注