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

    在此问个问题,MediaElement播放本地和http上的视频没问题,但是ftp的怎么在本例中播放不了 若高手了解,请不吝赐教 using System; using System.Collecti ...

  2. UNIX环境高级编程——Linux进程地址空间和虚拟内存

    一.虚拟内存 分段机制:即分成代码段,数据段,堆栈段.每个内存段都与一个特权级相关联,即0~3,0具有最高特权级(内核),3则是最低特权级(用户),每当程序试图访问(权限又分为可读.可写和可执行)一个 ...

  3. 数据市中心全省中国mysql脚本

    1.查尔斯省 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2h6aGFvY2hhbw==/font/5a6L5L2T/fontsize/400/fill ...

  4. Blend4精选案例图解教程（二）：找张图片玩特效

    原文:Blend4精选案例图解教程(二):找张图片玩特效 Blend中的特效给了我们在处理资源时更多的想象空间,合理地运用特效往往会得到梦幻般效果,本次教程展示对图片应用特效的常规操作,当然特效不仅限 ...

  5. VMware装ubuntu 进不去图形界面， 卡在Installing VMware Tools

    1.按Ctrl +C结束,进入命令行 2.ubuntu login:_ 依次输入: 1)你的用户名:输入自己的! 2)你的密码:输入自己的! 3)获取root权限:sudo su 输密码 4)/etc ...

  6. Visual Prolog 的 Web 专家系统 （7）

    GENI核心 -- 推理引擎(1)知识表示 GOAL最后一句是谓语infer(),它的含义是"论证". 因此,,进GENI核心,执行视图推理引擎. infer() infer(): ...

  7. Linux高性能server规划——多线程编程（在）

    多线程编程 Linux主题概述 线程模型 线程是程序中完毕一个独立任务的完整执行序列.即一个可调度的实体. 依据执行环境和调度者的身份.线程可分为内核线程和用户线程.内核线程,在有的系统上也称为LWP ...

  8. Ural 1309 Dispute (递归)

    意甲冠军: 给你一个数列: f(0) = 0 f(n) = g(n,f(n-1)) g(x,y) = ((y-1)*x^5+x^3-xy+3x+7y)%9973 让你求f(n)  n <= 1e ...

  9. DMA为什么比轮询、中断方式性能要卓越非常多？（你不懂）

    本文原创为freas_1990,转载请标明出处:http://blog.csdn.net/freas_1990/article/details/35735397 假设是计算机专业出身的同学,都听过一个 ...

  10. oracle在imp订单具体解释

    oracle在imp订单具体解释 Oracle导入实用程序(Import utility)同意从数据库中提取数据,和写入数据到一个操作系统文件项目.imp所用的基本格式:imp[username[/p ...