1.css单位

1.1 css单位

  在css中，除了px外，还有很多常用的单位。总体来说，css单位可以分为相对单位与绝对单位两大类。

1.1.1 绝对单位
绝对单位定义的大小是固定的，使用的是物理度量单位，显示效果不会受到外界元素影响。绝对单位多用于传统平面印刷中，极少用于前端开发。常用的绝对单位如下表所示。
表1-1 css绝对单位

绝对单位	说明
cm	厘米
mm	毫米
in	英寸
pt	磅，印刷的点数
pc	1pc=12pt

前端开发中不会设计到绝对单位，在这里我们简单了解一下即可。
1.1.2 相对单位
在css中，相对单位定义的大小是不固定的，一般相对于其他长度而言，在css中，常用的相对单位如表1-2所示。
表1-2 css相对单位

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

除了上表所示单位外，css相对单位还有ex、vw、vh等。在这里我们只要掌握上表中的单位，其他的相对单位主要用于移动端开发，在接触移动端开发时，再去学习即可。
1.像素
px，全称pixel（像素），指一张图片中最小的点，或者计算机屏幕中最小的点。
一张图片是由很多的小方点组成的，其中，每一个小方点就是一个像素（px）。
严格的来说，px属于相对单位，因为屏幕分辨率不同，1px的大小是不同的。windows系统的分辨率为每英寸96px，mac系统的分辨率为每英寸72px。但是如果不考虑分辨率，我们可以将px当作绝对单位来看待，这也是很多地方说px是绝对单位的原因。
2.百分比
在css中，支持百分比作为单位的属性很多，大致可以分为3类。

• width、height、font-size的百分比是相对于父元素“相同属性”的值来计算的。
• line-height的百分比是相对于当前元素的font-size值来计算的。
• vertical-align的百分比是相对于当前元素的line-height值决定的。
  line-heigh和vertical-align这两个属性有点特殊。在这里我们解释一下width，height，font-size：如果父元素的width是100px，子元素的font-size为50%，则子元素实际为50px.
  分析
  width、height、font-size的百分比是相对于父元素“相同属性”的像素最终的width值来计算的。
  3.em
  在css中，em是相对于 “ 当前元素 ” 的字体大小而言的，其中，1em就等于“当前元素”字体大小。这里的字体大小指的是以px为单位的font-size值。
  例如：当前font-size是10px，则1em就等于10px。当前font-size是20px，1em就等于20px。如果当前元素的font-size没有定义，则当前元素会继承父元素的font-size。如果当前元素以及其祖先元素均未定义font-size，则当前元素会继承浏览器默认的font-size。默认的浏览器font-size值都是16px。
  在css中，使用em作为单位有以下3个技巧。
  技巧一：首行缩进使用text-indent：2em来实现
  我们都知道，在网页排版中，段落的首行一般会缩进两个字的间距，如果要实现这个效果，text-indent值应该是font-size值的两倍。此时，我们使用text-indent：2em就可以实现。
  技巧二：使用em作为统一单位
  我们首先需要非常清楚一点：所有浏览器的默认字体大小都是16px。
  如果在一个页面中，我们想要统一使用em作为单位，此时可以从默认字体下手。也就是说，对于任何元素我们都不需要设置font-size为多少，而是继承根元素的font-size值（即16px）,其中em与px对应关系如下。
  1em=16px
  0.75em=0.7516px=12px
  为了简化font-size的计算，我们在css中提前声明body{font-size:62.5%;}。通过这个声明，我们可以使默认字体大小变为16px62.5%=10px，此时em与px对应关系如下。
  1em=10px
  0.75em=7.5px
  技巧三：使用em作为字体大小单位
  rem,全称font size of the root element,是相对于根元素（即html元素）的字体大小，rem是css3新引入的单位，目前主流的浏览器除了IE8之外，大部分是支持rem的。rem布局是移动端最常见的布局方式之一。
  rem和em很相似，不过也有明显的区别：em是相对于“当前元素”的字体大小，而rem是相对于“根元素”的字体大小。这里的font-size指的都是以px为单位的font-size值。
  解惑：国外大部分主流网站都是使用em作为单位，W3C也建议我们使用em作为单位。但是我们发现国内大部分主流网站，包括三大主流门户，“新浪”，“搜狐”，“网易”，都是采用px作为单位。
  原来在国外，某些国家的法律规定网站要具有适应性，特别是美国。对于以前的版本的IE，我们无法调整那些使用px作为单位的字体大小。虽然现在的IE版本几乎都支持，但我们也推荐读者使用px作为单位，因为用px作为单位非常便于计算长度。