利用box-sizing实现div仿框架

发布时间：2018-09-05 23:50:55 所属栏目：运营来源：站长网

导读：[参加测试的赏识器：IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome 2 ] [操纵体系：Windows] 先看代码： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3

[参加测试的赏识器：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" content="text/html; charset=gbk" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.veryhuo.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 class="top"> top </div> <div class="side"> side </div> <div class="main"> main </div> <div class="bottom"> bottom </div> </body> </html> <center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

道理或许就是这样的：

改变<html>的box-sizing

千言万语抵不外一副画，通过整容前后的比拟，各人应该能看出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。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/2

尾页

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要