标签：style class blog code http tar
上大学做阶段项目时遇到了一个很奇特的现象：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-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>
二、<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-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>
三、<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>
图3-2
注意：由于zoom兼容性的缺陷，其实在实际的应用中并不是很多，只需一般了解就好。
【0分下载演示资源】
HTML CSS——zoom的学习,布布扣,bubuko.com
标签：style class blog code http tar
原文地址：http://blog.csdn.net/gaohuanjie/article/details/30716679
