CSS网页实例利用box-sizing实现div仿框架结构实现代码(1/2)

来源：网络整理时间:2016-06-21 关键词:

本篇文章主要介绍了" CSS网页实例利用box-sizing实现div仿框架结构实现代码"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： [参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ] [操作系统：Windows] 先看代码： &...

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c /> <meta name="author" c /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>利用box-sizing实现div仿框架</title> <style type="text/css"> * { margin:0; padding:0;} html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; padding:100px 0; overflow:hidden;} html,body { height:100%;} .top { position:relative; margin-top:-100px; height:100px; background:#f60;} .side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:-3px; overflow:auto;} .main { position:relative; overflow:auto; height:100%; background:#f30;} .bottom { position:relative; height:100px; background:#f60; clear:both;} </style> </head> <body> <div> top </div> <div> side </div> <div> main </div> <div> bottom </div> </body> </html>
/g,''); delpost.runcode8 .value = ffcod; 提示：您可以先修改部分代码再运行

关键部分：

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

原理大概就是这样的：

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

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

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

因为……

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

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

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

1 2 下一页

上一篇：CSS样式表与HTML网页的关系分析 下一篇：IE6下CSS定义DIV高度的问题

CSS网页实例利用box-sizing实现div仿框架结构实现代码(1/2)

相关图片

相关文章

CSS网页实例 利用box-sizing实现div仿框架结构实现代码(1/2)

相关图片

相关文章

CSS网页实例利用box-sizing实现div仿框架结构实现代码(1/2)