立即学习“前端免费学习笔记（深入）”；
每个浏览器厂商都会自己有设计的主观性，而这些出发点看似很好的却往往深深地伤害程序员。
立即学习“前端免费学习笔记（深入）”；
1.需求
呈现指定为Google浏览器，字号为6-8px（为了打印细小的尺寸）。
立即学习“前端免费学习笔记（深入）”；
2.探索
2.1 CSS HACK
搜索了N多的网页，都指向一个结果：
html
{ -webkit-text-size-adjust:none;}
登录后复制
将以上代码放在文档的开始。。。
立即学习“前端免费学习笔记（深入）”；
可，就是，不生效。。。结果就有不良??说话语气粗拙、脸红、眼瞪等一系列的反应。
立即学习“前端免费学习笔记（深入）”；
2.2 CSS 3 的春天
刚好带了一本书，是讲CSS3的特性的，快速浏览了整本书之后，发现了一个特性:
div { transform:scaleY(0.8);}登录后复制
? ?对指定的标签进行缩放，比如，上述代码的意思就是，对div及其子元素（包括文本，也就包括字号）的高度（Y）放小到80%。
类似的，宽度放缩：scaleX(pre),整体放缩scale(pre)。
立即学习“前端免费学习笔记（深入）”；
尝试之下，确实能够放缩。
可是，如果HTML是这样的话：
your textyour text2
登录后复制
那么在d1和d2之间将会出现很大的留白，怎么却掉这个留白呢？
两条铁律：
{ margin-top:-12px; padding-bottom:-12px;}登录后复制
使用marin的负值，可以向指定方向移动外边距，即元素整体；
使用padding的负值，可以向指定的方向移动内边距，即撑大元素体；
立即学习“前端免费学习笔记（深入）”；
之后，缩小的文本没哟发生变化，那么就达到了效果??在Google浏览器缩小字体，且像正常一样的执行。
3.总结
transform实际是计算机图形学的一个实现，有2D变换，3D变换等。
基础很重要，每一次努力都不会白费的~。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3092562.html
