HTML CSS——zoom的学习

浏览数：27 / 时间：2015年06月09日

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

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

zoom属性值：normal | <number> | <percentage>

一、normal：

代码1-1如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />  
		<style type="text/css">
			.test{zoom:normal;}
		</style>
	</head>
	<body>
		<h1 style="font-size:5pt;">zoom</h1>
		<h1>zoom</h1>
		<h1 class="test">zoom</h1>
	</body>
</html>

图1-1

代码1-2如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />  
		<style type="text/css">
			.test{zoom:normal;}
		</style>
	</head>
	<body>
		<img src="./test.png" width = "50" height = "50"></img><br>
		<img src="./test.png"></img><br>
		<img src="./test.png" class="test"></img>
	</body>
</html>

图1-2

总结：

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

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

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

二、<number>：用浮点数来定义缩放比例。不允许负值；

代码2-1如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />  
		<style type="text/css">
			.test{zoom:3;}
		</style>
	</head>
	<body>
		<h1>zoom</h1>
		<h1 class="test">zoom</h1>
	</body>
</html>

图2-1

代码2-2如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />  
		<style type="text/css">
			.test{zoom:3;}
		</style>
	</head>
	<body>
		<img src="./test.png"></img><br>
		<img src="./test.png" class="test"></img>
	</body>
</html>

图2-2

三、<percentage>：用百分比来定义缩放比例。不允许负值；

代码3-1如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />  
		<style type="text/css">
			.test{zoom:300%;}
		</style>
	</head>
	<body>
		<h1>zoom</h1>
		<h1 class="test">zoom</h1>
	</body>
</html>

图3-1

代码3-2如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />  
		<style type="text/css">
			.test{zoom:300%;}
		</style>
	</head>
	<body>
		<img src="./test.png"></img><br>
		<img src="./test.png" class="test"></img>
	</body>
</html>