1 基本语法
选择器 {
属性: 属性值;
}
2 CSS引用方式
行间样式：直接在标签上书写样式。
内部样式：在文件的内部书写样式。
<style type="text/css">
样式内容
</style>
外部样式：（1）先创建一个CSS文件；（2）再用link标签引入这个文件。
导入外部样式：（1）先创建一个CSS文件；（2）在style标签中用import导入这个样式文件。
以上四种CSS引用方式的区别：
行间样式只作用于当前标签；而内部样式作用于当前文件；外部样式可以被多个HTML文件引用。
在实际项目开发中，最好使用外部样式。
外部样式分为link引入和import引入两种方式。这两种方式区别：
1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4）link支持使用Javascript控制DOM去改变样式；而@import不支持。
3 CSS选择器
3.1 选择器分类
1）*：匹配html中所有元素（注意：*的性能差，因为它要匹配所有元素，所以在开发时，不建议使用）
2）标签选择器：用来匹配对应的标签
3）类选择器：用来选择class命名的标签
4）ID选择器：用来选择用id命名的标签
5）派生选择器：根据上下文来确定选择的标签
6）伪类选择器
7）伪元素选择器
3.2 选择器的分组
让多个选择器（元素）具有相同的样式，一般用于设置公共样式。
3.3 选择器的继承
子元素可以继承父元素的样式，反之不可以。
3.4 样式权重
!important(10000)>内联样式(1000)>id选择器(100)>类、伪类和伪元素选择器(10)>标签选择器(1)
4 CSS字体
1)font-size:字号(px/%)
2)font-family:字体
3)font-style:文字样式(normal/italic/oblique)
4)font-weight:文字加粗(normal/bold/bolder/lighter/100-900)
5)line-height:行高(px/数字/em等)
6)color:文字的颜色(颜色的单词/rgb()->r:0-255,g:0-255,b-0-255/16进制(以#开头，后跟6位(#rrggbb)或3位(#rgb)16进制数）
7)text-decoration:文字修饰(none/underline/overline/line-through)
8)text-align:文本对齐方式(left/right/center)
9)text-transform:字母大小写(capitalize/uppercase/lowercase/none)
10)text-indent:文本缩进(px/em/%/pt等)
Tip: font复合属性：font:font-style font-variant font-weight font-size/line-height font-family;
注意：
1）属性值的位置顺序
2）除了font-size和font-family之外，其它任何一个属性值都可以省略
3）font-variant：normal/small-caps（让大写字母变得小一些）
5 CSS背景
1)background-color:背景色(transparent/color)
2)background-image:背景图(none/url)
3)background-repeat:背景图像铺排方式(repeat/no-repeat/repeat-x/repeat-y)
4)background-position:设置对象的背景图像位置({x-number | top | center | bottom } {y-number | left | center | right })
5)background-attachment:背景图像滚动位置(scroll/fixed)
6)background:设置背景的复合写法
background: color image repeat attachment position
6 清除浮动
目的：让后面的元素自动掉到下一行。
方法：
1）添加空标签，并设置样式：clear:both;
clear:left; 清除左浮动
clear:right; 清除右浮动
clear:both; 清除左右浮动
clear:none; 左右浮动都不清除
2）在要清除浮动的父级添加样式：overflow:hidden;
overflow:hidden; 超出部分隐藏，也可以用来实现清除浮动。
3）在要清除浮动的父级添加伪元素，并设定样式：
父元素:after{
content:"";
display: block;
clear:both;
}
注意：在实际项目开发中，我们一般首选第2种方案。
7 定位分类
1）static:静态定位
默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流）
2）relative:相对定位
占用标准流（文档流），它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。
3）absolute:绝对定位
脱离文档流，相对于body做偏移。
绝对定位一般与相对定位结合使用，它相对的父级是relative定义的元素做偏移。relative的元素必须是absolute的父级。
在项目开发中，一般用relative+absolute结合使用。
4）fixed:固定定位
脱离文档流，相对于浏览器窗口左上角（0，0）做偏移，它与relative设定的对象没有关系，也就是说，它跟父级的定位没有任何关系。
一般在开发中用来固定导航栏。
8 BFC&IFC
FC:Fomatting Context(格式上下文)。它是CSS2.1规范中的一个概念。它是页面中的一块渲染
区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
分为：BFC和IFC。
1）BFC：块级格式上下文
a）形成BFC的条件
i) 浮动元素（float除none以外的值）
ii）定位元素（position(absolute/fixed))
iii）display（值为inline-block/table-cell/table-caption时）
iv）overflow（值为hidden/auto/scroll时）
b）BFC特性（规则）
i)内部的盒子会在垂直方向上一个接一个的放置
ii)垂直方向上的距离会叠加，值由最大margin值决定（如果不要叠加，就需要将该盒子变成一个独立的盒子）
iii)BFC的区域不会float元素区域重叠
iv)计算BFC的高度时，浮动元素也参与计算
v)BFC就是页面上的一个独立的容器，容器里面的子元素不会影响到外面的元素
c）BFC的作用
i)解决margin重叠的问题（添加独立BFC）
ii)解决浮动高度塌陷的问题（在父级添加overflow:hidden）
iii)解决侵占浮动元素的问题（添加overflow:hidden清除浮动）
2）IFC：内联（行级）格式上下文
a）形成IFC的条件
i)font-size
ii)line-height
iii)height
iv)vertical-align
b）IFC特性（规则）
i)IFC的元素会在一行中从左至右排列
ii)在一行上的所有元素会在该区域形成一个行框
iii)行宽的高度为包含框的高度，高度为行框中最高元素的高度
iv)浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度
v)行框的宽度容纳不下子元素时，子元素会换下一行显示，并且会产生新行框
vi)行框的元素内遵循text-align和vertical-align
