Hexo

本文最初于2015-10-04发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

本文重要内容

CSS的单位
字体属性
文本属性
定位属性：position、float、overflow等

CSS的单位

html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
CSS中的单位是必须要写的，因为它没有默认单位。

绝对单位：

1 in=2.54cm=25.4mm=72pt=6pc。

各种单位的含义：

in：英寸Inches (1 英寸 = 2.54 厘米)
cm：厘米Centimeters
mm：毫米Millimeters
pt：点Points，或者叫英镑 (1点 = 1/72英寸)
pc：皮卡Picas (1 皮卡 = 12 点)
相对单位：
px：像素
em：印刷单位相当于12个点
%：百分比，相对周围的文字的大小

为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。

百分比%这个相对单位要怎么用呢？这里也举个例子：

字体属性

行高

CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。

如下图所示：

上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。

垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么padding就是5px：

为了严格保证字在行里面居中，我们的工程师有一个约定： 行高、字号，一般都是偶数。这样可以保证，它们的差一定偶数，就能够被2整除。

如何让单行文本垂直居中

小技巧：如果一段文本只有一行，如果此时设置行高 = 盒子高，就可以保证单行文本垂直居中。这个很好理解。

上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：

font字体属性

css样式中，字体属性有以下几种：

p{
	font-size:50px; 		/*字体大小*/
	line-height: 30px;      /*行高*/
	font-family:幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
	font-style:italic ;		/*italic表示斜体，normal表示不倾斜*/
	font-weight:bold;	/*粗体：属性值写成bolder也可以*/
	font-variant:small-caps;  /*小写变大写*/
}

上面这些属性中，字号、�