body中font-size:62.5%，但是用em设置input尺寸偏大是什么原因

最新推荐文章于 2023-06-02 16:57:58 发布
原创 最新推荐文章于 2023-06-02 16:57:58 发布 · 1.1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #布局 #html #web前端
本文探讨了在使用EM单位设置INPUT元素尺寸时遇到的问题。在设置了BODY的FONT-SIZE为62.5%的情况下，发现INPUT框的实际尺寸大于预期的10PX/EM。通过进一步观察发现，INPUT并未继承BODY的字号设定。

在设计弹性布局时，有这样一种用法，设置

body {
    font-size: 62.5%;
}

这样 1em 大约对应 10px，便于进行布局。

但是我在用 em 单位设置input框的尺寸时，发现在无缩放的情况下input框的尺寸要大于本该对应的px。通过对 input 的value 设置值可以明显看出输入框中的默认字体大小大于body设置的字号。

可以看出，input 并没有继承body设置的字号，因此用 em 为单位设置 input 的尺寸时并不是 1em = 10px 的对应关系。

Element Input组件分析小结
12-10
input组件相对来说复杂一点，我们先从它用到的一个工具库calcTextareaHeight.js进行分析。 calcTextareaHeight.js calcTextareaHeight.js使用来计算文本框的高度的，我们根据代码顺序从上往下进行分析。 HIDDEN_STYLE HIDDEN_STYLE是一个常量，存储隐藏时候的css样式的。 const HIDDEN_STYLE = ` height:0 !important; visibility:hidden !important; overflow:hidden !important; position:absolu
知识普及之CSS: body{font-size: 62.5%;}这种写法的原因
09-27
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？下面脚本之家小编给大家揭晓这个答案，一起了解了解吧
px/em/rem有什么区别，为什么通常给font-size设置为62.5%
subsistent的博客
03-27 734
1. 这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。1. 因为绝大多数浏览器的默认字体大小为 16px ，而将font-size设置为 62.5% 则等价于字体大小的font-size:10px;2. 随之在其他的换算单位，如 rem 的字体换算时，则可以表示为 1rem = 10px， 整数值对于单位的换算会比较方便。2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
html {font-size: 62.5%}的含义
m0_37964290的博客
08-16 1462
html {font-size: 62.5%}
font-size: 62.5%的意义
q850593913的博客
06-06 2636
font-size: 62.5%的意义 首先，rem是以html为基准。 一般的，各大主流浏览器的font-size默认值为16px,此时1rem=16px。如果此时将rem与px进行换算很麻烦，比如0.75rem=12px。 为了更方便的进行换算（比如1：10），就可以加样式： html ,body{ font-size: 62.5% } 设置了62.5%以后就有 1rem=10px，便于用rem指定元素的尺寸（比如1.2rem=12px,1.4rem=14px），这样响应式的时候就可以直接改变
html{font-size: 62.5%}
qq_26288475的博客
06-02 530
而如果把font-size设置为62.5%，此时1rem=16px * 62.5% = 10px。其实一般的浏览器font-size属性默认是16px，也就是1rem=16px。为什么这里指定的值是62.5呢？也就是用于比例换算 1：10的比例更便于换算。
html {font-size: 62.5%}
猫老板的豆
03-01 918
一般的，各大主流浏览器的font-size默认值为 16px，此时 1rem = 16px（所以 12px = 0.75rem）； 把 html 设置成 font-size: 62.5%，此时 1rem = 16px*62.5% = 10px（所以 12px = 1.2rem）；（1：10的比例更好换算） html{ font-size: 62.5%; } 注：rem 是 css3 中新增加的一个单位属性，是相对长度单位。相对于根元素(即html元素) font-size计算值的倍数 ...
为什么body{font-size: 62.5%;}
zxleezx的专栏
10-25 2万+
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px
CSS: body{font-size: 62.5%;}为什么？？？
weixin_30843605的博客
12-01 299
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px*6...
CSS中强大的EM（转）
萌萌的It人 www.itmmd.com
05-24 4080
使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。 这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用
font-size 对 input 的影响
猿海无涯，码农无边
03-25 1769
1. 开始 在不限定 <input> 宽度的情况下，font-size 是会影响 <input> 的宽度的。以下的试验是在 macOS 的 Chrome 中进行的。 默认情况下的 <input> 宽度是 132px，font-size 的值为 12px 。 当我们以 12px 为界，先减小 font-size 的值，这时候会发现无论是 <input>...
input设置size属性的大小无效处理
sjy_2010的专栏
04-20 3221
解决办法是将size="35"改成style="width:300px" 修改前 [code="html"]&nbsp;*[/code] 修改后 [code="html"]&nbsp;*[/code]
html的input标签，设置size后会影响到页面的放大缩小排版
u010523770的专栏
06-30 4779
通过jsp：include引入的页面，页面缩小后，排版混乱。 原来是因为，我的“添加采购备注”这个input标签设置了size="205"，导致，这个文本框使用有固定的大小，不能缩放。 解决办法，就是去掉size="205"这个input标签的属性，页面缩放就正常了。
input计算数量及金额
weixin_30379911的博客
04-25 580
1.html　　 <p id="input_main"> <em><i id="priceNum">10</i>元</em> <span id="c_sub">-</span> <input type="" name="" maxlength="4" id="numInput" value=...
px、em、rem区别介绍 还是使用rem把
feilzhang的博客
09-22 893
PX px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 EM em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 EM特点 1. em的值并不是固...
body{font-size: 62.5%;}这种写法的原因
zhh_Tony
11-10 1086
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置，为什么偏偏是62.5%呢？这主要是为了方便em与px相互转换，em的初始值为1em=16px，显然这样的话，如1.2em则=19.2px，可是我们在设置的时候很少看见19.2px这样表示的大小，也就是在用px表示大小时数值是不带小数位的。当设置了body{font-size: 62.5%;}时，1em则=16px*6
PHP7中的PHP Fatal error: Uncaught Error: Call to undefined function
热门推荐
Just for funnnnnnnnnnnn
08-02 3万+
刚刚接触PHP，由于我的ubuntu里默认的PHP是7，为了方便我就直接安装了PHP7。但是在学习过程中发现访问PHP文件时返回了HTTP的500状态码，于是去查看错误日志（ubuntu中是/var/log/)，发现错误为PHP Fatal error: Uncaught Error: Call to undefined function+文件中的某函数名。google后得知是因为PHP7中移除了
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值