首页 > 代码库 > HTML CSS——zoom的学习
HTML CSS——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=http://www.mamicode.com/"./test.png" width = "50" height = "50">
>图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=http://www.mamicode.com/"./test.png">
>图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=http://www.mamicode.com/"./test.png">
>图3-2
注意:由于zoom兼容性的缺陷,其实在实际的应用中并不是很多,只需一般了解就好。
【0分下载演示资源】
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。