CSS中的zoom和overflow:auto属性有什么用

本文讲解"CSS中的zoom和overflow:auto属性有什么用",希望能够解决相关问题。

前言

其实在CSS中的Zoom这个属性一般不为人知,甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。

因为Zoom属性是IE浏览器的专有属性,所以他清除浮动作用只适用于IE浏览器,而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用这两个属性。

我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局,但是如果外面这个大容器的没有设置固定的高度值,那么大容器高度不会随着里面小容器高度变化而变化,产生内容溢出的现象,这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性,可以解决IE7和火狐浏览器下的清除浮动问题,但是IE6下不生效,所以我们还需要使用zoom这个IE的私有属性来达到彻底清楚浮动的兼容效果。

实例代码

<!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>MJBlog</title>
<style type="text/css">
.box{ 
     width:300px;
  height:auto;
  background-color: #000000;
  margin:100px auto;
  padding:5px;

  }
.box h3{ width:300px; line-height:24px; color:#CCCCCC;}  
.xx { width:140px; float:left; height:24px; overflow:hidden; padding:0px 5px; line-height:24px; color: #FF9933;}
.za{overflow:auto; zoom:1}
.zb{overflow:auto;}
.zc{zoom:1;}     
  
</style>
</head>

<body>


<div class="box">
<h3>这个没加overflow:auto和zoom:1属性,没有清除浮动,底下的li产生溢出重叠现象</h3>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
</div>

<div class="box za">
<h3>这个加overflow:auto和zoom:1属性,清除浮动,正常</h3>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
<div class="xx">福州酒吧万圣节派对活动</div>
</div>

</body>
</html>

css的基本语法是什么

css的基本语法是:

1、css规则由选择器和一条或多条声明两个部分构成;

2、选择器通常是需要改变样式的HTML元素;

3、每条声明由一个属性和一个值组成;

4、属性和属性值被冒号分隔开。

关于 "CSS中的zoom和overflow:auto属性有什么用" 就介绍到此。希望多多支持编程宝库

css如何在不同分辨率下的电脑正常显示定位位置:本文讲解"css怎么在不同分辨率下的电脑正常显示定位位置",希望能够解决相关问题。首先要明白如下几个原理:1、笔记本电脑的分辨率一般为1366*768附近,PC电脑的分辨率一般为 1920*1 ...