HTML CSS??zoom的学习_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:03:08
원래의
1057명이 탐색했습니다.

        上大学做阶段项目时遇到了一个很奇特的现象:kindEditor上传图片功能失效,但是把jsp所引用的样式去掉就好用,这说明样式有问题,于是删一个样式测试一下,就这样罪魁祸首落在了zoom身上,这是我们第一次"相识",今天周末,难得的清闲,现总结一下:

        首先说一下zoom的作用:zoom用来设置对象的缩放比例;

        zoom属性值:normal | |

        一、normal:

        代码1-1如下:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:normal;}		</style>				<h1 style="font-size:5pt;">zoom</h1>		<h1>zoom</h1>		<h1 class="test">zoom</h1>	
로그인 후 복사

图 1-1

        代码1-2如下:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:normal;}		</style>				<img  src="./test.png"    style="max-width:90%"  style="max-width:90%" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" ><br>		<img  src="./test.png" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" ><br>		<img  src="./test.png" class="test" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" >	
로그인 후 복사

图1-2

        总结:

        a、图1-1:从代码中可以看到第一个“zoom”的字体大小为“5pt”,第二个“zoom”的字体大小使用了默认值,第三个“zoom”的字体添加了“zoom:normal;”样式列表;

        b、图1-2从代码中可以看到第一副图片的宽为“50”,高也为“50”大小为“5pt”,第二副图片大小使用了默认值,第三副图片添加了“zoom:normal;”样式列表;

        通过a和b两点的描述我们可以得到这样一个结论:n ormal用来使元素使用其实际尺寸;

        二、:用浮点数来定义缩放比例。不允许负值;

        代码2-1如下:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:3;}		</style>				<h1>zoom</h1>		<h1 class="test">zoom</h1>	
로그인 후 복사

图2-1

        代码2-2如下:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:3;}		</style>				<img  src="./test.png" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" ><br>		<img  src="./test.png" class="test" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" >		
로그인 후 복사

图2-2

        三、:用百分比来定义缩放比例。不允许负值;

        代码3-1如下:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:300%;}		</style>				<h1>zoom</h1>		<h1 class="test">zoom</h1>		
로그인 후 복사

图3-1

        代码3-2如下:

                  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">  		<style type="text/css">			.test{zoom:300%;}		</style>				<img  src="./test.png" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" ><br>		<img  src="./test.png" class="test" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" >		
로그인 후 복사

图3-2

        注意:由于zoom兼容性的缺陷,其实在实际的应用中并不是很多,只需一般了解就好。

        【0分下载演示资源】

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿