CSSのzoom属性の詳しい紹介-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのzoom属性の詳しい紹介

零下一度

Jul 26, 2017 am 11:27 AM

csszoom

Zoom 属性は、オブジェクトのズーム率を設定または取得するだけでなく、IE の haslayout 属性のトリガー、float のクリア、マージンのオーバーラップのクリアなどの機能も備えています。ただし、Firefox はzoom属性をサポートしていませんが、webkitカーネルブラウザではzoom属性もサポートできることに注意してください。

1. 以前の YY

まず、お気づきかわかりませんが、タイトルの「Clear Floats」には引用符が付いています。私は最近、このいわゆる「クリアフロート」が正確であるかどうか疑問に思っています。特に私たちの集団主義社会では、人々は集団心理を持っています。アジアの集団主義文化（日本など）では、それは忍耐、自制心、成熟の象徴です。しかし、時には不正確な意見を持ち続けることもあります。小学校の時に「2つの鉄球が同時に地面に落ちる」という話をまだ覚えていますか？

私はここで個人的かつ感情的なことを言うつもりです、そしてそれへの反論は大歓迎です。外国のテクノロジーで「クリアフロート」という言葉をよく見かけますが、これは「クリアフロート」と訳されます。私はこの業界に不慣れなので、「クリアフロート」が本当にそれを意味するかどうかは推測することしかできませんが、広く使用されています。広く使用されるほど、その不正確さが見つかる可能性は低くなります。

私は最近「浮きの除去」についていくつかのことを考えましたが、「浮きの除去」という用語について考えれば考えるほど不正確になることがわかりました。正確な表現は「フロートの影響をクリアする」です。実際の「フロートをクリアする」とは何ですか? これは文字通り「フロートをクリアする」という意味です。もちろん、「フロートの影響を取り除く」という意味の「フロートの除去」の略語である可能性もあります。それは単なる呼び名であり、誰もがそれを実際に知っています。考えすぎだといいのですが。

YY は終わりです。この記事の本題に入ります。いくつかの考え抜かれた内容と、オーバーフローとズームがフローティングの影響を解消できる理由についての私の理解です。これらは表面的な理解であることを理解している人に教えていただければ幸いです。ご意見やご指摘は大歓迎です。

2. 要素のラッピング

「ラッピング」という用語は、JavaScript、特に jQuery などの JS ライブラリで頻繁に使用されます。昨日、私はこの非常に感動的な文章を目にしました：「視覚的思考は、ユニークかつ効果的な方法で問題を解決するためのより多くのスペースを心に与えます。」感動的なのは、ここでの「視覚的思考」が「感情的思考」などの他の用語に変更されたことです。、「ビジュアルシンキング」なども使われます。つまり、問題を考えるときに非常に主観的で非論理的な考え方を取り入れると、問題を解決するためのより広い空間が得られるということです。

「パッケージ」という言葉に言及すると、細菌を飲み込む白血球（視覚的思考 - 連想）と、暖かさと安心感（感情的思考）を思い出します。これは人間の遺伝学や成長などの要因に関連しています。なぜこんな一見関係のない話をするのかというと、以下に述べる内容は「私はこう思う」という私の感覚、主観的なものが多いからです。

(1) IE 以外のブラウザーでのズームの役割を見てみましょう: 以下の例を見てください。Google Chrome でアクセスしました。この例では、ズームの役割は元の 2 にズームインすることです。

1.zoom:1 のとき

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
<style>
	p{
		width: 100px;
		height: 100px;
		border: 3px solid red; 
		zoom: 1;
}
</style>
	</head>
	<body>
		<p>hello</p>
	</body>
<html>

上記のコードの結果は図に示すとおりです:

2.zoom: 2 つまり、ズームは 2 です元の倍:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
<style>
	p{
		width: 100px;
		height: 100px;
		border: 3px solid red; 
		zoom: 1;
}
</style>
	</head>
	<body>
		<p>hello</p>
	</body>
<html>

注: ズームは非 IE ブラウザーでズームインまたはズームアウトをサポートしていますが、この属性は非標準の CSS 属性であるため、非 IE ブラウザーでは通常、ズーム効果を実現するためにズームは使用されません。 p. ここで、拡大または縮小したい場合は、CSS3 の変換属性を直接使用します。

(2) IE 以外のブラウザーでのズームのパフォーマンスを確認した後、IE ブラウザーでのこの属性の役割を確認する必要があります。

Zoom的使用方法：
zoom : normal | number

normal :　默认值。使用对象的实际尺寸
number :　百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的 normal 值用白话讲解就是zoom:后面的数字即放大的倍数，可以是数值，也可以是百分比。如：zoom:1，zoom:120%。而这个属性只要在IE中才起作用，所以很少用到它的实际用途，而最经常用到作用是清除浮动等，如：

.border{
border:1px solid #CCC;
padding:2px;
overflow:hidden;
_zoom:1;
}
_zoom是CSS hack中专对IE6起作用的部分。IE6浏览器会执行zoom:1表示对象的缩放比例，但这里
overflow:hidden;和_zoom:1;是连起来用的，作用是清除border内部浮动。

同理，还可以使用同样方法清除margin属性在IE浏览器中的重叠问题：这就要提到zoom属性在IE中的第二个作用了，即

兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：

(2)触发IE浏览器的haslayout ,解决ie下的浮动，margin重叠等一些问题。
比如，本站使用p做一行两列显示，HTML代码：

<p class="h_mainbox"> 
<h2 id="推荐文章">推荐文章</h2> 
<ul class="mainlist"> 
<li><a href="#" style="color:#0000FF" target="_blank">CSS库吧</a></li> 
<li><a href="#" style="color:#0000FF" target="_blank">原创< /a></li> 
</ul> 
</p>

CSS代码：

.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden} 
.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;} 
.h_mainbox h2 span { float:right; font-weight:normal;} 
.h_mainbox ul { padding:6px 0px; background:#fff;} 
.mainlist { overflow:auto; zoom:1;} 
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}

.mainlist里面的zoom:1的那里就可以在IE6、IE7、IE8正常显示效果了。

(3)下面是zoom属性在IE浏览器中常见作用总结，希望对今后在使用这个属性时有所帮助：

1、检查页面的标签是否闭合
不要小看这条，也许折腾了你两天都没有解决的 CSS BUG 问题，却仅仅源于这里。毕竟页面的模板一般都是由开发来嵌套的，而他们很容易犯此类问题。
快捷提示：可以用 Dreamweaver 打开文件检查，一般没有闭合的标签，会黄色背景高亮。

　　2、样式排除法
有些复杂的页面也许加载了 N 个外链 CSS 文件，那么逐个删除 CSS 文件，找到 BUG 触发的具体 CSS 文件，缩小锁定的范围。

　　对于刚才锁定的问题 CSS 样式文件，逐行删除具体的样式定义，定位到具体的触发样式定义，甚至是具体的触发样式属性。

　　3、模块确认法
有时候我们也可以从页面的 HTML 元素出发。删除页面中不同的 HTML 模块，寻找到触发问题的 HTML 模块。

　　4、检查是否清除浮动
其实有不少的 CSS BUG 问题是因为没有清除浮动造成的。养成良好的清除浮动的习惯是必要的，推荐使用无额外 HTML 标签的清除浮动的方法（尽量避免使用 overflow:hidden;zoom:1 的类似方法来清除浮动，会有太多的限制性）。

　　5、检查 IE 下是否触发 haslayout
很多的 IE 下复杂 CSS BUG 都与 IE 特有的 haslayout 息息相关。熟悉和理解 haslayout 对于处理复杂的 CSS BUG 会事半功倍。推荐阅读 old9 翻译的《On having layout》（如果无法翻越穿越伟大的 GFW，可阅读蓝色上的转帖）
快捷提示：如果触发了 haslayout，IE 的调试工具 IE Developer Toolbar 中的属性中将会显示 haslayout 值为 -1。

　　6、边框背景调试法
故名思议就是给元素设置显眼的边框或者背景（一般黑色或红色），进行调试。此方法是最常用的调试 CSS BUG 的方法之一，对于复杂 BUG 依旧适用。经济实惠还环保^^
最后想强调一点的是，养成良好的书写习惯，减少额外标签，尽量语义，符合标准，其实可以为我们减少很多额外的复杂 CSS BUG，更多的时候其实是我们自己给自己制造了麻烦。