• zoom的学习


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

    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>	

    3-2

            注意:因为zoom兼容性的缺陷,事实上在实际的应用中并非非常多,仅仅需一般了解就好。

            【0分下载演示资源

  • 相关阅读:
    SytemC on CentOS 5.3 64bit
    Fast Poisson Disk Sampling
    Geometry Imager Viewport Filter
    Dinornis – Rendering your Model in Mudbox by RenderMan Directly !
    Models of biological pattern formation
    OrthoLab
    如何编译ATILA GPU Emulator
    感受谷歌地图
    树状列表完成
    获取地图标记点经纬度
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5059133.html
Copyright © 2020-2023  润新知