上大学做阶段项目时遇到了一个非常奇特的现象：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. Linux下 目录 压缩 解压缩 打包

    http://blog.sina.com.cn/s/blog_7479f7990100zwkp.html tar -zcvf /home/xahot.tar.gz /xahot    tar -zcv ...

  2. 推荐15个月 Node.js 开发工具

    Node.js 越来月流行.这个基于 Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中.我们列出了2015年最佳的15个 Node.js 开发工具.这些工具 ...

  3. Linux日志清除

    因为数据要求.经常需要抓住和筛选过滤数据,大概花了7 8个月.改变了机旁数据.重新开始,发现"No space left on device" 解决方法: 直接删除日志(简单粗暴) ...

  4. 【解决】/usr/bin/ld: cannot find -lc

    现象:运行gcc静态编译程序时报错: /usr/bin/ld: cannot find -lc collect2: ld returned 1 exit statusmake: *** [gcc_dr ...

  5. 阅读UML类图和时序图

    这里不会将UML的各种元素都提到.我仅仅想讲讲类图中各个类之间的关系. 能看懂类图中各个类之间的线条.箭头代表什么意思后,也就足够应对 日常的工作和交流: 同一时候,我们应该能将类图所表达的含义和终于 ...

  6. Echache整合Spring缓存实例讲解（转）

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主要介绍了EhCache,并通过整合Spring给出了一个使用实例. 一.EhCac ...

  7. Android程序猿学习路径

    而一些工作,而不仅仅是通信毕业生,很多学生没有工作或熟练Android工作人员指导的情况下,,如何学习Android而提高Android更多关注的水平. 享: 1.Android知识 1.1.站点资源 ...

  8. CentOS7 已安装telnet维修

    今天搞下 Centos 7 以下升级 openssl 和 openssh ,顺便说下安装 telnet # 设备 telnet 避 ssh 无法登录 yum -y install xinetd tel ...

  9. node.js基础：模块的创建和引入

    模块可能是一个文件,也可能是包含一个或多个文件的目录.如果模块是个目录,node.js通常会在这个目录下找一个叫index.js的文件作为模块的入口. 典型的模块是一个包含exports对象属性定义的 ...

  10. [LeetCode61]Rotate List

    题目: Given a list, rotate the list to the right by k places, where k is non-negative. For example:Giv ...