css单位

一、绝对单位

绝对单位	说明
cm	厘米
mm	毫米
in	英寸
pt	磅
pc	pica

在前端中，基本不会用到绝对单位，以上只是简单了解一下

二、相对单位

相对单位	说明
px	像素
%	百分比
em	lem等于“当前元素”字体大小
rem	lren等于“根元素”字体大小

css相对单位除了以上几种还有ex，vw，vh，这些主要用于移动端开发。现在先掌握以上几种

1.px：像素（略）

2.%：百分比，主要相对于父元素对应属性来设定大小

(1)width、height、font-size的百分比是相对于父元素的相同属性来计算的

(2)line-height的百分比是相对于当前父元素的font-size值来计算的

(3)vertical-align的百分比是相对当前元素的line-height值来计算的

font-size->line-height->vertical-align

 

3.em：相对于当前元素的字体大小而言，其中1em等于当前元素字体大小。

*如果当前元素font-size没有定义，则当前元素会继承父元素的font-size。如果都没有定义，则会使用默认值：16px，这个值是浏览器默认的字体大小。所有浏览器都是

这个大小。

em单位使用技巧：

(1)首行缩进

通过语句：text-indent：2em；可以不通过计算就轻松实现首行缩进两个字段

(2)使用em作为同一单位

语句:html{font-size：62.5%}

所有浏览器的默认字体大小都是16px，所以通过以上语句，我们可以把默认字体大小变为16*62.5%=10px;即1em=10px；我们只需要将原来的px值除以10，然后换上em作为单位就行了！

eg：

html{
font-size:62.5%;/*定义默认字体大小为10px*/
}
#p2{
font-size:1.5em;/*字体大小为15px*/
width:10em;/*大小为当前元素字体大小的10倍，当前字体大小为15px，所以大小为150px*/
}

　　em的同一单位的特点使得它很适合用于跨平台的开发

4.rem：rem与em很相似，em相对于当前元素字体大小，而rem则是相对于根元素的字体大小

 

转载于:https://www.cnblogs.com/runhua/p/6420855.html