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

相关推荐
智航GIS3 小时前
10.7 pyspider 库入门
开发语言·前端·python
华仔啊4 小时前
写 CSS 用 px?这 3 个单位能让页面自动适配屏幕
前端·css
静听松涛1334 小时前
提示词注入攻击的防御机制
前端·javascript·easyui
晚风予星4 小时前
简记 | 一个基于 AntD 的高效 useDrawer Hooks
前端·react.js·设计
栗子叶4 小时前
网页接收服务端消息的几种方式
前端·websocket·http·通信
菩提小狗4 小时前
Sqli-Labs Less-3 靶场完整解题流程解析-豆包生成
前端·css·less
澄江静如练_4 小时前
优惠券提示文案表单项(原生div写的)
前端·javascript·vue.js
C_心欲无痕4 小时前
ts - 关于Object、object 和 {} 的解析与区别
开发语言·前端·javascript·typescript
L Jiawen4 小时前
【Windows 系统】Chrome浏览器退出登录状态失效
前端·chrome·windows
IT_陈寒5 小时前
Java并发编程实战:从入门到精通的5个关键技巧,让我薪资涨了40%
前端·人工智能·后端