一、html需掌握的：
1. img标签 属性：src alt title width height 2. a标签 属性：href target 3. ul 标签及li 标签，二者都是块级标签 ul 属性（type：disc circle square none） 4. table 标签及 tr 标签 和 td 标签和 th 标签 属性：border cellpadding cellspacing width rowspan colspan 5. form 表单 input 标签 ：type类型 6. select 标签 option 标签 属性：multiple 及 selected 7. lable 标签 属性：for
二、css需要掌握的第一部分：查找标签
1.css三种导入方式：
1.行内式：常用在网站页面最下端，网站的介绍中
缺点：html与css代码杂糅在一起，耦合性太强
2.嵌入式：<style></style>
3.链接式：<link rel="stylesheet" href=""/>
2.css选择器：
一 基本选择器 1 标签选择器 div{ color: red; } 2 id选择器 #p2{ color: red; } 3 class选择器 .c1{ color: red; } 4 通配选择器（了解） * { color: red; } 二 组合选择器 1 后代选择器 .c2 p{ color: red; } 2 子代选择器 .c2>p{ color: red; } 3 毗邻选择器 （了解） .c2+p{ color: red; } 4 兄弟选择器 （了解） .c2~p{ color: red; } 5.多元素选择器 .c2 .c3,.c2~.c3{ color: red; background-color: green; font-size: 15px; } 6. p.c1{ color: red; } 表示的是选择一个既是p标签并且是c1类标签的 7. class='s1 c1' 标签可以有多个类名 8.属性选择器： （可以自定义属性） 1. [egon] { color: red; } 2. [egon='dog'] { color: red; } 3. p[egon] { color: red; } 选择的是p标签中属性是egon的 如：<p egon="dog">asd</p>
3.伪类： 伪类都是通过： 实现的 伪类的目的：解耦
anchor伪类： 一般和a标签连用
属性：
：link {color: red;} 没有接触过的 链接是 红色
：hover {color: gray;} 鼠标悬浮在链接上 是 灰色
：active {color: green;} 访问时 是 绿色
：visited {color: gold;} 访问完 是 黄色
.outer:hover .inner1{color: gold;}
表示的是 悬浮在outer位置时 outer的后代inner1区域变化颜色
这种情况，只能是后代，其他情况不行
before after 伪类 例：p:before{content:"hello";color:red;}
4.选择器优先级：
三、css需要掌握的第二部分：属性操作
1.文本：
1.颜色：十六进制/red/RGB 2.位置： 水平：text-align：left / right / center / justify 垂直：line-height=行高 3.间距：line-height：10px; 4.文本与图片对齐：vertical-align：middle / top / ±数字（+下移，-上移） 注意：动的是图片 5.对 a 标签操作时 一定要定位到 a 标签：text-decoration：none; 去掉a 标签的下划线 6.font-size：10px; 字体大小 7.font-weight：light / bold / broder 调字体粗细 8.font-style：oblique/italic 斜体 9.text-indext：30px; 首行缩进
10.letter-spacing：10px; 字母间距
11.word-spacing:20px; 单词间距
2.内外边距 padding 与margin
padding 内边距 加上padding后盒子区域会变大 padding 简写： padding：50px 上下左右都是50 ：50px 20px 上下50 ：50px 20px 10px 上 50 左右 20 下 10 ：50px 20px 10px 10px 上 50 右 20 下 10 左 10 margin：盒子与盒子的距离（外边距） {80%; margin: 0 auto; } 0 表示上下距离，auto 是左右居中
3.边框属性border
border 加上border后盒子区域会变大 属性： 1.border-width 2.border-style 3.border-color 4.简写： border：3px solid red;
4.背景属性
1. background-color: red; 2.background-image: url(""); 3.background-repeat: no-repeat / repeat-x / repeat-y; 图片重复 4.background-position: center; （与background-position:center center一样） background-position: 400px 200px; 背景图片距离左边界400px，上边界200px 5.简写：background：url("") no-repeat center; 图片居中不重复 6.窗口小图片大时，移动图片，在浏览器中调尺寸
5.display 属性
dispaly：inline-block 变成内联块级标签---可以解决块级在一行显示问题
dispaly：none 隐藏盒子
三个盒子，如果中间的盒子设置了dispaly：none ，并且它是三无属性（无边框、无padding、无文本），那么下方盒子就会顶上来
6.overflow 属性
overflow：hidden / auto / scroll
overflow：hidden 解决溢出问题 也可以用auto和scroll
7.position 定位
1. position：static 默认位置 2. position：fixed 固定位置 例子： position：fixed； top / left / bottom / right ：20px （相对可视窗口的距离） 3. position：relative; 相对自己的位置，并且原位置保存 例子： position：relative； top：20px; left：200px; 4. position：absolute; 相对已定位的父级，并且原位置不保存 例子： position：absolute; top：200px; left：200px;
小结：
float：半脱离文档流
position：fixed ： 完全脱离文档流，固定定位 以可视窗口为参照物 可以使用top left进行定位
position:relative : 不脱离文档流 以自己原位置作为参照物， 可以使用top left进行定位
position:absolute : 完全脱离文档流, 以已经定位了的父标签作为参照物 可以使用top left进行定位
将定位标签设置为absolute，将父级标签设置为定位标签（relative）
8.float 浮动属性： 解决多个块级标签在一行显示
1.浮动布局的位置：看上一个元素是不是浮动元素，如果是就挨着放，如果不是就另起一行放
2.清除浮动：
1 clear：left; 清除自身左侧不能有浮动元素
2 clear：right； 清除自身右侧不能有浮动元素
3 clear：both； 清除自身左右两侧不能有浮动元素（按照先后顺序判断）
4 父级塌陷问题 http://www.cnblogs.com/haiyan123/p/7569829.html