本文详细介绍了HTML/CSS中px、em和rem的区别。em单位是相对于父元素的字体大小，常用于响应式设计但计算复杂；rem单位则统一基于html元素字体大小，简化计算。在实际项目中，px适用于边框和定位，而rem更适合响应式布局。总结了使用rem和em的场景和注意事项，强调了在媒体查询和多列布局中的应用策略。
html/css–px、em、rem的区别
一、px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
二、em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
三、em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
总之：对于em和rem的区别一句话概括：
em相对于父元素，rem相对于根元素。
一、em
（一）子元素字体大小的em是相对于父元素字体大小
（二）元素的width/height/padding/margin用em的话是相对于该元素的font-size
上代码：
html：
<div>
父元素div
<p>
子元素p
<span>孙元素span</span>
</p>
</div>
css：
div {
font-size: 40px;
width: 7.5em
最低0.47元/天 解锁文章
扫一扫
994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
