zoom:1; 用法

最新推荐文章于 2018-02-25 17:13:00 发布

网游草

最新推荐文章于 2018-02-25 17:13:00 发布

阅读量5.9k

点赞数

分类专栏： html/css 文章标签： float button border input xhtml class

html/css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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" />
<title>标题</title>
<meta name="Keywords" content="关键字" />
<meta name="Description" content="网站描述" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<style type="text/css" title="">
/*reset begin*/
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
li{list-style:none;}
fieldset,img{border:0;}
table{border-collapse:collapse;border-spacing:0;}
q:before,q:after{content:'';}
abbr[title]{border-bottom:1px dotted;cursor:help;}
address,cite,dfn,em,var{font-style:normal;}
button,input,select,textarea{font-size:100%;}
legend{color:#000;}
code,kbd,samp{font-family:"courier new",monospace;}
hr{border:none;height:1px;}
body,button,input,select,textarea{font:12px/1 arial,tahoma,helvetica,simsun,san-serif;}
/*reset over*/

.clear{
display: block; clear:both; font-size:0; height:0; line-height:0;
}
/*案例2*/

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
zoom:1; /* 针对IE6.0*/
overflow:hidden; /*在没清除浮动的时候针对 FF*/
}  
#floatbox {
float: left;
width: 100px;
height: 100px;
border: 1px solid #0000FF;
background: #00FF00;
}

</style>
</head>
<body>
<!--案例1 -->
<span>案例1:</span>
<div style="background:#990000; padding:30px; zoom:1;"> /* 在没设置宽度确切值的时候用ZOOM*/
<div style="float:left; background:#CCC;">BOX2<br>BOX2<br>BOX2<br>BOX2<br>BOX2</div>
<div style="float:left; background:#757575;">BOX1<br>BOX1<br>BOX1<br>BOX1<br>BOX1</div>
<div style="float:left; background:#CCC;">BOX2<br>BOX2<br>BOX2<br>BOX2<br>BOX2</div>
<div style="float:left; background:#757575;">BOX1<br>BOX1<br>BOX1<br>BOX1<br>BOX1</div>
<div style="float:left; background:#CCC;">BOX2<br>BOX2<br>BOX2<br>BOX2<br>BOX2</div>
<div style="float:left; background:#757575;">BOX1<br>BOX1<br>BOX1<br>BOX1<br>BOX1</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<!--案例2 -->
<span>案例2:</span>

<div id="nofloatbox">
<div id="floatbox"></div>

</div>

</body>