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的跨度。