css中设定长度的例外情况

看下面的例子:

div {

font-size: 40px;

width: 10em; /* 400px */

height: 10em;

border: solid 1px black;

}

p {

font-size: 0.5em; /* 20px */

width: 10em; /* 200px */

height: 10em;

border: solid 1px red;

}

span {

font-size: 0.5em;

width: 10em;

height: 10em;

border: solid 1px blue;

display: block;

}

上面的孙元素span的font-size和width吗?

估计你会说10px、100px。你说的很有道理,逻辑上是正确的,但是也有例外,在chrome浏览器中是12px、120px。因为chrome设置的最小字体大小为12px,意思就是说低于12px的字体大小会被默认为12px。

chrome默认的字体大小是12px,也就是1em默认为12px,如果最外层的父元素直接把font-size设为1.5em,那么该元素的字体大小为18px(12*1.5)。

相关推荐
粥里有勺糖4 小时前
视野修炼-技术周刊第126期 | TypeScript #1
前端·node.js·github
冰暮流星4 小时前
css3新增过渡
前端·css·css3
天黑请闭眼4 小时前
视频文件上传至服务器后浏览器无法在线播放
前端
一位搞嵌入式的 genius4 小时前
前端实战开发(四):从迭代器到异步编程:ES6 Generator 全面解析 + 实战问题排查
开发语言·前端·es6·前端实战
拉不动的猪5 小时前
# 关于初学者对于JS异步编程十大误区
前端·javascript·面试
玖釉-5 小时前
解决PowerShell执行策略导致的npm脚本无法运行问题
前端·npm·node.js
Larcher5 小时前
新手也能学会,100行代码玩AI LOGO
前端·llm·html
徐子颐5 小时前
从 Vibe Coding 到 Agent Coding:Cursor 2.0 开启下一代 AI 开发范式
前端
小月鸭6 小时前
如何理解HTML语义化
前端·html
jump6806 小时前
url输入到网页展示会发生什么?
前端