四种css使用方式：内嵌式、外链式、行内式、导入式

复合选择器

后代选择器

选择器之间需要用空格隔开，后代不一定是儿子

我是盒子中的段落
我是盒子中的段落强调文字
我是段落
我是段落

交集选择器

选择器之间不需要隔开，直接连在一起

我是三级标题

并集选择器

选择器之间需要用逗号隔开

我是有序列表
我是有序列表
我是有序列表
我是无序列表
我是无序列表
我是无序列表

伪类选择器

元素关系选择器 

子选择器

选择器之间使用>号隔开

我是段落
我是段落

相邻兄弟选择器（ie7开始兼容）

选择器之间使用+号隔开

这是图标
你好

通用兄弟选择器

选择器之间使用~号隔开

我是3级标题
我是后面的span我是后面的span
段落
我是后面的span我是后面的span

序号选择器

first-child兼容IE7，其他兼容IE9

1
2
3
4
5
1
2
3
4
5
我是1号p
我是2号p
三级标题
我是3号p
我是4号p
我是5号p

属性选择器

^=开头 $=结尾 *=任意位置有

css3新增伪类

伪元素

我是超级链接我是超级链接
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

层叠选择器

冲突选择处理：id权重>class权重>标签权重

如果我们需要将某个选择器的某条属性提升权重，可以在属性值后面写!important（公司不允许使用，了解即可） 

在继承的情况下，选择器权重计算失效，而是就近原则

删除线：text-decoration:line-through

垂直居中：line-height=height

盒子模型

盒子的总宽度=内容width+左右padding+左右border

盒子的总高度=内容height+上下padding+上下border

当块级元素（div、h系列、li等）没有设置width属性，它将自动撑满，但这并不意味着width可以继承

盒子的height属性如果不设置，它将自动被其内容撑开，如果没有内容，则height默认为0

padding：10px 20px 30px 40px; 上右下左

padding：10px 20px  40px; 上左右下

padding：10px 20px; 上下左右

margin塌陷现象

一些元素有默认的margin

 盒子的水平居中

文本居中text-align: center 

盒子模型计算

1
2

box-sizing属性 

行内块元素：文本框input和图片img既可以设置宽高，也可以并排显示 

行内元素：margin属性无效

元素的隐藏