CSS网页页面案例运用box

日期：2021-03-13 类型：科技新闻我要分享

关键词：通道抠图，怎么在图片上编辑文字，创客贴作图神器，免费图片设计制作在线，背景透明图制作

[参加检测的访问器：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=gb2312" /> <meta name="author" content="Chomo" /> <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:⑴00px; height:100px; background:#f60;} .side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:⑶px; 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>

提醒：您能够先改动一部分编码再运作

重要一部分：

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

基本原理大约便是这样的：

千言万语抵但是1副画，根据整容前后左右的比照，大伙儿应当能看出box-sizing:border-box的功效了。

掌握box-sizing的同学们应当了解，它来自离微国较为漫长的css3全球，因而IE6/IE7是不适用的，但我很承担责任滴说：本demo一切正常适配IE6/IE7。

由于……

IE6/IE7下，<html>的box-sizing默认设置值本便是border-box（注：IE7有1点点不一切正常，overflow:hidden后神志有一定的修复，将不危害本demo一切正常运行）。、

如今的难题便是是否要选用这个方式了，给点好坏的比照，大伙儿自主掂量吧：

较为应用肯定精准定位的方式来完成，这个方式在现阶段关键存在两个优点：

对于每种访问器基础应用的同1方式，css编码简易，易改动、易了解。
适配。肯定精准定位的方式在OP10下存在临时找不着修补bug的方法，只好绕个弯走了。

它最大的缺点便是欠灵便，假如沒有IE6，我想我是果断挑选肯定精准定位的方式的。

下列为运用案例demo。

<!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=utf⑻" /> <meta name="author" content="Chomo" /> <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; position:relative; overflow:hidden;} html,body { height:100%;} .top { position:relative; margin-top:⑴00px; height:100px; background:#f60;} .side { position:relative; height:100%; background:#fc0; overflow:auto; width:200px; float:left; margin-right:0 !important; margin-right:⑶px; overflow:auto;} .main { position:relative; overflow:hidden; height:100%; background:#f30; padding-top:100px; margin-top:⑴00px; top:50px; margin-left:200px; _margin-left:0; z-index:2;} .main iframe { height:100%; width:100%; background:#fff; position:absolute; left:0; top:0;} .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"> <iframe frameborder="0" src="http://www.baidu.com/"></iframe> </div> <div class="bottom"> bottom </div> </body> </html>

提醒：您能够先改动一部分编码再运作

1个应留意的难题：

不必给body以overflow:hidden，它可能无情地掩藏掉任在哪它之外的任何物品，包含top/bottom（header/footer）；

1个应了解的关键点：

[100%+(N)px] 的高宽比造成的方式：div { height:100%; padding-top:(N)px;}。

上一篇：免费h5在线制作—微信公共号众平台制作代码微返回下一篇：没有了

CSS网页页面案例 运用box

CSS网页页面案例运用box