em与当前元素的不解之缘
2024-08-31 05:54:43
em是相对于当前元素的字体大小而言,比如font-size:14px;那么这个元素的1em=14px.
如果当前元素未定义字体大小,则会向上继承父元素的字体大小,如果当前元素的所有祖先元素都没有定义font-size属性值,该元素就会继承浏览器默认样式.
所有浏览器的默认字体大小都是16px.
这样,1em=16px,0.75em=16px*0.75=12px
可是这么计算有点麻烦啊?好办,我们通常在样式中会声明这么一句body{font-size:62.5%}
即设置默认字体大小16px*62.5%=10px;
这样一来,1em=10px,0.75em=7.5px,是不是方便了一些呢?
再来个例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding:0;margin:0;}
html{font-size:62.5%;}
p{display:inline-block;border:1px solid silver;}
/*使用px作为单位*/
#p1
{
font-size:15px;
width:150px;
height:75px;
text-indent:30px;
}
/*使用em作为单位*/
#p2
{
font-size:1.5em;
width:10em;
height:5em;
text-indent:2em;
}
</style>
</head>
<body>
<p id="p1">两个段落的文字呈现相同的样式</p><br />
<p id="p2">两个段落的文字呈现相同的样式</p>
</body>
</html>
结果是两个段落的文字呈现相同的样式.
可能有人会问,p2的width不应该是15em吗?height不应该是7.5em吗?text-indent不应该是3em吗?
可是别忘了em的定义啊,是相对于当前元素的字体大小而言的,p2的字体大小被设置成了1.5em=15px;
那么对这个元素而言,1em就是15px了,所以width=150px/15px=10em;height,text-indent依此类推;
这就是统一单位为em时需要注意的.
最新文章
- ==与equals 的使用比较
- k次出现与一次出现的数字
- Windows server 2008 R2充当路由器实现网络的互联(转)
- DNS与DSN
- C++中的namespace用法
- QT做界面真是绝美,并且还可嵌入HTML与JS做界面(许多案例)
- WebBrowser如何获取提交的数据
- javascript动态改变iframe的src
- UVa 369 - Combinations
- IOS开发中如何判断程序第一次启动(根据判断结果决定是否显示新手操作引导)
- Android IPC机制全解析<;一>;
- c语言项目开发流程二部曲
- 简单Elixir游戏服设计-玩法simple_poker
- session的处理机制
- linux 常用的中文手册
- Android学习之基础知识十五 — 最佳UI体验(Material Design实战)
- django 403问题
- ios 10 新特性
- Win10以管理员身份启动cmd.exe
- 如何写论文的introduction
热门文章
- 通过loosejar清理应用中冗余的jar包
- 天了噜,我国4G用户超过2亿了!
- 表现与数据分离;前台MVC
- Codeforces Round #281 (Div. 2) A. Vasya and Football 暴力
- Why is try {…} finally {…} good; try {…} catch{} bad?
- C++模板(菜鸟教程)
- mtools 是由MongoDB 官方工程师实现的一套工具集,可以很快速的日志查询分析、统计功能,此外还支持本地集群部署管理.
- 85.Ext.Window
- Git 和 Redis 的基本认识
- Java并发基础知识点详解