上大学做阶段项目时遇到了一个非常奇特的现象：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. Windows Phone开发（17）：URI映射

    原文:Windows Phone开发(17):URI映射 前面在讲述导航的知识,也讲了控件,也讲了资源,样式,模板,相信大家对UI部分的内容应该有了很直观的认识了.那么今天讲什么呢?不知道大家在练习导 ...

  2. 给节点设置tag【从零開始cocos3.0final 】

    在cocos中通过tag来管理节点是非经常常使用的:以下介绍一个关于在cocos中使用tag的实例: typedef enum{ tag1 }Tag; 这里能够使用枚举类型,来为多个节点设置tag: ...

  3. gitLab添加ssh key

    电脑新装了一台虚拟机,想要和gitLab建立一个安全的ssh连接,步骤如下 1.本机生成ssh key 系统环境:Linux 使用root用户登录,执行命令:ssh-keygen -t rsa -C ...

  4. FPGA开机状态

    最近调试FPGA电路时发现一个问题,我从来没有注意过.我们都知道Xilinx的FPGA有三种功率M引脚,这是为了让我们配置三个引脚FPGA装载机模式,什么是主要的字符串.从字符串.并行等.,该手册有. ...

  5. FastDFS源代码分析之tracker协议分析

    本篇博客主要解说fastdfs中tracker协议的解说. fastdfs主要是存储文件.直接把整个文件存储到磁盘上,所以.简单直接.可是也有非常大的局限性. 因此,fastdfs对文件的文件夹设置和 ...

  6. spring改版官网下载jar包, 源代码和文档

    从网上找了一些方法,现在都整理了一下,有简单粗暴的,也有百转回肠的(详细,直接从官网一步一步的进入下载页),希望大家根据自己的喜好可以找到的真爱. 方法一:(简单粗暴直接) http://repo.s ...

  7. Java 将字节数组转化为16进制的多种方案

    很多时候我们需要将字节数组转化为16进制字符串来保存,尤其在很多加密的场景中,例如保存密钥等.因为字节数组,除了写入文件或者以二进制的形式写入数据库以外,无法直接转为为字符串,因为字符串结尾有\0,当 ...

  8. 【Android进阶】自定义控件实现底部扇形展开菜单效果

    这个项目是优化的其他人的,主要优化了界面菜单的显示,下面开始. 先看效果图 项目的总结构 下面开始贴代码,由于必要的地方都添加了注释,所以不过多讲解 anim_button.xml <?xml ...

  9. flask+gevent+gunicorn+nginx 初试

    1.安装flask pip install flask 2.安装gevent pip install gevent 3.安装gunicorn pip install gunicorn 版本信息例如以下 ...

  10. struts 1.x 原理

    Struts 当我接触到这个框架的时候.我就在想为什么是struts,而不是什么CraigFramework.结构.支撑,这样来理解也不难怪了. 为什么须要struts? 在struts in act ...