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

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分下载演示资源】

zoom的学习的更多相关文章

  1. JQuery zoom插件学习

    jquery zoom是一款图片放大插件,经常用在商城商品页面里. 使用JQuery zoom插件,除了需要引入JQuery.js外,还要引入JQuery.zoom.js文件及jqzoom.css文件 ...

  2. Selenium2学习-037-WebUI自动化实战实例-IE浏览器显示比例问题：org.openqa.selenium.remote.SessionNotFoundException: Unexpected error launching Internet Explorer. Browser zoom level was set to 94%. It should be set to 100%

    好久没有写博文了,今天在给部门新人演示 Selenium WebDriver 启动其支持的各种浏览器时,启动 IE 时总是无法打开对应的百度网址,页面如下所示:

  3. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  4. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  5. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  6. 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

    前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...

  7. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. ArcGIS JS 学习笔记3 实现百度风格的BubblePopup

    1. 开篇 模仿是最好的学习,这次我们继续山寨百度,通过自定义Infowindow来实现百度风格的BubblePopup 2.准备 2.1 Copy模板 先打开百度地图,按下f12吧BubblePop ...

  9. HTML5零基础学习Web前端需要知道哪些？

    HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...

随机推荐

  1. uva10791 uva10780（分解质因数）

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  2. hdu 5073 Galaxy（2014acm鞍山亚洲分部 C）

    主题链接:http://acm.hdu.edu.cn/showproblem.php? pid=5073 Galaxy Time Limit: 2000/1000 MS (Java/Others)   ...

  3. MultiROM for the XIAOMI MI2S/2C/2! (Kexec HardBoot Enabled with Kexec HardBoot Patch!)

    Introduction This is a port of Tassadar's MultiROM, a multi-boot mod for XIAOMI MI2/2S/2C. The main ...

  4. Facebook Asynchronous Layout and Rending

    Facebook Asynchronous Layout and Rending by 吴雪莹 dispatch_async(backgroundQueue, ^{ storyNode = [[FBS ...

  5. Maven导入eclipse缺少web-resources目录

    导入其它机器的maven项目会出现缺少target/m2e/下的web-resources目录,眼下详细原因不知道, 解决方法是,直接将缺少的web-resources目录复制到项目中,错误解决

  6. 802.11（wifi）的MAC层功能

    MAC层是802.11的主要功能部分.上层应用通过调用MAC层提供的接口原语调用MAC层的功能. MAC一共向上提供了2大类接口原语,共30种.数据(1)和管理(29).数据部分就是提供普通数据包的收 ...

  7. [Erlang危机](5.1.0)VM检测概述

    原创文章.转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 把执行指标储存在VM的内存中.能够指定是全局的还是app所特有的. • vms ...

  8. C#(SuperWebSocket)与websocket通信

    原文:C#(SuperWebSocket)与websocket通信 客户端代码 点击可以查看一些关于websocket的介绍 <!DOCTYPE html> <html> &l ...

  9. CentOS7卸载KDE桌面(转)

    最初安装centos时选择了安装KDE桌面,打开很卡,没有用到,想卸载,可是试了网上的方法什么yum groupremove kde-desktop 都不奏效,于是只能自己找出KDE的包,然后yum卸 ...

  10. Chapter 1 Securing Your Server and Network(2):管理服务的SIDs

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/37927319 ,专题文件夹:http://blog.csdn.net/dba_huang ...