찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS의 확대/축소 속성에 대한 자세한 소개

CSS의 확대/축소 속성에 대한 자세한 소개

零下一度
零下一度원래의
2017-07-26 11:27:313194검색

확대/축소 속성은 개체의 확대/축소 비율을 설정하거나 검색하는 것 외에도 IE의 haslayout 속성 트리거, 부동 소수점 지우기 및 여백 겹침 지우기와 같은 기능도 있습니다. 그러나 Firefox는 확대/축소 속성을 지원하지 않지만 웹킷 커널 브라우저에서도 확대/축소 속성을 지원할 수 있다는 점은 주목할 가치가 있습니다.

1. 이전 YY

우선, 눈치 채셨는지 모르겠지만, "Clear Floats"라는 제목에 따옴표가 있습니다. 최근에는 소위 "클리어링 플로트"가 정확한지 궁금합니다. 특히 집단주의 사회에서 사람들은 집단주의를 가지고 있습니다. 순응은 아시아 집단주의 문화(예: 일본)에서 인내, 자제력, 성숙함을 상징합니다. 초등학교 시절 '두 개의 쇠공이 동시에 땅에 떨어졌다'는 이야기를 아직도 기억하시나요?

여기서는 개인적이고 감정적인 말을 하려고 하는데, 이에 대해 반박하셔도 좋습니다. 외국 기술에서 "클리어 플로트"라는 단어를 자주 봅니다. 업계에 처음이라 "클리어 플로트"가 실제로 그런 의미인지 추측만 할 수 있어서 널리 사용되고 있습니다. 더 널리 사용될수록 부정확성을 발견할 가능성이 줄어듭니다.

최근에 "부유물 제거"에 대해 몇 가지 생각해 본 결과 "부동물 제거"라는 용어에 대해 더 많이 생각할수록 그것이 더 부정확해진다는 것을 알게 되었습니다. 정확한 설명은 "float의 영향을 제거"해야 합니다. 실제 "float 제거"는 무엇입니까? float:none; 이것은 "float 제거"의 문자 그대로의 의미입니다. 물론, "부레의 충격을 제거한다"라는 뜻의 약어일 수도 있다. 그냥 아무렇지도 않게 부르는 이름이고, 누구나 그렇게 부르며, 실제로는 누구나 알고 있는 것이다. 나는 그것을 지나치게 생각하고 있기를 바랍니다.

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>推荐文章</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，更多的时候其实是我们自己给自己制造了麻烦。

위 내용은 CSS의 확대/축소 속성에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS의 쓰기 모드 속성 예에 대한 자세한 설명다음 기사：CSS의 쓰기 모드 속성 예에 대한 자세한 설명

관련 기사

더보기