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)。

相关推荐
不好听6133 小时前
从一行 JSX 到屏幕像素:前端开发者必须懂的浏览器渲染管线
前端
恒拓高科WorkPlus3 小时前
企业级内网即时通讯建设模型:BeeWorks内网IM四层架构
前端
前端小李子4 小时前
前端环境变量裸奔?我用 EnvShield 给它穿了件防弹衣
前端
youtootech4 小时前
HarmonyOS《柚兔学伴》项目实战25-我的页面、Web 嵌入与项目总结
前端·华为·harmonyos
小林ixn4 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
醇氧5 小时前
CountDownLatch / CyclicBarrier / Semaphore 面试高频问答清单
前端·面试·职场和发展
qetfw7 小时前
MXU:Tauri 2 + React 的 MaaFramework 跨平台 GUI 源码
前端·python·react.js·前端框架·开源项目·效率工具
甲维斯7 小时前
我要开始吹牛逼了!Kimi K3 “宇宙无敌”!
前端·人工智能
a1117767 小时前
微光小屋-前端养成小游戏 开源项目
前端