CSS（1）-浮动、定位、选择器和字体。

<!--[if !IE]><!-->出IE外都识别<!--<![endif]-->

<!--[if IE]>所有的IE可识别<![endif]-->

属性前缀的排序

{
    -wekit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

对块级元素设置浮动之后，宽度会随着内容调整。

万能的清除浮动的代码(浮动元素的父元素使用)：

.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
}
.left {
    float:left
}
.right{
    float: right
}

绝对定位

1、absolute
绝对定位的宽度不再是100%，根据内容自动调整
绝对定位脱离文档流，覆盖其他元素。
如果不指定父元素位置，绝对定位相对于整个html文档进行绝对定位。
2、fixed
相对于屏幕定位，不随页面滚动而滚动
始终想让用户看见的部分，用fixed定位。

类选择器

尽量不要为class添加两个以上的类。
.icon-heart{ background-positon: -120px, 0; }

相邻选择器

例如：标题之后的一段文字，通常加粗成为导语。

属性选择器

结构化伪类

li:nth-child(2)
li:nth-child(2n)偶数
li:nth-child(3n)3、6、9
:empty 没有任何内容的元素
:target 选取目标活动的元素（例如锚点位置整个背景颜色变化。）

状态伪类

disabled 禁用的表单
:check 选中的选项
div :not(.test){
对于不属于某类的元素进行设置
}

实例

content.>:firstchild{
设置边距
}
content: > :lastchild{
设置边距
}

.content> *{
设置统一的边距和间距，缩进。
}

字体

字体的排列，默认使用排列靠前的。
font: “serif”、”sans-serif”、”cursive”、”fantasy”、”monospace”，
中文：“微软雅黑”“宋体”
浏览器为我们适配用户电脑中的字体
“serif”：字体成比例，且上下有小横线，如time new roman
从服务器下载字体：
@font-face {
font-family: 美轮美奂的字体;
src:url(‘字体文件1.woff’),
url(‘字体文件2.ttf’),
url(‘字体文件3.eot’);
url(‘字体文件3.otf’);
url(‘字体文件3.svg’);
}
动态引用字体的网站: 有字库 http://www.youziku.com,
根据你页面引用的文字自动加载的，效果挺好（但是用户多了，有时候网站会挂掉）
在线生成手写字体：http://59.108.48.27/flexifont-chn/login/
字体下载网站：http://font.chinaz.com/

字体转换工具fontsquirrel：https://www.fontsquirrel.com/tools/webfont-generator

   @font-face {
      font-family: 'SingleMaltaRegular';
      src: url('../fonts/singlemalta-webfont.eot');
      src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/singlemalta-webfont.woff') format('woff'),
       url('../fonts/singlemalta-webfont.ttf') format('truetype'),
       url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg');
      font-weight: normal;
      font-style: normal;
   }

字体图标

Font Awesome：官网http://fontawesome.io/
github地址：https://github.com/FortAwesome/Font-Awesome
中文网站：http://www.thinkcmf.com/font/icons#form-control
中文网站：http://9iphp.com/fa-icons
选择生成自己想要的字体图标：http://fontello.com/

字体阴影

字体光晕

text-shadow: 0 0 5px #FF0000;
偏移量为0就能打造光晕效果。

浮雕效果

text-shadow: 2px 2px 4px #000000;
垂直和水平偏移相同，就能构造出浮雕效果。

字体多列效果

  -webkit-column-count: 3;//chrome,safari
  -moz-column-count: 3;  //firfox
  column-count: 3;

  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;

  -webkit-column-rule: 2px outset red;
  -moz-column-rule: 2px outset red;
  column-rule: 2px outset red;

column-rule定义的装饰线不会影响column-gap的跨度。