1.CSS全称为“层叠样式表（Cascading Style Sheets）”，他主要用于定义 HTML内容在浏览器中的样式
2.CSS样式由选择符和声明（选择器）组成，而声明又由属性和值组成
3.CSS注释格式：/**/
4.CSS代码插入形势：内联式，嵌入式，外部式(<link href="mystyle.css" rel="stylesheet" type="text/css"/>)（优先级：内联式>嵌入式>外部式）
5.选择器：a.标签选择器(标签名) b.类选择器（[标签名]'.'+类名）c.ID选择器（'#'+id） d.子选择器（选择器'>'第一代子元素）e.包含选择器（选择器' '后辈元素）f.通用选择器（'*'）g.伪类选择器（标签名':'该标签的某种状态）h.分组选择符（可以用','分割为多个声明，设置同一样式）
6.类选择器和id选择器的异同：a.页面上一个id只能出现一次，一个类可以重复出现
b.一个标签只能有一个id值，却可以并列有多个class值
7.继承：CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅用于某个特定的html标签元素，而且应用于其后代。
8.权值：当一个标签的样式冲突时，浏览器根据权值判断使用哪种样式（标签的权值为1，类选择符的权值为10，ID选择符的权值为100，继承也有权值但很低）
9.层叠：当同一个标签的不同样式权值也一样时，后面的样式会覆盖前边的样式
10.重要性：有些特殊情况需要为某些样式设置具有最高权值，这时候可以使用!important来解决，（!important要写在分号前边）
11.元素分类：块状元素、内联元素（行内元素|inline）、内联块状元素
常用的块状元素：<div>,<p>,<h1>,<ol>,<ul>,<dl>,<table>,<address>,<blockqute>,<form>
常用的内联元素：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
常用的内敛块状元素：<img>,<input>
12.块级元素特点：（display:block;将内联元素转换为块级元素）
a.每个块级元素都从新的一行开始，并且其后的元素也另起一行。(一个块级元素独占一行)
b.元素的高度，宽度，行高以及顶和底边距都可设置。
c.元素的宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。
13.内联元素特点(display:inline;将元素设置为内联元素)：
a.和其他元素都在一行上。
b.元素的高度宽度已经顶部和底部的边距不可设置。
c.元素的高度就是它包含的文字或图片的宽度，不可改变。
14.内联块状元素特点：（display:inline-block;将元素设置为内联块状元素）
a.和其他元素都在一行上；
b.元素的高度、宽度、行高以及顶部和底部边距都可设置。
15.CSS布局模型：流动模型（Flow）、浮动模型（Float）、层模型（Layer）
16.流动模型（是默认的网页布局模式）：
a.块状元素都会在包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下块状元素的宽度都为100%.
b.内联元素都会在所处的包含元素内从左到右水平分布显示。
17.浮动模型（可以用(float:left/right;)将部分元素定义为浮动）：
18.层模型（可以使每个图层能够精确定位）:
a.绝对定位:position:absolute;这条语句的作用将元素从文档流中拖出来，然后使用left,right,top,bottom,属性相对于其最近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
b.相对定位:position:relative;它通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置。相对定位完成过的过程是首先按照static（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的移动位置，移动的方向和幅度由left,right,top,bottom属性确定，偏移前的位置保持不动。
c.固定定位:position:fixed;表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的位置，或者改变浏览器窗口的显示大小，因此固定的定位的元素始终位于浏览器窗口视图内的某个位置，不会受文档流的影响，这与background-attachment:fixed;属性功能相同。
19.margin,padding,border值缩写：
a.margin:10px 10px 10px 10px; -->margin:10px;
b.margin:10px 10px 20px 20px; -->margin:10px 20px;
c.margin:10px 20px 30px 20px; -->margin:10px 20px 30px;
20.css十六进制表示的颜色也可以缩写：如果每两位的值相同，可以缩写一半（#cccccc --> #ccc）
21.颜色设置的三种方式：
a.英文命令设置颜色：p{color:red;}
b.RGB颜色：p{color:rgb(133,45,200);}
c.十六进制颜色（常用）：p{color:#00ffff;}
22.CSS长度值单位（px,em,%）:
ps:a.em就是本元素给定字体的font-size值，如果元素的font-size为14px那么1em=14px；但当给font-size设置的单位是em时，此时甲酸的标准以父元素的font-size为基础。
23.水平居中设置
a.内联元素：给父元素设置（text-align:center;）来实现。
b.定宽块状元素：满足定宽和块状两个条件的元素是可以通过设置"左右margin"值为"auto"来实现居中。（margin:20px auto;或者 margin-left:auto;margin-right:auto;）
c.不定宽块状元素：三种方法,一是加入table标签（为table标签设置margin:0 auto;）；二是设置display:inline;(将元素显示类型设置为内联元素，给父元素设置text-align：center;);三是设置position:relative;和;left:50%(利用相对定位的方式，将元素向左偏移50%，即达到居中的目的。)
24.垂直居中-父元素高度确定的单行文本：设置父元素height和line-height(行间距)高度一致。(弊端：当文字内容长度大于块的宽度时，就有内容脱离了块。)
25.垂直居中-父元素高度确定的多行文本：
a.方法一:使用插入table（包括tbody,tr,td）标签，同时设置vertical-align:middle。CSS中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
b.方法二:chrome,firefox,及IE8以上的浏览器可以设置块级元素的display:table-cell;(设置为表格单元显示)，激活vertical-align;属性。
26.隐性改变display类型：当为元素(不论之前是什么类型元素，display:none除外)设置(position:absolute;或者float:left/right;)之一时，元素display类型就会自动变为display:inline-block;的方式显示，可以设置宽高，同时默认宽度不占满父元素。
常用具体样式
1.文字排版：
p{
font-size:12px;/*字号*/
color:red;/*文字颜色*/
font-weight:bold;/*加粗*/
font-family:"Microsoft Yahei"；/*字体*/
font-style:italic;/*斜体*/
text-decoration:underline;/*下划线*/
text-decotation：line-through；/*横穿的线，删除线*/
text-indent:2em;/*缩进2个字符*/
line-height:1.5em;/*1.5倍行间距*/
letter-spacing:2px;/*字母间距*/
word-spacing:5px;/*单词间距*/
}
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行的代码其实可以缩写为一句：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
ps:
a.使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
b.在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em "宋体",sans-serif;
}
只是有字号、行间距、中文字体、英文字体设置。
2.段落排版：
h1{
text-align:center;/*居中*/（lift,right）
}
3.盒模型样式（块级元素）：
div{
200px;/*宽度*/
height:200px;/*高度*/
padding:10px 10px 10px 10px;/*内边距（上 右 下 左）*/
maigin:10px 10px;/*外边（上下 左右）*/
border:2px solid red;/*边框的粗细，样式（dashed，datted，solid），颜色*/
}
4.浮动模型样式：
div{
float:left/right;
}
5.层模型-绝对定位：
div{
200px;
height:200px;
border:2px solid red;
left:100px;
top:50px;
}
6.层模型-相对定位：
div{
200px;
height:200px;
border:2px solid red;
position:relative;
left:100px;
top:50px;
}
7.层模型-固定定位：
div{
200px;
height:200px;
border:2px solid red;
position:fixed;
left:100px;
top:50px;
}
8.不定宽块状元素居中-方法一（table）:
为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
html代码：
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
css代码：
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
9.不定宽块状元素居中-方法二（）；
改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
10.不定宽块状元素居中-方法三(position:relative;):
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
代码如下：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
css代码：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{
float:left;
display:inline;
margin-right:8px;
}
</style>
11.垂直居中-父元素高度确定的单行文本：
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
<div class="container">
hi,imooc!
</div>
css代码：
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>
12.垂直居中-父元素高度确定的多行文本（方法一）：
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
13.垂直居中-父元素高度确定的多行文本(方法二)：
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
css代码：
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。