前端学习参考

http://www.imooc.com/course/learn/id/33 css3


http://www.w3cplus.com  


http://www.w3cfuns.com   html+css+js


https://developer.mozilla.org/en-US/


http://angularjs.cn/


http://www.cnblogs.com/PeunZhang/p/3522603.html   <移动端开发。


http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/


https://github.com/peunzhang/mobileTech


http://www.muhu28.com/categoryIndex/nav/43 <nodejs>


http://www.w3cfuns.com/article-1300-2.html {fontstyle 字体图标}


http://www.cnblogs.com/


https://github.com/amfe/lib-flexible   《高清显示屏》


http://www.css88.com/book/css/ （css3参考手册）


http://wiki.jikexueyuan.com/project/html5/  html教程




box-sizing：border-box；即可，为什么呢？ 拿公式说话：
content-box：横向：content-width = width+padding-left+padding-right+border-left+border-right;
border-box: 横向：content-width = width-padding-left-padding-right-border-left-border-right;
纵向与横向类似，这里就不做赘述，通过公式我们就一目了然，即content-box是外扩，border-box是内缩。


flex 应用
 如果说写手机页面最常用的技术是什么，我认为是 flex，为了让内容自适应，等分，水平居中，垂直居中，我们都可以直接使用 flex 解决，事实上，它的表现跟 table 类似。
 但 flex 麻烦的一点是需要写点兼容，因为它在成长的过程中，出现了不同的规范定义，造成现在不同系统对其支持的写法不一样，故麻烦了一点，这里当成代码片段总结一下。
1. 等分
.parent{display: -webkit-box; display: -webkit-flex; display: flex;}
 .child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}
 2. 水平居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}
 3. 垂直居中
.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;}
注1：上面 parent 代表父元素，child 代表子元素，水平垂直居中把上面的分别合并起来即可。
 注2： 在有了 flex 之后，现在很多弹窗组件的结构也在发生着变化，以前遮罩层都是与弹窗分开的，现在在移动端，完全可以直接嵌套起来，如： div.overlay>div.pop , 然后 overlay 层 position: fixed; top: 0; bottom: 0; left: 0; right: 0; pop 层作水平垂直居中即可