CSS中的em单位
来源:互联网 发布:网络舆情引导机制 编辑:程序博客网 时间:2024/05/09 16:50
CSS中有众多单位,常用的px是绝对单位,em则是相对单位。在响应式和移动端的大前提下,使用em能够更方便快捷的一次性调整web文档极其HTML元素的字体大小、宽度、边距、边框等一系列属性,可以说在某些方面,使用em作为单位比px更灵活。
一、什么是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即可。eg:
body { font-size: 24px; width: 10em; /* 10em = 24px * 10 = 240px */}
3.em与继承
在CSS中,如果一个元素没有设置font-size,那么它的font-size值就是它父元素的font-size值,这很好理解,就是简单的继承而已。eg:
<style> body { font-size: 12px; } div { /* 该元素没有设置font-size,因此继承了父元素的font-size: 12px; */ width: 10em; /* 10em = 12px * 10 = 120px */ }</style><body> <div></div></body>
需要注意的是,子元素div继承了父元素body的font-size,所以其实在div的样式表中隐含了一句“font-size: 12px;”。现在如果显性的为子元素设置font-size的话,那么子元素将按照自己的font-size计算em的绝对长度。eg:
<style> body { font-size: 12px; } div { font-size: 20px; width: 10em; /* 10em = 20px * 10 = 200px */ }</style><body> <div></div></body>
注意上例中div的font-size使用了px作为单位,那如果想使用em怎么办呢?需要注意的是,在设置font-size中使用em作为单位,那么em将是其父元素font-size的相对值。eg:
<style> body { font-size: 12px; } div { font-size: 2em; /* 2em = 12px * 2 = 24px */ width: 10em; /* 10em = 24px * 10 = 240px */ }</style><body> <div></div></body>
子元素div的font-size是根据其父元素body的font-size确定的,因此2em = 12px * 2, = 24px;而div的width是相对于自己的font-size确定的,因此10em = ( 12px * 2 ) * 10 = 240px。所以div中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大小
三、em的缺点
文本大小使用px、em、pt还是百分比的讨论持续了很久,em单位同样拥有其缺点。我们已经知道,在不设置元素font-size的情况下,em总是根据父元素的font-size来确定长度;即使元素设置了font-size,多次嵌套使用em也往往会造成疏忽,不仅使用前需要大量计算,而且不能保证没有漏网之鱼。这将是一个繁杂而低效率的工作。
幸运的是,CSS3带来了rem单位,这可以说是em单位的“改良版”,有关rem的使用方法将在下一篇文章中记录。
- CSS中的em单位
- 关于css中的em单位
- CSS中的单位px,em,rem
- 区别CSS单位中的px,em,rem
- 前端开发中的CSS的长度单位em、px、ex、%
- css中的%和em和数字单位的区别
- 说一说CSS中的尺寸单位 px em rem
- css 中的几种长度单位:px em rem
- CSS的长度单位(em)
- [css技术][关于单位em的思考]
- css中字体单位px与em
- CSS 中长度单位em、px、ex、%
- CSS文字大小单位PX、EM、PT
- css中em单位的用法
- CSS尺寸单位 % px em rem 详解
- CSS单位 px、em和rem
- css中单位 px、em 的区别
- css字体单位em、px、%区别
- UVa 437 The Tower of Babylon
- 利用checkbox删除数据的做法
- Qt学习之路(32): 一个简易画板的实现(Graphics View)
- 中文乱码的解决之道,理清UTF8,UTF16,GB2312,Big5,Unicode之间的关系
- android 淘宝天猫支付宝浏览器打开本地app传递参数打开应用内页
- CSS中的em单位
- 主从数据库架构
- 华为牛人的成长经历
- LeetCode题解-144-Binary Tree Preorder Traversal
- centos6 编译nginx1.9.1
- 域名注册流程
- 单向散列函数(Hash)
- R语言ggplot2绘图——柱状图
- iOS开发导航栏常用属性