最近这几天都在折腾这个博客，所谓折腾，无非就是页面样式的设计和调整~而趁着这个机会，也好好的把CSS学习和实践了一下，在此记录下一些心得。

Position

position是CSS布局的核心属性，对元素盒子应用这个属性，可以从新定位该元素在文档流中的位置。

position属性有四个值，分别是static，relative， absolute， fixed。其中static为默认属性。

在static情况下，元素处于常规文档流中，在页面中会自上而下堆叠（此时他们都是块级元素（block）），即最普通无任何花俏的排列。

而relative、即相对定位下，该元素则会相对它本应该出现的位置进行定位，此时可用top、right、bottom、left来指定相应距离，一般情况下top和left就可实现所需效果（距离可用负数）。

注意: 使用相对定位relative后，页面上除了这个元素相对于自己的位置挪动后，其他元素位置没任何变化，该元素占据的空间也留着没动。

absolute即绝对定位，它与上述两种不同，它会把元素彻底从文档流中拿出来！（上述两种不会！）即该元素本来占据的空间会被回收，而后相对于body元素进行定位（top等）。这其中有一个重要概念，定位上下文。所谓定位上下文，即参照物，为该元素参照何物来利用top等属性进行定位。在绝对定位中，元素默认的定位上下文是body元素，而非其在文档中本来的位置（相对定位的定位上下文是其本来位置）。也因此，随着页面滚动，为了维护与body的相对位置关系，该元素也会滚动。

重要：body之所以是绝对定位的默认定位上下文，是因为body是标记中所有元素唯一的祖先元素，而实际上绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要把相应的祖先元素的position设定为relative即可

fixed定位和绝对定位absolute类似，也是将元素从整个文档流中移出，其占据的空间也被收回。而其与绝对定位不同的一点在于，它的定位上下文是视口（浏览器窗口或移动设备屏幕），所以即使页面滚动，该元素也不会滚动（屏幕还在那呢~~）。

Font

关于font，其实没啥好谈的，主要即是设定大小、粗细、何种字体等。这些东西网上也都有。而之所以还为此开了个小标题主要是觉得一个网页的字体设置对于网页给人的感觉影响还是蛮大的。在此推荐一篇文章：Web 中文字体应用指南，里面详细讲了如何为网页设置中英文字体，很酷。

还有，现在在字体方面，web font也是一个蛮好的选择，比如google font。但由于某神秘原因，国内暂时无法使用= =，不过你也可以点击这里，是否继续使用，选择权在你。

最后是关于根据不同语言设置不同字体的一个方法，主要是利用CSS中的@font-face，以下是一个例子：

@font-face {
  font-family: 'MyFont';
  font-style: normal;
  font-weight: 300;
  src: url('path/to/font') format('etc:truetype');
}

@font-face {
  font-family: 'MyFont';
  font-style: normal;
  font-weight: 300;
  src: url('path/to/font') format('etc:truetype');
  /* 指定该src的字体所要应用的字符的范围。以下范围指定中文字符。*/
  unicode-range: U+4E00-9FFF;
}

/* 应用 */
ele {
  font-family: 'MyFont';
}

另一个适用于中英文使用不同字体的方法是在声明font-family时，英文在前，中文在后，比如：

ele {
  font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", sans-serif;
}

这样设置原因是大部分中文字体里包含英文字母（大部分不好看），而英文字体里不包含中文字符。在应用字体时，英文字符会使用优先级较高（排在前面）的那些英文字体，而中文字符由于前几个字体不适用于中文字符，会不断向后寻找，直到找到优先级最高的（排最前面）中文字体，具体可参考上述推荐文章。

有一个要注意的点是，中文字体还是就根据各操作系统已有的来使用，这样页面渲染得较快。当然你也可以为了使页面在不同系统下面呈现一致的效果而将字体也放上服务器，然后再利用@font-face来引入，这样的确能达到这一目的，但代价却是你不得不忍受刚打开页面时持续一段时间的一大片一大片的空白（亲身经历~）。原因嘛，中文字库太大了= =