html中zoom方法,CSS中zoom属性或overflow:auto的使用方法

2024-04-15 07:35:58

这次给大家带来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的私有属性来达到彻底清楚浮动的兼容效果。

实例代码

MJBlog

.box{

width:300px;

height:auto;

background-color: #000000;

margin:100px auto;

padding:5px;

}

.box h2{ 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;}

这个没加overflow:auto和zoom:1属性，没有清除浮动，底下的li产生溢出重叠现象

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

这个加overflow:auto和zoom:1属性，清除浮动，正常

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

福州酒吧万圣节派对活动

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

常用的颜色渐变方法总结

2D模拟实现摩天轮旋转动画特效

CSS3的box-sizing属性图文教程

html中zoom方法,CSS中zoom属性或overflow:auto的使用方法相关推荐

css 中的zoom,对CSS中zoom属性的总结
在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...
ci框架中引入css,php ci框架中加载css和js文件失败的原因和解决方法
php ci框架中加载css和js文件失败的原因和解决方法发布时间:2021-07-01 12:08:38 来源:亿速云阅读:50 作者:chen 本篇内容介绍了"php ci框架中加载 ...
html中zoom方法,css中的zoom的作用
原标题:css中的zoom的作用小标签大用处,今天重庆IT培训www.ztxuexi.cn就给大家说说css中的zoom的作用 : 1.检查页面的标签是否闭合不要小看这条,也许折腾了你两天都没有解 ...
html zoom中心,css中的zoom的使用
css中的zoom的使用 zoom : normal | number normal : 默认值.使用对象的实际尺寸 number : 百分数 | 无符号浮点实数.浮点实数值为1.0或百分数为100% ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
css中的 type,css中如何使用list-style-type属性
css中如何使用list-style-type属性发布时间:2020-09-24 10:05:15 来源:亿速云阅读:88 作者:小新小编给大家分享一下css中如何使用list-style-ty ...
灰白色在html中怎么写,css中怎么让字变灰？
css中怎么让字变灰?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css中怎么让字变灰? 在css中可以使用color属性,设置值为#CCC或rgb( ...
html css中文字段落,css中文字行间距怎么设置？
在网页的布局中几大段文字挤在一起总归是不好看的,这时候我们就需要来设置行间距来让文字看起来不拥挤,也让整个页面看起来美观整洁,那么,行间距该如何设置呢?本篇文章就来给大家介绍一下css行间距的设置方法 ...
angularjs中ng-show与css中display:none的优先级问题
angular中ng-show 与 css的display:none 用过angular.js的童鞋都知道,ng-show指令在其条件符合时可以使元素显示,条件不符合时使元素隐藏. 我却在前两天写代码 ...

最新文章

热门文章