您的位置：首页 > 其它

em和rem

2015-12-24 14:36 323 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
html{font-size:16px;}
body{font-size:14px;}
div{font-size:12px;}
p{font-size:18px;width: 10em;}
</style>
</head>
<body>
<div>
<p>哈哈哈哈</p>
</div>
</body>
</html>
本例中 p 的宽度是180px
解释：10*18=180px;
em： 如果p本身有font-size，em就以它本身为基准
如果p本身没有font-size，em就以有font-size样式最近的父类，即先找div有没有font-size,如果没有找body,还没有找html。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
html{font-size:16px;}
body{font-size:14px;}
div{font-size:12px;}
p{font-size:18px;width: 10rem;}
</style>
</head>
<body>
<div>
<p>哈哈哈哈</p>
</div>
</body>
</html>

本例中 p 的宽度是160px
解释：10*16=180px;
rem:是以根元素为基准计算的
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航