em 是指当前元素所使用的字体中大写字母M的宽度。为什么要单独用M的宽度来表示呢?因为英文字体中有些是不等宽的字体,其中i的宽度最小,W的宽度最大,所以用M的宽度来做个代表,不过中文字体都是等宽的,没有这方面的麻烦。我们可以简单地把em理解为字体的大小,比如说当前元素的字体大小(font-size)是16px,那么1em=16px,1.5em=24px,依此类推。
rem与em类似,只不过它是以根元素(html)的字体大小作为基本单位的。
em和rem主要用于页面的弹性布局
px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不会因为其他元素的尺寸变化而变化;
em表示相对于父元素的字体大小。em是相对单位 ,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。
CSS是指层叠样式表,层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式,样式单包含将样式应用到指定类型的元素的规则。外部使用时,样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
px是像素点(Pixel)
em是当前元素所使用的字体的大写英文字母M的宽度,之所以指定是M,是因为在比例字体中每个字母的宽度是不相等的(比如W和i的宽度就差别很大),而在等宽字体(比如汉字)中,每个字符的宽度是相等的,所以em就是字符的宽度(或者说是汉字宽度的一半)
rem则是页面根元素的字体宽度(r就是root,根),其他解释同上
px是一个绝对长度单位,就是说指定一个元素的宽度是100px,那么它的宽就固定为100像素;而em则是一个相对长度单位,比如说一个元素的宽度是4em,而这个元素的字体宽度为12px,则这个元素的实际宽度就是48px,而如果把这个元素的字体大小改为16px,则这个元素的实际宽度也自动变为64px;至于rem,是为了让这个页面所有使用rem作为长度单位的元素都可以随页面根元素(通常是指html或body)的字体大小而自动调整,这样的话只需要改变根元素的字体大小,就可以实现改变整个页面外观的目的,通常用于响应式页面布局。