字体属性设置(一):谷歌浏览器12px以下字体的显示;方法和原理
前言:
chrome
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>
我是p
</p>
</body>
</html>
可以发现默认的是16px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
p{
-webkit-transform:scale(0.8);
}
</style>
</head>
<body>
<p>
我是p
</p>
</body>
</html>
可以发现当设置0.8的缩放比例的时候;得到的字体大小:16pxX 0.8 = 12.8px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
p{
font-size: 10px;
-webkit-transform:scale(0.8);
}
</style>
</head>
<body>
<p>
我是p
</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
p{
width: 300px;
height: 300px;
-webkit-transform:scale(0.8);
border: 1px solid red;
} .a{
width: 300px;
height: 300px;
border: 1px solid red;
margin-top: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="a">
<p>
我是p
</p>
</div>
</body>
</html>
当对p加父容器和对p本身设置宽高以及边框;设置scale0.8,p标签自动上下居中(自身原来的宽高-缩放后的宽高得到的宽高平均分配到上下左右);
用chrome自带的盒模型发现,p标签内容占据宽度依旧是300px X 300px;
当在p后面(div中)加入span元素发现span出了div的范围,说明等比缩放只是改变的原来标签形式上的大小;其原来所在文档流占据的空间位置并未因缩放而腾出来;
发现改变p的位置之后span仍然被挤出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
p{
width: 300px;
height: 300px;
-webkit-transform:scale(0.8);
-webkit-transform-origin: 0 0;
border: 1px solid red;
} .a{
width: 300px;
height: 300px;
border: 1px solid red;
margin-top: 10px;
margin-left: 10px;
}
</style>
</head>
<body>
<div class="a">
<p>
我是p
</p>
</div>
</body>
</html>
字体属性设置(一):谷歌浏览器12px以下字体的显示;方法和原理的更多相关文章
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 【xshell属性设置】如何修改xshell字体大小
1.周末在家,想搞一下学习,于是远程公司的电脑(我的移动硬盘在公司,里面有虚拟机及测试环境) 发现xshell界面字体太小,不方便看,于是研究了一下如何来设置xshell 的字体大小 2.点击左上角的 ...
- easyUI-datagrid属性设置display:none,表头不显示
<div class="box1"> <div class="dg1Box" style="margin-top:15px; mar ...
- CSS样式----CSS属性:字体属性和文本属性(图文详解)
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...
- HTML字体的设置
CSS字体设置 box-sizing:border #content-box box-shadow:设置盒子边框的阴影. 字体动作: font-family:设置字体.比如:‘微软雅黑 ...
- wps中新罗马字体如何设置Times New Roman
word wps中新罗马字体如何设置Times New Roman ### WPS字体自带 Times New Roman ###
- 设置文字小于12px
问题:有时候会需要设置一些小于12px的字或是icon: 方法:使用css3的transform的scale,来放大和缩小,但是相应的容器也会缩小 transform: scale(0.6);
- 解决谷歌浏览器设置font-family属性不起作用,(css中设置了font-family:没有用)css字体属性没用
嗯,这个问题百思不得解.其他的浏览器器都没问题,在谷歌上就不行,网上找了很多,都没效果,后才发现,当然同样的问题可能错不一样的地方,我的解决方案: 感觉主要原因是自己也没查到,乱改一堆,就OK啦: 1 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
随机推荐
- SSIS Parameter用法
今天学习SSISParameter的用法,记录学习的过程. Parameters能够在Project Deployment Model下使用,不能在Package Deployment Model使用 ...
- call,apply,bind
一.call&apply call, apply都属于Function.prototype的方法,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法 ...
- Oracel_子查询
SQL子查询 子查询语法 SELECT select_list FROM table WHERE expr operator (SELECT select_list FROM table) 子查询 ( ...
- Java 8新特性-5 内建函数式接口
在之前的一片博文 Lambda 表达式,提到过Java 8提供的函数式接口.在此文中,将介绍一下Java 8四个最基本的函数式接口 对于方法的引用,严格来讲都需要定义一个接口.不管我们如何操作实际上有 ...
- tn文本分析语言(四) 实现自然语言计算器
tn是desert和tan共同开发的一种用于匹配,转写和抽取文本的语言.解释器使用Python实现,代码不超过1000行. github地址:https://github.com/ferventdes ...
- UWP开发之Mvvmlight实践一:如何在项目中添加使用Mvvmlight(图文详解)
最近一直在做UWP开发,为了节省成本等等接触到MVVMlight,觉得有必要发点时间研究它的用法与实现原理才行.如果有问题的地方或者有好的建议欢迎提出来. 随着移动开发的热门,Mvvmlight在An ...
- 让你的web程序“动”起来。
看到这里你可能会问,asp.net程序本身就是动态网站,还要如何动? 我这里所谓的动起来,是指动态加载,动态更新.好吧可能你又要问了动态网站本来就是动态加载,动态更新的.asp.net的程序依附于II ...
- SQL Server 2016里的sys.dm_exec_input_buffer
在你的DBA职业里,你们谁有用过DBCC INPUTBUFFER命令,来获得已经提交到SQL Server特定会话的最后SQL语句?请举手!大家都用过! 我们都知道DBCC命令有点尴尬,因为你不能在T ...
- Django admin 权威指南(一)
版本: Django 1.10 此部分由官方文档<6.5.1 The Django admin site>翻译而来. 6.5.1.1 概览 默认情况下,使用startproject的时候, ...
- MS SQL Server 数据库分离-SQL语句
前言 今天在在清理数据库,是MS SQL Server,其中用到分离数据库文件.在这过程中,出现了一个小小的问题:误将数据库日志文件删除了,然后数据就打不开了,除了脱机,其他操作都报错. 数据库分离 ...