上大学做阶段项目时遇到了一个非常奇特的现象：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. Netty In Action中国版 - 第二章：第一Netty程序

    本章介绍 获得Netty4最新的版本号 设置执行环境,以构建和执行netty程序 创建一个基于Netty的server和client 拦截和处理异常 编制和执行Nettyserver和client 本 ...

  2. 怎么样MyEclipse配置Tomcat？

    1.下载tomcat免安装版.tomcat路径不包含空格 http://download.csdn.net/detail/u014112584/7549191 2.windows -preferenc ...

  3. uva 11427 - Expect the Expected(概率)

    题目链接:uva 11427 - Expect the Expected 题目大意:你每天晚上都会玩纸牌,每天固定最多玩n盘,每盘胜利的概率为p,你是一个固执的人,每天一定要保证胜局的比例大于p才会结 ...

  4. 如何解决Android SDK无法下载Package的问题(.net)

    有些用户在安装好Android SDK后,打开Android SDK Manager下载API时一直显示“Done loading packages”却迟迟不能前进,界面显示的Package空空如也. ...

  5. Unreal Engine 4 创建Destructible Mesh(可破坏网格)

    Unreal Engine 4的物理引擎用的是PhysX. 支持网格破坏.布料.物理粒子等,非常强大.曾经须要编码才干完毕的工作,在Unreal Engine 4 中仅仅须要拖拖拽拽就完毕了,非常方便 ...

  6. strchr,wcschr 和strrchr, wcsrchr,_tcschr,_tcsrchr功能

           strchr,wcschr 和strrchr, wcsrchr,_tcschr,_tcsrchr功能 (1) char *strchr( const char *string, int ...

  7. 【SICP读书笔记（一）】正则序展开的特殊情况

    scheme解释器有两种实现方式,一种是应用序,先对每个参数求值,再以首过程对所有求得的参数求值. 第二种是正则序,会“完全展开然后归约”(书中原文) SICP中的练习1.5,让我困惑了一下.原题如下 ...

  8. Gmail POP3设定

    好几个同事在问我怎样使用ThunderBird和OE收取IT CHT的邮箱,因为IT CHT就是用Gmail的功能,因此收发邮件是跟Gmail一样,下面是Gmail的POP&SMTP的设置方法 ...

  9. 重写onBackPressed方法

    android手机back按键响应方法重构: long exitTime = System.currentTimeMillis() - 2000; public void onBackPressed( ...

  10. 关于程序猿怎样降低程序Bug的若干建议

    毫无疑问,程序猿是善于思考问题的一族. 一个程序的编写都是通过:思考.设计.编写.调试.測试以及执行这些主要的阶段. 但大部分程序猿都有一个问题就是不太愿意測试自己的代码. 他们草草的调式完毕以后就觉 ...