前端新手,今天在练习css时,发现一个问题:
我把body的font-size设为10或者是62.5,这时设置20em,不就是200px的意思么,可在浏览器里不是这样的,看代码:
<body>
<div>
</div>
</body>
body {
margin: 0;
padding:0;
font-size: 62.5%;
}
body {
background-color: #caebff;
}
div {
width: 20em;
height: 20em;
background-color: red;
}
结果在浏览器上出现的是240px的红色正方形?不应该是200px么?多的40px是从哪里来的?
望指教,谢谢。
@changli 告诉我chrome因为最小只支持12px的中文,所以会有这样的问题。我突然想起来,确实是的。那么,我在body里让font-size:625%,是不是就能解决了呢?呃,看代码:
<body>
<div>
<p>测试</p>
</div>
</body>
body {
font-size: 625%;
margin: 0;
padding: 0;
}
body {
background-color: #caebff;
}
div {
width: 0.3em;
height: 0.3em;
background-color: red;
font-size: 0.2em;/*因为body里是625%,所以字体太大,就调整了一下字体,但跟着div的宽和高都变了*/
}
本来是想实现宽高都是30px,但字体太大了,因为上面是625%,我就设置了一下字体,呃,字体是正常了,盒子的宽和高一下子就不对劲了。
像我上面代码这样的情况,应该怎么解决啊?
盒子之类非字体的尺寸建议还是用rem吧,因为em单位依赖于父元素,用作盒子尺寸的话,那父元素上font-size就没法用了,很不灵活。这点不如rem,直接在:root上挂个font-size就能跑,body上再重置下font-size就可以不受影响了。em还是建议专用于字体上会比较好。