一、html规范：
1.有链接跳转的div用a标签包起来，这样能被键盘focus到。
2.导航可以用nav标签，头部用header标签
3.数据提交用form标签，form标签上面写action地址即可将form里面input框里面输入的值发送数据到后台，表单用于向服务器传输数据。
二、css命名规范：
颜色，排列布局或者一些可以公用的样式或动画等可以提取出来，放在common里面公用。别的页面直接引用即可。
关于css命名，参考张含韵大神的这篇文章：http://www.zhangxinxu.com/wordpress/?p=1098
三、css实践：
1.页面整体布局：
流布局，使用clac()属性来计算：
.box { width: 500px; height: 200px; background-color: red; } .minbox { /* 100%;*/ width: calc(100% - 2px); height: 50px; border: 1px solid blue; background-color: yellow; }
<div class="box"> <div class="minbox"> </div> </div>
使用第一种100%和第二种width：calc(100% - px)的区别为：
第一种为 width为100%的时候，由于左右有1px的border 所以加起来会溢出2px 第二种就用calc（）计算用整体的100%宽度减去了2px;
还有一种办法就是 当width为100%时加上：box-sizing: border-box; ( https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing)
应用实例1：
使用calc()计算法：
http://output.jsbin.com/jusizaqeji
解释：一行放下4个的话，宽度就是25%，最后一个列表的margin-right 设为0，所以有3个margin-right ，用4个box的宽度来平分这三个margin-right值。即宽度为：calc(25%-24*3/4px)
上面例子的优点是：不用根据屏幕大小的改动来计算宽度，缺点是不兼容ie8;
关键代码：
.item { position: relative; float: left; box-sizing: border-box; width: calc(25% - 18px); height: 20px; margin: 0 24px 24px 0; border: 1px solid pink; background-color: yellow; } .item:nth-of-type(4n) { margin-right: 0; }
应用实例2:
使用text-align: justify属性：
整体剧中：http://output.jsbin.com/fehifenovo
关键代码：在列表下面对增加一行widht为100%的标签层
.justify_fix { display: inline-block; width: 100%; height: 0; overflow: hidden; }
左剧中：http://output.jsbin.com/gamijilaru
关键代码：复制几个空标签 用来站位
<li class="item vh"></li> <li class="item vh"></li> <li class="item vh"></li>
应用实例3:
使用margin-left为负值:
http://output.jsbin.com/venozudiwi
关键代码：
.box-ul { padding: 0; margin: 0; list-style: none; overflow: hidden; margin-left: -20px; } .item { width: 25%; display: inline-block; float: left; } .item-box { margin-right: 20px; margin-bottom: 20px; height: 100px; border: 1px solid red; }
应用实例4：
使用vw，跟百分比类似
demo：http://output.jsbin.com/nolicebetu
关键代码：
li { width: 25vw; background: red; padding: 10px; border: 1px solid blue; box-sizing: border-box; float: left; list-style: none; }
2、页面各种剧中：
1.div暴力剧中方法：
http://jsbin.com/povirerohu，这种剧中的好处是给他加个padding属性，他是从外往内负padding值的
关键代码：
.box { width: 100px; height: 100px; background-color: pink; position: relative; } .content { width: 50px; height: 50px; background-color: yellow; position: absolute; left: 0;right: 0; top: 0;bottom: 0; margin: auto; }
2.用line-height属性将文字垂直剧中：
主要代码：
.box { width: 100px; height: 100px; background-color: pink; line-height: 100px; text-align: center; }
3.使用vertical-align：middle属性相对剧中来实现剧中效果：
http://output.jsbin.com/gayisoqeha
主要代码：
.wrapper { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(25,28,34,.88); text-align: center; overflow: auto; z-index: 20; } .box { width: 300px; height: 300px; background-color: #FFF; display: inline-block; white-space: normal; vertical-align: middle; } .box-i { display: inline-block; height: 100%; vertical-align: middle; }
<div class="wrapper"> <div class="box"></div> <i class="box-i"></i> </div>
4.使用transform属性来剧中 ：
实例：http://output.jsbin.com/yofejafuki
主要代码：
.box { width: 100px; height: 100px; background: red; position: relative; } .content { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; background: yellow; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); }
3、页面各种动画：
使用transition属性来延缓动画，体验更好：
http://jsbin.com/pigomuyani
鼠标hover第一排和第二排，分别查看效果。
主要代码：
.anima-item { border-radius: 4px; transition: background .2s; } .anima-item:hover { background: yellow; }
4、svg上面不要写样式，在它的父元素上面写即可。
6、一些可以被键盘focus到的元素：
http://output.jsbin.com/wigejayohi
7、.在Mac Retina屏幕下面，border为1px可能会识别不到，用border: 1.2px;
8、border和opacity
当border：1px solid #000；
遇上opacity: 0.4之类的会有兼容性问题：
解决办法：border: 1px solid rgba(0,0,0,.4);
.item { font-size: 22px; color: red; } .item:focus { color: yellow; }