1. placeholder是html5的新属性，仅支持html5的浏览器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。
2.兼容全浏览器的写法： div{ filter:alpha(opacity=50); } /* IE6-IE8 */ ，div{ opacity:.5; } /* 现代浏览器 */
3.适配：http://www.mahaixiang.cn/ydseo/1369.html
4.Png 透明图片，颜色很丰富，但是IE6不支持PNG-24透明
5.块元素:
1.独占一行
2.有宽高
3.display:block
4.块级元素一般可嵌套块级元素或行内元素
5.<form>只能包含块级元素
包括:<div>, <p>, <h1>, <form>, <ul> ， <li>
6.行内元素:
1.共用一行
2.宽高auto*auto
3.dispaly:inline
4.不能定义自己的宽和高,可以通过行高line-height撑起来
包括:<span>, <a>, <label>, <input>, <img>, <strong> 和<em>
5.img 可以通过css改变宽高，
7.行内块级元素
1.共用一行
2.有宽高
3.display:inline-block
包括:form表单
8.热区 就是你指定图片的一个区域 点击那里可以跳转到指定页面
9.过渡动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:0s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:0s;
}
div:hover
{
200px;
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
</body>
</html>
10.自定义动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
11弹性布局:https://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/
1.可以让你告别浮动、完美实现垂直水平居中的新特性
2.Flexbox布局的主体思想:根据浏览器的大小变化进行自动伸缩
3.弹性盒布局模型已经被主流的浏览器所支持。不过为了支持不同版本的浏览器，在使用时除了规范中定义的属性之外，还需要添加相应的浏览器前缀形式