css中的宽和高怎么计算（CSS长度单位pxemrem）

px像素（pixel）px这个单位用得非常多，很常见，我们都耳熟能闻，我来为大家讲解一下关于css中的宽和高怎么计算?跟着小编一起来看一看吧!

css中的宽和高怎么计算

px像素（pixel）

px这个单位用得非常多，很常见，我们都耳熟能闻。

固定长度单位，不随其它元素的变化而变化，比较稳定和精确，不会因为其他元素的尺寸变化而变化，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

说他是相对长度单位，是相对于显示器屏幕分辨率而言的。因为它取决于显示器的分辨率，一旦确定分辨率，那么设置的px尺寸就成为固定尺寸，不会自动缩放。

PC端使用较多，但是在移动端效果不好，因为手机分辨率种类很多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑用em和rem。

EM

相对长度单位，EM的值并不是固定的，它会继承父级元素的字体大小，随父级元素的属性（font-size或其它属性）变化而变化。

如果当前对行内文本的字体尺寸未设置，则相对于浏览器的默认字体尺寸。

任意浏览器的默认字体高都是16px，为了方便使用，我们通常在CSS中的body选择器中声明font-size=62.5%（使em值变为：16px*62.5%=10px），之后只需要将使用的px值除以10，即可得到em值，如：12px=1.2em，10px=1em。

REM（root em）

rem是CSS3新增的一个相对单位，相对于HTML根元素，它会随着HTML元素的属性（font-size）变化而变化。

它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。

rem只会相对于html的值，不会受到父级的影响，所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。

目前，除了IE8及更早版本外，基本上所有浏览器都支持rem。