css样式：
- css样式由选择符和声明组成，声明又由属性和值组成。
- eg： p{ color: red; font-sieze:12px},p为选择符，大括号中的一个属性和值组成的为一个声明(本例中有两个声明)，color为属性，red为值。
- 当有多个声明的时候之间用分号隔开。
css分为三种：
- 内联式，嵌入式和外部式。
- 内联式就是直接在标签中写的。
- 嵌入式是在head标签的style标签中。
- 外部式是把样式写在一个单独的文件中，然后是用link标签将样式链接到html文件中。eg: <link href="", rel="stylesheet" type="text/css"> rel="stylesheet" type="text/css"是固定写法不允许更改。
- 优先级是：内联式最高，嵌入式次之，外部式最低（在具有相同的权值下的优先级）（就近原则）。
选择器：
- 语法：选择器{样式；}。
- 标签选择器：标签选择器就是html中的标签。eg：p{color：red；}。
- 类选择器：.类选择器名称{css样式代码}
语法： .类选器名称{css样式代码;} 注意： 1、英文圆点开头 2、其中类选器名称可以任意起名（但不要起中文噢） 使用方法： 第一步：使用合适的标签把要修饰的内容标记起来，如下： <span>胆小如鼠</span> 第二步：使用class="类选择器名称"为标签设置一个类，如下： <span class="stress">胆小如鼠</span> 第三步：设置类选器css样式，如下： .stress{color:red;}/*类前面要加入一个英文圆点*/
- id选择器：id选择器前面是“#”。id选择器只能使用一次，且仅仅只能使用一次。可以用一个类选择器列表为一个元素同时设置多个样式，id选择器不能。即可以是 <span class="c1 c2"></span>但是不能是<span id="i1 i2"></span>。
- 子选择器：>,用于选择指定标签的第一代子元素。如下如果使用.food>li{border:1px solid red;}则水果和蔬菜周围都会有一个边框，但是里面的li是不会有边框的。
<ul class="food"> <li>水果 <ul> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul> </li> <li>蔬菜 <ul> <li>白菜</li> <li>油菜</li> <li>卷心菜</li> </ul> </li> </ul>
- 包含（后代）选择器：即加入空格，用于选择指定标签下的后辈元素。如果使用.food li{border:1px solid red;}则除了第一代的li有边框外，内层的li也会有边框。包含选择器和子选择器的区别是：包含选择器包含子代和孙代等后辈，子选择器只包含子代。
- 通用选择器：*作用是匹配所有的html标签。
- 伪类选择器：允许给html不存在的标签设置样式。如a:hover{color:red};目前为之可以兼容所有浏览器的也之有a标签了。
- 分组选择器：“，”号。例子如下：
h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
- 权值：标签的权值为1，类选择符的权值为10，id选择符的权值为100。如果权值相同则可以使用就近原则。
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
- 重要性：有些特殊的情况需要设置最高的权值，这个时候我们需要使用！important（权值高于用户自己设置的样式）。p{color:red!important;}
排版：
- 文字排版-粗体：font-weight:bold。
- 文字排版-斜体：font-style:italic。
- 文字排版-下划线：text-decoration:underline。
- 文字排版-删除线：text-decoration:line-through。
- 段落排版-缩进：text-indent:2em。
- 段落排版-行间距：line-height:1.5em。
- 段落排版-中文字间距，字母间距： letter-spacing:50px(如果是字母的话设置的是字母和字母之间的间距) ，word-spacing:50px （设置的是单词和单词之间的间距）。
- 段落排版-对齐：text-align:center/left/right。
- 元素分类：
标签元素有三类：块状元素、内联元素（行内元素）和内联块状元素。
块状元素：div,p,h1...h6,ol,ul,dl,talbe,address,blockquote,form 等
内联元素：a, span,br,i,em,strong,label,q,var,cite,code,
内联块状元素：img，input
区别：
每个块状元素都新起一行，并且后面的元素也另起一行。元素的高、宽、行高以及顶和底边距都可以设置。元素宽度在不设置的情况下是其父元素的100%。
内联元素在同一行，元素的高度、宽度及顶部和底部边距不可以设置，元素的宽度是其包含的内容的宽度，并且不可以改变。
内联块状元素在同一行，但是高度和宽度及顶和底部边距可以设置。
盒模型：
- 盒模型的实际宽度和高度包括内容、边框（border），边界（margin）。
- 内容和边框之间成为填充。顺序是上右下左。padding在边框里，margin在边框外。
css布局模式：
- 流动模式（flow），浮动模式（float），层模式（layer）。
- 流动模式是默认的网页布局模式，典型特点是：1.块状元素会在包含元素内按自上而下的顺序垂直延伸分布2.内联元素会自左向右排列。
- 浮动模式：设置float。
- 层模式：绝对定位（absolut）, 相对定位（relative），固定定位（fixed）。
绝对定位：如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
相对定位：相对与之前的位置用left op ightottom进行设置，原先的位置任然保留，也就是别的元素不能使用。
固定定位：相对移动的坐标是视图。
盒模型代码简写：
- 简写规则是上右下左。
- 如果top和bottom相同，left和right相同，则可以缩写为两个。
- 如果left和right相同，则为：margin：10px 20px 30px （上，左右，下）
长度值：
- 像素。
- em（就是本元素指定的font-size值，如果元素font-size为14px，则1em=14px，如果font-size为18px，则1em = 18px），如果本元素的font-size设置为em，则以父元素的 font-size为准。
- 百分比（font-size:12px;line-height:130%【12*1.3】）。
水平居中设置：
- 水平居中设置-行内元素：
如果被设置的元素是是行内元素，水平居中是给父元素设置text-align:center。
- 水平居中设置-块状元素：
如果被设置的元素是块状元素，设置text-align就没有用了，此时又分两种情况（定宽块状和不定宽块状），满足定宽和块状元素时可以设置左右margin为auto来实现居中。
1.定宽块状元素
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>定宽块状元素水平居中</title> <style> div{ border:1px solid red; width:500px; margin:20px auto; } </style> </head> <body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
2.不满足定宽的块状元素：
三种方法设置居中（1.加入table标签 2.设置display：inline 3.设置position：relative和left：50%）。
加入table标签：
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
设置display：
改变块状元素为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; } .container ul{ list-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; } </style>
设置position：
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
垂直居中设置：
- 垂直居中-父元素高度设置的单行文本：设置父元素的height然后设置line-height和height相同。
- 垂直居中-父元素高度确定的多行文本：
1.使用插入table包括tbody，tr、td，同时设置vertical-align：middle。css有一个样式 vertical-align，但是这个元素只有在td和th中才会起作用，所以需要插入table标签。
2.设置块状元素的display为table-cell，激活vertial-align（就是两个都设置display:table-cell;vertial-align:middle;），但是ie67部支持这个样式。
隐性改变display样式：
不论之前是什么元素类型，display：none除外，设置position:absolute或者float：left/right后元素会自动变成display：inline-block，当然就可以设置宽度和高度了，并且默认不占满父元素。