上大学做阶段项目时遇到了一个非常奇特的现象: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>
zoom的学习-LMLPHP
图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>
zoom的学习-LMLPHP
图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>
zoom的学习-LMLPHP
图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>
zoom的学习-LMLPHP
图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>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVhbmppZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="600" height="600" alt="" />

图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>

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVhbmppZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="600" height="600" alt="" />

图3-2

注意:因为zoom兼容性的缺陷,事实上在实际的应用中并非非常多,仅仅需一般了解就好。

0分下载演示资源

05-11 11:08