当前位置: 首页 > article >正文

css 中 em 单位怎么用

em 是 css 中的一个相对长度单位,相对于当前对象内文本的字体尺寸;如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器默认字体尺寸。可以作用在 width、height、line-height、margin、border 等样式的设置上。

一、什么是 em

1.em 的长度

em 是 CSS 中的一个相对单位,它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-height、margin、padding、border 等样式的设置上。

1em = 元素中文本的 1 个垂直高度

根据上面的规则:如果元素中文本的大小为 16px ,那么 1em = 16px ; 如果元素中文本大小为20px , 那么1em = 20px ……

2.em与HTML文本大小默认值

浏览器中的文本一般默认为 16px ,也就是说,默认的情况下:

1em = 16px
body {
  font-size: 24px;
  width: 10em;    /* 10em = 24px * 10 = 240px */
}

3.em与继承

在 CSS 中,如果一个元素没有设置 font-size ,那么它的 font-size 值就是它父元素的 font-size 值,这很好理解,就是简单的继承而已。

<style>
  body {
    font-size: 12px;
  }
  div {
    /* 该元素没有设置font-size,因此继承了父元素的font-size: 12px; */
    width: 10em;    /* 10em = 12px * 10 = 120px */
  }
</style>
<body>
  <div></div>
</body>

需要注意的是,子元素 p 继承了父元素 body 的 font-size ,所以其实在p的样式表中隐含了一句“font-size: 12px;”。现在如果显性的为子元素设置 font-size 的话,那么子元素将按照自己的 font-size 计算 em 的绝对长度。

<style>
  body {
    font-size: 12px;
  }
  div {
    font-size: 20px;
    width: 10em;    /* 10em = 20px * 10 = 200px */
  }
</style>
<body>
  <div></div>
</body>

注意上例中 p 的 font-size 使用了 px 作为单位,那如果想使用 em 怎么办呢?需要注意的是,在设置 font-size 中使用 em 作为单位,那么 em 将是其父元素 font-size 的相对值。

<style>
  body {
    font-size: 12px;
  }
  div {
    font-size: 2em; /* 2em = 12px * 2 = 24px */
    width: 10em;    /* 10em = 24px * 10 = 240px */
  }
</style>
<body>
  <div></div>
</body>

子元素 p 的 font-size 是根据其父元素 body 的 font-size 确定的,因此 2em = 12px * 2, = 24px;而 p 的 width 是相对于自己的 font-size 确定的,因此10em = ( 12px * 2 ) * 10 = 240px。所以 p 中2em=24px,10em=240px 也就不奇怪了。

事实上,不仅是 width,子元素中除了 font-size 的 em 是根据父元素的 font-size 确定的,其他所有 em 都是根据自身的 font-size 确定的。

<style>
  body {
    font-size: 16px;
  }
  div {
    font-size: 1.25em;  /* 1.25em = 16px * 1.25 = 20px */
    width: 10em;    /* 10em = 20px * 10 = 200px */
    height: 5em;    /* 5em = 20px * 5 = 100px */
    border: 0.05em solid #000;  /* 0.05em = 20px * 0.05 = 1px */
    margin: 0.25em; /* 0.25em = 20px * 0.25 = 5px */
    padding: 0.75em;    /* 0.75em = 20px * 0.75 = 15px */
    line-height: 1.5em; /* 1.5em = 20px * 1.5 = 30px */
  }
</style>
<body>
  <div></div>
</body>

二、根据 px 计算出正确的 em

1.使用PXtoEM计算器

使用在线工具 PXtoEM(http://pxtoem.com/)可以轻松快捷的根据 px 计算出所需要的 em 值。

2.手动计算em

由下面的例子可以反向推导出 px 转 em 的计算公式

<style>
  div {
    font-size: 16px;
    width: 2em; /* 2em = 16px * 2 = 32px */
  }
</style>

px = 参考文本大小 * em  =>  em = px / 参考文本大小

3.注意事项

上面的公式中,“ 参考文本大小”需要格外注意:

  • 如果元素自身设置了 font-size,那么参考文本大小就是自身的 font-size 大小

  • 如果元素自身没有设置 font-size,那么参考文本大小就是父元素的 font-size 大小

  • 为元素设置 font-size 时,如果使用 em 作为单位,那么参考文本大小是父元素的 font-size 大小


http://www.kler.cn/news/311525.html

相关文章:

  • 医疗数据分析师
  • Uniapp的alertDialog返回值+async/await处理确定/取消问题
  • 矿场工程车检测数据集 4900张 工程车 带标注voc yolo
  • Unity Transform 组件
  • 【GO开发】MacOS上搭建GO的基础环境-Hello World
  • 2024-1.2.12-Android-Studio配置
  • HttpMediaTypeNotAcceptableException: No acceptable representation问题解决方法
  • 解决使用nvm管理node版本时提示npm下载失败的问题
  • 选择排序
  • DPDK 简易应用开发之路 2:UDP数据包发送及实现
  • Day14:学生信息管理系统
  • 【Qt网络编程】Tcp多线程并发服务器和客户端通信
  • Laravel邮件发送:从配置到发邮件的指南!
  • 从零开始讲DDR(2)——DDR的核心技术
  • 软考架构-架构风格
  • 全网最适合入门的面向对象编程教程:50 Python函数方法与接口-接口和抽象基类
  • 2-95 基于matlab的模板定位
  • 阿里云容器服务Kubernetes部署新服务
  • springboot实战章节小结
  • SpringSecurity原理解析(七):权限校验流程
  • TypeScript异常处理
  • Spring IoC 配置类 总结
  • LabVIEW多语言支持优化
  • [数据集][目标检测]不同颜色的安全帽检测数据集VOC+YOLO格式7574张5类别
  • 版本控制之Git
  • U盘显示未被格式化:深入解析、恢复策略与预防之道
  • 前端mock了所有……
  • firewalld实现NAT端口转发
  • 美国站群服务器优化技巧解析
  • Opencv边缘检测(四)