当前位置:清晨 » 站长笔记 » css中的zoom的作用

css中的zoom的作用

发布日期:2015年6月16日 11:06:08 点击量: 1,073

宝塔服务器面板,一键全能部署及管理,送你¥3188礼包,点我领取,简单好用的 Linux/Windows 面板

zoom这个特性是IE特有的属性。
zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题,功能相当于overflow:auto,同样也可以用height:1%来代替zoom:1。所以一般要在浮动元素的父元素加上overflow:auto;zoom:1;。这样,子元素浮动,父元素再也不会不自动跟子元素扩大了。

在现代浏览器,如果子元素float,则父元素不会自动被撑开

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
width:200px;
}

#floatbox {
float: left;
width: 100px;
height: 100px;
border: 1px solid #0000FF;
background: #00FF00;
}
</style>

 

css中的zoom的作用

如果给父元素加上overflow:hidden

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
width:200px;
zoom:1;
overflow:hidden;
}

 

或者给最后一个子元素加上clear:both

#nofloatbox > div:nth-child(2){
clear:both;
}

 

都会有清除浮动的效果.

css中的zoom的作用

 

zoom:1是针对ie的属性,可以激活hasLayout属性,关于hasLayout

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)

 

要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误,就是源于 haslayout。如果它设置成了true,它就不得不去渲染它自己,因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词,如果haslayout没有被设置成true,那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。

 

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
width:200px;
zoom:1;
/*overflow:hidden;*/
}

css中的zoom的作用
<body>
<div id="nofloatbox">
<div id="floatbox"></div>
<div></div>
</div>


关键词:

本文网址:https://www.menglei.info/1765/,转载请以链接形式注明出处,谢谢合作!

zoom

老薛主机专属优惠码: PT ,有需要购买的同学可以使用.可享受30%的优惠.

联系站长: shadoweb@qq.com QQ: 925474725

发表评论

电子邮件地址不会被公开。 必填项已用*标注