本文参考原文链接
1.css盒子模型
w3c盒子模型，ie盒子模型：包括margin，padding，content，border
区别：width的计算有区别
2.css选择器
通用选择器，ID选择器 ，.类选择器class，标签选择器，标签组合选择器，伪类选择器：，+相邻元素选择器，>子元素选择器，~同辈选择器
重点：伪类选择器 谈到伪类就要谈下伪类和伪元素
伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规css选择器所获得的信息。格式：属性如<a>的：link，：visited等属性
伪元素存在的意义是为了创建一些文档语言无法创建的虚拟元素。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到::first-letter,::first-line
3.css的样式的优先级
内联样式>内嵌样式>外联样式
内联样式直接把样式写在标签中
<p style="color:red";font-size:12px>这里文字是红色。</p>
内嵌样式把样式写在style标签之中
<head>
<style type="text/css">
span{
color:red;
}
</style>
</head>
外部样式把样式写在css文件中并链接到html文件中<link href="base.css" rel="stylesheet" type="text/css" />
4.css3的新特性
1、@font-face加载字体样式；
2、文字渲染，text-decoration,text-fill-color:文字内部填充颜色，text-stroke-color:文字边框填充颜色，text-stroke-width:文字边界宽度。
3、css3的多列布局 Column-count：表示布局几列。Column-rule：表示列与列之间的间隔条的样式 Column-gap：表示列于列之间的间隔。
4、边框圆角的布局。border-radius:50px;
5、css3的渐变效果， （gradient）
6、css3的阴影效果图 （shadow反射和reflect反射效果）
7、css3的多背景图片
8、css3的动画效果 animation
5.行内元素和块级元素
行内元素只能容纳内联元素和文本 ，块级元素占据整个容器空间
块级元素和内联元素的区别：
1.块级元素总是从新的一行开始;而内联元素和其他元素在一行
2.块元素能容纳其他块元素或内联元素;内联元素只能容乃文本和其他内联元素
3.块元素中高度，行高以及顶和底边距都可以控制；内联元素中高，行高及顶和底边距不可改变。
块内元素div/p/form/ul/li/ol/hr/fieldset/table/dd/dt/dl
内联元素span/strong/a/b/em/img/input/lable/small/sub
6.为什么使用css和div布局
1，代码精简（没有本身自带的一些属性，容易设置样式）
2，解决了table表格的嵌套问题
3，速度问题（页面代码减少，增加了编写代码的速度）
4 ，对排名的影响，基于xhtml标准的div+css布局会更快的通过w3c标准
7.隐藏button的方法，写一个button
隐藏一个button(两种)：display::none ;visibility:hidden
声明一个button(两种)：<input type=button>;<button> 按钮</button>
8.浏览器的兼容性问题
1，浏览器默认的内外边距不一样，所以用通用选择器*设置margin和padding来设置。
2，块标签设置浮动后，有设置margin的情况下，在ie6下的margin比别的浏览器大。
3，img标签会有默认的间距，需要用浮动去设置
4，火狐浏览器中的点击事件和滚动事件需要加（event）来兼容
5，div里的内容，ie默认为居中，firefox默认为左对齐，需要用margin:0px auto来调节
6，css3的动画效果不兼容ie8以下。需要使用js去写动画。
7，ie6的双倍边距，比如设置了margin:10px,ie6中默认为20px，需要使用display:inline,block.
9.css3实现水平垂直居中
方法一
div使用绝对布局，设置margin:auto;并设置top、left、right、bottom的值相等即可
main{
text-align: center; /*让div内部文字居中*/
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
方法二 仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。
.main{
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
方法三
使用center标签
<p style="text-align:center;">123</p>
10.使用过的浏览器及其内核
IE浏览器（内核trident），谷歌浏览器（webkit）
11.em，rem，px
em是相对长度单位，是相对于当前文本的字体大小： 比如font-size:16px;则1em就是16px
px是是相对于像素，像素px随着屏幕的分辨率变化
rem是css3新增的一个相对单位（相对于根元素）
12.清除css浮动的样式
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。通常为了使块级元素能够水平排列，我们会将需要这样显示的元素设置浮动来实现需要的效果。常用的浮动有左浮动，右浮动，以及none.对应的css 属性为：float:left;right;none.
清除浮动在父级div加overflow:hidden
<div class="father" style="overflow: hidden;">
<div class="type_lei_left">备注</div>
<div class="type_lei_left_1" style="word-break: break-all;word-wrap: break-word;"></div>
<div style="clear: both;display: none;"></div>
</div>
13.href和src的区别
href属性是超链接，会建立通道，让当前元素和引用资源进行联系，如<a><link>标签；而src会把资源下载下来，替换当前元素嵌入到文档中，如<img><style><script>标签等
