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

        上大学做阶段项目时遇到了一个很奇特的现象：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 id="zoom">zoom</h1>		<h1 id="zoom">zoom</h1>		<h1 id="zoom">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="/static/imghwm/default1.png" data-src="./test.png" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" ><br>		<img  src="/static/imghwm/default1.png" data-src="./test.png" class="lazy" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" ><br>		<img  class="test lazy" src="/static/imghwm/default1.png" data-src="./test.png" 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 id="zoom">zoom</h1>		<h1 id="zoom">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="/static/imghwm/default1.png" data-src="./test.png" class="lazy" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" ><br>		<img  class="test lazy" src="/static/imghwm/default1.png" data-src="./test.png" 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 id="zoom">zoom</h1>		<h1 id="zoom">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="/static/imghwm/default1.png" data-src="./test.png" class="lazy" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" ><br>		<img  class="test lazy" src="/static/imghwm/default1.png" data-src="./test.png" alt="HTML CSS??zoom的学习_html/css_WEB-ITnose" >		

图3-2

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

        【0分下载演示资源】